runtime.boot

Full Stack Systems
Production Mindset

CodeWithMihir

Engineering thoughtful products from interface to infrastructure.

CodeWithMihir

TypeScript Tutorial

TypeScript number Type Explained with Examples

Learn how the TypeScript number type works for integers, decimals, calculations, NaN, Infinity, function parameters, and common mistakes.

Welcome back! I am Mihir, and in this lesson we will learn the number type in TypeScript.

A number is used for numeric values like age, price, quantity, score, rating, percentage, and coordinates.


What is a number?

Use number for both integers and decimals.

let age: number = 25;
let price: number = 1499.99;
let rating: number = 4.8;

TypeScript does not have separate int, float, or double types.

This is valid:

let quantity: number = 10;
let discount: number = 12.5;

Both are number.


Invalid Number Assignment

let total: number = 999;

total = "999";

TypeScript warns because "999" is a string, not a number.

Even if a string contains digits, it is still a string.


Type Inference with Numbers

You do not always need : number.

let views = 1200;
let rating = 4.9;

TypeScript infers both as number.

Invalid:

views = "many";
rating = "excellent";

TypeScript already knows these variables should be numbers.


Calculations with number

You can use normal JavaScript arithmetic operators.

let price: number = 1000;
let tax: number = 180;

let total: number = price + tax;
let discounted: number = total - 100;
let doubled: number = price * 2;
let half: number = price / 2;

TypeScript understands that arithmetic with numbers produces numbers.


Function Parameters with number

Function parameters should usually be annotated.

function add(a: number, b: number): number {
  return a + b;
}

const result = add(10, 20);

Invalid:

add("10", 20);

The first argument must be a number.


Number Object Properties

Numbers are common inside object types.

type Product = {
  id: number;
  title: string;
  price: number;
  stock: number;
};

const product: Product = {
  id: 1,
  title: "Keyboard",
  price: 1499,
  stock: 25,
};

This helps TypeScript catch incorrect product data.


NaN and Infinity

JavaScript has special number values:

let invalidResult: number = NaN;
let endless: number = Infinity;

They are still typed as number.

Example:

const result = Number("hello");

console.log(result); // NaN

TypeScript sees result as a number, even though the runtime value is NaN.

So TypeScript helps with types, but it does not replace runtime validation.


Checking Numbers at Runtime

Use JavaScript checks when data comes from users, APIs, or forms.

function parsePrice(value: string): number | null {
  const price = Number(value);

  if (Number.isNaN(price)) {
    return null;
  }

  return price;
}

This function returns:

  • a number when conversion works
  • null when conversion fails

Numeric Separators

For large numbers, you can use underscores for readability.

let revenue: number = 1_000_000;
let views: number = 250_000;

This is the same as:

let revenue: number = 1000000;

The underscores are only for readability.


Number Literal Types

You can restrict a number to specific values.

let rating: 1 | 2 | 3 | 4 | 5;

rating = 5;
rating = 3;

Invalid:

rating = 10;

This is useful when only certain numeric options are allowed.


Common Mistake: number vs Number

Use lowercase number:

let count: number = 10;

Avoid uppercase Number:

let count: Number = 10;

For normal numeric values, lowercase number is the correct choice.


Common Mistake: Form Values Are Strings

HTML input values usually come as strings.

const inputValue = "25";

If you need a number, convert it:

const age = Number(inputValue);

Then validate it:

if (!Number.isNaN(age)) {
  console.log(age + 1);
}

Quick Reference Summary

ConceptExample
Number annotationlet age: number = 25
Decimal numberlet rating: number = 4.8
Inferred numberlet views = 1000
Function parameterfunction add(a: number)
Function returnfunction add(): number
Special valuesNaN, Infinity
Literal numbers1 | 2 | 3 | 4 | 5
Preferred primitivenumber, not Number

Practice

Create a function that calculates a cart total:

function calculateTotal(price: number, quantity: number, discount: number): number {
  return price * quantity - discount;
}

const total = calculateTotal(499, 3, 100);

console.log(total);

Try passing "499" instead of 499 and see what TypeScript says.


What You've Learned

You now understand:

  • What the number type is
  • How TypeScript handles integers and decimals
  • How number inference works
  • How to type numeric function parameters and returns
  • How numbers work inside object types
  • Why NaN and Infinity are still numbers
  • Why runtime validation is still important
  • Why lowercase number is preferred

What's Next?

In the next lesson, we will learn the boolean Type in TypeScript.

We will cover true or false values, conditions, flags, function returns, and common boolean mistakes.


Need Help?

  • Have questions, confusion, or want to know more? Contact me

Numbers look simple, but most real bugs come from mixing numeric data with strings from forms, APIs, and URLs.