To declare a Fixed-length Array in TypeScript you can use a Tuple. Tuple types allow you to specify the types for each element in the array and, importantly, define a fixed number of elements in a specific order. In this article, we are going to learn how to declare a fixed-length array in TypeScript.

Syntax

type FixedLengthArray = [Type1, Type2, ..., TypeN]

Approach

• Use the type keyword to create a new type.
• Specify a tuple type using square brackets.
• Inside the square brackets, specify the types for each element in the array.
• Ensure the order and number of types match your desired fixed-length array.
• Declare a variable and assign an array literal to it.
• Now you can access individual elements using index notation.

Example 1: In this example, FixedLengthArray is a tuple type specifying a fixed-length array with a number, string, and boolean in that order.

type FixedLengthArray = [number, string, boolean];

const myArray: FixedLengthArray = [12, 'Geeks', true];

const numberValue: number = myArray[0];
const stringValue: string = myArray[1];
const booleanValue: boolean = myArray[2];

console.log(`Number Value: ${numberValue}`);

console.log(`String Value: ${stringValue}`);

console.log(`Boolean Value: ${booleanValue}`);

Output:

Number Value: 12
String Value: Geeks
Boolean Value: true

Example 2: In this example, example is a tuple type specifying a fixed-length array with two elements: a string and a number.

type example = [string, number];

const myExample: example = ['example', 42];

const stringValue: string = myExample[0];
const numberValue: number = myExample[1];

console.log(`String Value: ${stringValue}`);
console.log(`Number Value: ${numberValue}`);

Output:

String Value: example
Number Value: 42

Using Readonly Tuple

In this approach, we use the Readonly utility type to create a fixed-length array that cannot be modified after its declaration. This ensures the immutability of the array.

Syntax:

type ReadonlyFixedLengthArray = readonly [Type1, Type2, ..., TypeN];

Example:

type ReadonlyFixedLengthArray = readonly [number, string, boolean];

const myReadonlyArray: ReadonlyFixedLengthArray = [10, 'Immutable', false];

const numberValue: number = myReadonlyArray[0];
const stringValue: string = myReadonlyArray[1];
const booleanValue: boolean = myReadonlyArray[2];

// Error: Cannot assign to '0' because it is a read-only property.
// myReadonlyArray[0] = 20; 

// Error: Property 'push' does not exist on type 'readonly [number, string, boolean]'.
// myReadonlyArray.push('new value');

console.log(`Number Value: ${numberValue}`);
console.log(`String Value: ${stringValue}`);
console.log(`Boolean Value: ${booleanValue}`);

Output:

Number Value: 10
String Value: Immutable
Boolean Value: false

Using Class with Fixed-length Properties

In this approach, we define a class with fixed-length properties to create a fixed-length array-like structure. This ensures that the length and type of the elements are strictly controlled through the class properties.

Example: In this example, FixedLengthArray is a class that specifies a fixed-length array with a number, string, and boolean in that order.

class FixedLengthArray {
  constructor(
    public element1: number,
    public element2: string,
    public element3: boolean
  ) {}
}

const exampleArray = new FixedLengthArray(15, "Hello", true);

console.log("Number Value:", exampleArray.element1);
console.log("String Value:", exampleArray.element2);
console.log("Boolean Value:", exampleArray.element3);

Output:

Number Value: 15
String Value: Hello
Boolean Value: true