DEV Community 👩‍💻👨‍💻

Cover image for TypeScript Array Type
Johnny Simpson
Johnny Simpson

Posted on • Originally published at fjolt.com

TypeScript Array Type

Arrays work the same in TypeScript as they do in Javascript, the only difference being that we have to define their type upfront. Arrays, by their nature, are an ordered list of data. Defining an Arrays type can be confusing at first, so let's look at how it works.

Defining Array Types in TypeScript

If we have an array, we can define its type in TypeScript by using the notation type[]. For example, the below variable arrayType is expected to be an array of strings.

let arrayType:string[] = [ 'hello', 'there' ]
Enter fullscreen mode Exit fullscreen mode

Similarly, an array of numbers could be defined like this:

let myNumbers:number[] = [ 1, 2, 3, 4 ];
Enter fullscreen mode Exit fullscreen mode

This also conforms any future array items to that type. For example, we couldn't push or add a string to the end of an array defined as type number:

let myNumbers:number[] = [ 1, 2, 3, 4 ];
// Throws an error.
myNumbers.push("string");
Enter fullscreen mode Exit fullscreen mode

Tuple Types in TypeScript

I've already written about tuples in TypeScript here, but they are a type of array with a defined number of items, of specified types. For example, we could define an array with two elements, of type string, and number, and this would be called a tuple. That could be achieved by doing something like this:

let myTuple:[ string, number ] = [ "hello", 20 ];
Enter fullscreen mode Exit fullscreen mode

Tuples can be of any length, and you can learn more about how tuples are defined here.

Storing a Mixture of Types in an Array in TypeScript

Sometimes, we know an array is going to consist of either number or string elements, but we're not sure in what order, or even how many. As such, a tuple isn't really the right option here. Instead, we can define an array like this using the same format as before, only letting TypeScript know that it can be multiple types.

For example, for an array of unknown length where any item could be either a number or a string, we could write the following:

let type:(string | number)[] = [ 'hello', 'world', 20, 40, 'goodbye' ];
Enter fullscreen mode Exit fullscreen mode

Using the Generic Type format for Arrays in TypeScript

Finally, it is also possible to use the generic type definition format for defining Array types in TypeScript. For example, an Array of numbers could be defined like so:

let type:Array<number> = [ 0, 1, 2, 3, 4, 5 ]
Enter fullscreen mode Exit fullscreen mode

Or, an array where items could be either a string or a number could be defined like so:

let type:Array<string | number> = [ 'hello', 'world', 20, 40, 'goodbye' ];
Enter fullscreen mode Exit fullscreen mode

Conclusion

Understanding the array type in TypeScript is fundamental for using TypeScript day to day. I hope you've enjoyed this guide, and if you want more TypeScript content, you can find it all here.

Oldest comments (1)

Collapse
 
lukeshiru profile image
Luke Shiru

A few extra tips:

More often than not, the type will be inferred, so ...

// This:
const numbers: number[] = [1, 2, 3, 4];

// And this are the same:
const numbers = [1, 2, 3, 4];
Enter fullscreen mode Exit fullscreen mode

You can also define read-only arrays by using as const or ReadonlyArray<Type>:

const readOnlyNumbers = [1, 2, 3, 4] as const;
const readOnlyNumbers: ReadonlyArray<number> = [1, 2, 3, 4];
Enter fullscreen mode Exit fullscreen mode

The good thing about read-only arrays is that TypeScript will tell you that they don't have push or other methods that mutate arrays, so you can avoid mutations as much as possible.

Finally, tuples can be named, which is ideal to avoid confusions:

// Instead of this:
const user: [string, number] = ["lukeshiru", 32];

// You do this:
const user: [name: string, age: number] = ["lukeshiru", 32];
Enter fullscreen mode Exit fullscreen mode

Cheers!

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post