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' ]
Similarly, an array of numbers could be defined like this:
let myNumbers:number[] = [ 1, 2, 3, 4 ];
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");
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 ];
Tuples can be of any length.
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 lengths 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' ];
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 ]
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' ];
Conclusion
Understanding the array type in TypeScript is fundamental for using TypeScript day to day. I hope you've enjoyed this guide.
Also published here.