TypeScript Tuple Type

Typescript tuple type can store the set of values of different data type. TypeScript tuple type is like an array where type of certain elements is known. You can access the tuple values using index as well. To declare the tuple, use square bracket[] and pass the comma separated multiple types.

Syntax : [dt1, dt2….., dtn]

Example :

  

        let userId = 1;
        let userName = "Praveen";
        // Declare a tuple type
        let user : [number, string]; // valid
        //user = ["Praveen", 1]; // invalid
        // Initialize it
        user=[1,"Praveen"]

        // create using variables
        let user1 =[userId,userName]

        // create using default value
        let user2 =[2,'PK']
    

What's special about tuples?

When you declare the type as a [number, string] tuple, you are limiting this array to store only the number/string format.

  Order is important in tuple. Data needs to be assigned as per declared.

Create or Initialize a Tuple

  

        let userId = 1;
        let userName = "Praveen";
        // Declare a tuple type
        let user : [number, string]; // valid
        //user = ["Praveen", 1]; // invalid
        // Initialize it
        user=[1,"Praveen"]

        // create using variables
        let user1 =[userId,userName]

        // create using default value
        let user2 =[2,'PK']

    

Accessing tuple elements

  

        //Accessing elements in a tuple
        console.log(user[0])  // 1
        console.log(user[1])  // Praveen

        console.log(user1[0])  // 1
        console.log(user1[1])  // Praveen

        console.log(user2[0])  // 1
        console.log(user2[1])  // PK
    

Add Elements into Tuple

  

        let user3 : [number, string] =[3,'John']; // valid
        user3.push(4,'Mike');
        console.log(user3); //[ 3, 'John', 4, 'Mike' ]

        let users :[number, string][];
        users =[[1,'John'],[2,'Mike'],[3,'Rechal'],[4,'Daniel']]
        console.log(users);         // [ 1, 'John' ], [ 2, 'Mike' ], [ 3, 'Rechal' ], [ 4, 'Daniel' ] ]
        console.log(users[0]);      //[ 1, 'John' ]
        console.log(users[3]);      //[ 4, 'Daniel' ]
    

Read-Only Tuple Types in TypeScript

You can also create the read-only tuple using read-only typescript keyword

  

        const point: readonly [number, number] = [0, 0];
        point[0] = 1;        // Type error
        point.push(0);       // Type error
        point.pop();         // Type error
        point.splice(1, 1);  // Type error