TypeScript Object readonly Tuple Types

In this article, we will learn about Object readonly Tuple Types in Typescript. In TypeScript, an object with read-only tuple types is a type that represents an object with properties where each property has a specific value and the order of properties is fixed, just like a tuple. However, unlike regular tuples, you can also specify that the object is read-only, meaning that once the values are set, they cannot be modified.

Syntax

type ReadOnlyTupleObject = readonly [key1: Type1, key2: Type2, ...];

Parameters

ReadOnlyTupleObject: The name of the type that represents the read-only tuple object.
readonly: This keyword specifies that the object is read-only, meaning its properties cannot be modified once they are set.
[key1: Type1, key2: Type2, …]: Inside the square brackets, you define the properties of the object as a tuple. Each property is specified with a key (property name) and its associated type.

Example 1: In this example, We define a GFG type as a read-only tuple with two elements, both of type string. We create a variable, student, and assign them values that match the type GFG. When we attempt to modify student[0], TypeScript raises an error because the GFG type is read-only. student cannot be modified once its value is set.

Javascript

type GFG = readonly [string, string]; 

const student: GFG = ['Akshit',  

                      'Geeks Premier League 2023']; 
console.log(student) 

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

Output:

If we uncomment student[0]=’Aman’ from the above example, we will get the following error. When we attempt to modify student[0], TypeScript raises an error because the GFG type is read-only. student cannot be modified once their values are set.

Example 2: In this example, we will see that array literals with const assertions will be inferred with readonly tuple types. We have defined two arrays, colors, and coordinates, and a function called displayColorAndCoordinates that accepts two parameters: color and coord. The types of these parameters are inferred based on the read-only tuple types, ensuring that you can only pass valid values from the respective arrays. When we call displayColorAndCoordinates(colors[0], coordinates[1]), we pass values from the read-only tuple types as arguments. TypeScript ensures type safety and only valid values from the arrays can be passed to the function. When we try to modify these inferred read-only tuple types (e.g., colors[0] = ‘yellow’ or coordinates.push(40)), TypeScript raises errors, indicating that these properties are read-only and cannot be modified.

Javascript

// Using array literals with const assertion  
// to infer read-only tuple types 

const colors = ['red', 'green', 'blue'] as const; 
const coordinates = [10, 20, 30] as const; 

  
// Function that accepts the inferred 
// read-only tuple types 

function displayColorAndCoordinates( 

    color: typeof colors[number], 

    coord: typeof coordinates[number] 
) { 

    console.log(`Color: ${color}`); 

    console.log(`Coordinates: ${coord}`); 
} 

  
// Call the function with values 
// from the read-only tuple types 
displayColorAndCoordinates(colors[0], coordinates[1]); 

  
// Try to modify the inferred read-only tuple types 
// Error: Cannot assign to '0' because 
// it is a read-only property. 
// colors[0] = 'yellow';  

  
// Error: Property 'push' does not  
// exist on type 'readonly [10, 20, 30]'. 
// coordinates.push(40);

Output:

Reference:

Article Tags :

Geeks Premier League

JavaScript

TypeScript

Web Technologies

Geeks Premier League 2023