How to make an array with a specific length or array elements in TypeScript?
Tags: typescript
Published: 2022-01-13 00:00:00

---
  title: How to make an array with a specific length or array elements in TypeScript?
  published: true
  tags: TypeScript
  date: Thu Jan 13 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-array-with-specific-length-or-array-elements-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-bda40bd53a6fb5730cae00d189d141df.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-array-with-specific-length-or-array-elements-typescript)
  
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

```ts
// 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,

```ts
// 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,

```ts
// 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,

```ts
// 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](https://codesandbox.io/s/make-array-with-specific-length-or-array-elements-typescript-47im3?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---