TypeScript Quirks: Arrays vs Tuples
So, in TypeScript we can define an array as being a list of things. This could be a single type of thing, or multiple possible things. Additionally, as briefly covered in a previous post, we can define a tuple… but it’s not necessarily what you’d think.
An array is defined in one of two ways…
type MyArray = string;
…for simple arrays of a single type, and…
type MyArray = Array<string | number>;
…for arrays that may contain multiple types.
Similarly defining array in the following ways will infer the same types as we’ve defined above.
const numberArray = [1, 2, 3, 4, 5]; const mixedArray = ['a', 2, 'c'];
The issue with these is that we can’t say for sure what type an item in an array is going to be when accessing it. Not without further checks anyway. E.g.
const item = mixedArray;
This item still has the type
string | number, so we have to make additional checks such as
typeof, or for more complex types; type gaurds, as discussed in this post.
There is a way, however, that we can define the exact items that should be in an array. TypeScript calls these tuples, although they’re not exactly the tuples you may be used to.
All we have to do is use the following syntax when defining our type:
type FixedArray = [string, number, string];
Awesome, right? Now we can use this to type the
mixedArray example from above and we’ll get exactly the types we’d expect.
const mixedArray: FixedArray = ['a', 2, 'c']; const first = mixedArray; // string const second = mixedArray; // number
Here, though, is where I explain the weird bit…
This is a fixed length array, with an explicit set of values, so we shouldn’t really be able to access values outside of this length… but we can… and what’s weirder is the types you get when you do.
const fourth = mixedArray; // string | number
Now we’ve got another
string | number type.
Okay, so maybe we can set an item outside of the range and it will have the correct type? Should we even be able to do that? We’ve defined an exact set of values for this tuple.
mixedArray = 4; const fourth = mixedArray; // string | number
Nope, we can happily set a value outside of this range, but it will still be a mix of the types defined for the know part of the array.
“This isn’t what I signed up for when I decided to use tuples” I hear you saying. “The whole reason we wanted to use a tuple was to retrieve the exact type of the item.” Luckily, we can, for the length that we’ve defined, and that’s all that tuples are really for. They will ensure that the items we’ve defined are the types that we want, and will prevent us from putting a string in place of a number, etc, but they don’t guard values outside of this range… and here’s why…