Declare an Array of Numbers in TypeScript

avatar

Borislav Hadzhiev

Fri Feb 25 20222 min read

banner

Photo by Aki Tolentino

Declare an Array of Numbers in TypeScript #

To declare an array of numbers in TypeScript, set the type of the array to number[], e.g. const arr: number[] = []. If you try to add a value of any other type to the array, the type checker would show an error.

index.ts
// ✅ Array of numbers with inline declaration const arr: number[] = [1, 2, 3]; // ✅ Empty array of numbers const arr2: number[] = []; // ✅ Using a type type NumberArray = number[]; const arr3: NumberArray = [1, 2, 3];

The first example shows to how declare an array of numbers with an inline type.

If you try to add a value of any other type to the array, you'd get an error.

index.ts
const arr: number[] = [1, 2, 3]; // ⛔️ Error: Argument of type 'boolean' is not // assignable to parameter of type 'number'.ts(2345) arr.push(true);

This approach is very useful when you have to initialize the array as empty. If you don't explicitly type an empty array, TypeScript assumes its type to be any[].

index.ts
// 👇️ const arr: any[] const arr = [];

TypeScript has no idea what type of values we'll add to the array, so it uses the very broad any type.

This means that we can add values of any type to the array, but we'd get no help from the type checker.

You should always explicitly set the type of empty arrays.

index.ts
const arr: number[] = []; // ✅ Works arr.push(100); // ⛔️ Error: Argument of type 'boolean' is not // assignable to parameter of type 'number'.ts(2345) arr.push(true);

On the other hand, if you initialize the array with values, you can let TypeScript infer its type.

index.ts
// 👇️ const arr: number[] const arr = [1, 2, 3];

TypeScript already knows that the array above is a number[] based on its values.

You could also use a type to define an array of numbers.

index.ts
type FavNumbers = number[]; const arr: FavNumbers = [1, 2, 3];

If you have an object with a property that is an array of numbers, you can also use an interface.

index.ts
interface Person { favNumbers: number[]; } const arr: Person = { favNumbers: [1, 2, 3], };

In some cases, you might know that the array will only have N elements of specific type. You could use a tuple in this scenario.

index.ts
const coords: [number, number] = [5, 10];

The coords variable we declared above is a tuple containing 2 numbers.

If you need to declare a readonly array of numbers, use the Readonly utility type.

index.ts
const coords: Readonly<number[]> = [5, 10]; // ⛔️ Error: Property 'push' does not exist // on type 'readonly number[]'.ts(2339) coords.push(100);

We passed the number[] type to the Readonly utility type, so the array can only be read, but cannot be changed.

There is also a more specific ReadonlyArray utility type that achieves the same result.

index.ts
const coords: ReadonlyArray<number> = [5, 10]; // ⛔️ Error: Property 'push' does not exist // on type 'readonly number[]'.ts(2339) coords.push(100);

Notice that we passed number instead of number[] to the ReadonlyArray utility type.

Use the search field on my Home Page to filter through my more than 1,000 articles.