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); // NaNTypeScript 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
numberwhen conversion works nullwhen 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
| Concept | Example |
|---|---|
| Number annotation | let age: number = 25 |
| Decimal number | let rating: number = 4.8 |
| Inferred number | let views = 1000 |
| Function parameter | function add(a: number) |
| Function return | function add(): number |
| Special values | NaN, Infinity |
| Literal numbers | 1 | 2 | 3 | 4 | 5 |
| Preferred primitive | number, 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
numbertype 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
NaNandInfinityare still numbers - Why runtime validation is still important
- Why lowercase
numberis 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.