Tuple Type in TypeScript

A tuple is an array with a fixed structure. Each position can have a specific type.

let student: [string, number] = [
    "Rahul",
    20
];

The first value must be a string and the second value must be a number.

The basic syntax of a tuple is:

let variableName: [type1, type2] = [
    value1,
    value2
];

Each type corresponds to a particular position in the tuple.

A common tuple contains a string followed by a number.

let student: [string, number] = [
    "Amit",
    21
];

console.log(student);

The first element is a string and the second element is a number.

Tuple elements can be accessed using their index.

let student: [string, number] = [
    "Rahul",
    20
];

console.log(student[0]);
console.log(student[1]);

Output:

Rahul
20

Tuple positions are zero-based, just like normal arrays.

let data: [string, number, boolean] = [
    "Rahul",
    20,
    true
];

console.log(data[0]);
console.log(data[1]);
console.log(data[2]);

The positions are:

• Index 0 → string
• Index 1 → number
• Index 2 → boolean

A tuple can contain more than two elements.

let student: [
    string,
    number,
    boolean
] = [

    "Amit",
    22,
    true

];

The tuple has a fixed structure of string, number, and boolean.

The order of types in a tuple is important.

let student: [string, number] = [
    "Rahul",
    20
];

This is correct because the order is:

string → number

Changing the expected order can produce a TypeScript error.

The following tuple does not match the declared type.

// Error

// let student: [string, number] = [
//     20,
//     "Rahul"
// ];

The first position expects a string, but a number was provided.

A tuple can contain a Boolean value.

let user: [
    string,
    boolean
] = [

    "Rahul",
    true

];

console.log(user);

The first element is a string and the second is a Boolean.

A tuple can contain different types in a defined order.

let record: [
    string,
    number,
    boolean
] = [

    "Amit",
    85,
    true

];

This can represent a student's name, marks, and result status.

Tuple elements can be changed if the tuple itself is not readonly. The new value must match the type of that position.

let student: [string, number] = [
    "Rahul",
    20
];

student[1] = 21;

console.log(student);

You cannot assign a value of the wrong type to a tuple position.

let student: [string, number] = [
    "Rahul",
    20
];

// Error
// student[1] = "Twenty";

The second position is defined as a number.

A tuple has a defined structure, and its initial elements follow the declared order and types.

let student: [string, number] = [
    "Amit",
    21
];

console.log(student.length);

Output:

2

You can use destructuring to extract tuple values into separate variables.

let student: [string, number] = [
    "Rahul",
    20
];

let [name, age] = student;

console.log(name);
console.log(age);

The values are assigned according to their tuple positions.

A function can return a tuple.

function getStudent():
[string, number] {

    return [
        "Amit",
        21
    ];

}

let student = getStudent();

console.log(student);

A function can accept a tuple as a parameter.

function displayStudent(
    student: [string, number]
) {

    console.log(student[0]);
    console.log(student[1]);

}

displayStudent([
    "Rahul",
    20
]);

TypeScript supports optional tuple elements using the ? symbol.

let student: [
    string,
    number,
    boolean?
] = [

    "Rahul",
    20

];

The third Boolean element is optional.

The optional element can also be provided.

let student: [
    string,
    number,
    boolean?
] = [

    "Rahul",
    20,
    true

];

The third value is allowed because it is optional.

A tuple can be made readonly when its elements should not be modified through that reference.

let student:
readonly [string, number] = [

    "Rahul",
    20

];

This prevents changing tuple elements through assignments.

TypeScript allows names to be added to tuple elements to make their meaning clearer.

let student: [
    name: string,
    age: number
] = [

    "Amit",
    21

];

The names improve readability while the tuple types remain the same.

A tuple can represent coordinates where the first value is an X position and the second value is a Y position.

let position: [number, number] = [
    100,
    200
];

console.log(position[0]);
console.log(position[1]);

A tuple can represent a small fixed group of related values.

let user: [
    string,
    number,
    boolean
] = [

    "Rahul",
    25,
    true

];

The tuple can represent name, age, and active status.

Tuples can be useful in React when a function or custom hook returns a fixed group of values.

function getUser():
[string, boolean] {

    return [
        "Rahul",
        true
    ];

}

const [name, isActive] =
    getUser();

Tuples can be used in React Native TypeScript projects when a fixed combination of values is needed.

function getScreenInfo():
[string, number] {

    return [
        "Home",
        20
    ];

}

const [screenName, fontSize] =
    getScreenInfo();

Here, the function returns a screen name and a numeric value.

Tuples can represent API data when the response has a fixed position and structure.

let response: [
    number,
    string
] = [

    200,
    "Success"

];

console.log(response[0]);
console.log(response[1]);

The first value represents a status code and the second represents a message.

A tuple can represent a key and its value.

let userEntry: [
    string,
    string
] = [

    "name",
    "Rahul"

];

console.log(userEntry[0]);
console.log(userEntry[1]);

Tuples are useful for small fixed-position structures, while objects are often clearer when each value needs a meaningful property name.

let studentTuple: [
    string,
    number
] = [
    "Rahul",
    20
];

let studentObject = {

    name: "Rahul",
    age: 20

};

For larger data structures, objects and interfaces are often easier to understand.

Mistake 1: Using the wrong type at a position.

let student: [string, number] = [
    "Rahul",
    20
];

// Error
// student[1] = "Twenty";

Mistake 2: Using the wrong order.

// Error
// let student: [string, number] = [
//     20,
//     "Rahul"
// ];

Always follow the declared tuple structure.