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);
