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.

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.

// 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:

• https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#readonly-tuples
• https://www.typescriptlang.org/docs/handbook/2/objects.html#readonly-tuple-types