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' , 'Beginner 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:
- 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
Contact Us