To make an array with a specific length or array elements, we can use the concept of tuple types in TypeScript.
A tuple type in TypeScript is basically an array but it knows beforehand how many array elements it will hold and what type it will hold at each index.
To make a tuple type in TypeScript, we can use a type alias type declaration, then use the square brackets symbol ([]). Inside the brackets, we can write out the type we need to use at each index of the array.
TL;DR
// a simple tuple type when used on
// an array should hold only 3 elements.
// the 0th index should be `string` type
// the 1st index should be `number` type
// the 2nd index should be `number` type
type MyTuple = [string, number, number];
// using the `MyTuple` type on array
// where it has 3 elements in the array
// 0th index: has `string` type value
// 1st index: has `number` type value
// 2nd index: has `number` type value
const myArr: MyTuple = ["John Doe", 100, 1000]; // ✅ Valid.
// Type '[string, number, number, number]' is not assignable to type 'MyTuple'.
// Source has 4 element(s) but target allows only 3.
const myArr2: MyTuple = ["John Doe", 100, 1000, 10000]; // ❌ Error.
To understand it easily, let's say that we need to make an array where it needs to hold 3 elements where the 0th index of the array should have a value of string type, 1st index should have the type of number type and lastly, for the 2nd index, the value should be of type number.
It can be done like this,
// a simple tuple type when used on
// an array should hold only 3 elements.
// the 0th index should be `string` type
// the 1st index should be `number` type
// the 2nd index should be `number` type
type MyTuple = [string, number, number];
Now we have defined the tuple type, let's use this MyTuple type on an array like this,
// a simple tuple type when used on
// an array should hold only 3 elements.
// the 0th index should be `string` type
// the 1st index should be `number` type
// the 2nd index should be `number` type
type MyTuple = [string, number, number];
// using the `MyTuple` type on array
// where it has 3 elements in the array
// 0th index: has `string` type value
// 1st index: has `number` type value
// 2nd index: has `number` type value
const myArr: MyTuple = ["John Doe", 100, 1000]; // ✅ Valid.
As you can see from the above code the TypeScript allowed us to use the above array as it satisfies the MyTuple tuple type.
Now let's try to add a string type value to the 3rd index of the array.
It can be done like this,
// a simple tuple type when used on
// an array should hold only 3 elements.
// the 0th index should be `string` type
// the 1st index should be `number` type
// the 2nd index should be `number` type
type MyTuple = [string, number, number];
// using the `MyTuple` type on array
// where it has 3 elements in the array
// 0th index: has `string` type value
// 1st index: has `number` type value
// 2nd index: has `number` type value
const myArr: MyTuple = ["John Doe", 100, 1000]; // ✅ Valid.
// Type '[string, number, number, number]' is not assignable to type 'MyTuple'.
// Source has 4 element(s) but target allows only 3.
const myArr2: MyTuple = ["John Doe", 100, 1000, 10000]; // ❌ Error.
As you can see the TypeScript compiler is showing us an error saying that Type '[string, number, number, number]' is not assignable to type 'MyTuple'. Source has 4 element(s) but target allows only 3. In simple terms, it is saying that we cannot add a 4th element to this array which is what we want to happen.
We have successfully made an array with a specific length or array elements. Yay 🥳!
See the above code live in codesandbox.
That's all 😃!
Top comments (0)