Arrays type can be confusing at first, so let's look at how it works.
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
let myNumbers:number = [ 1, 2, 3, 4 ]; // Throws an error. myNumbers.push("string");
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
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.
Sometimes, we know an array is going to consist of either
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' ];
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' ];
Understanding the array type in TypeScript is fundamental for using TypeScript day to day. I hope you've enjoyed this guide.
Also published here.