We will create an object value type without declaring the key type. We can not directly define the type of value we will use different methods for declaring the object value type.
These are the following methods for declaring the object value type:
Table of Content
Approach 1: Using Record Utility Type
The Record utility type is used to define an object type in TypeScript with specific keys and a common value type. It allows you to create a type that represents an object with known keys and a shared type for all values.
Syntax:
type MyObject = Record<string, ValueType>;
Example: This example shows the declaration of the object value type without declaring the key type by the use of the record utility type.
// Define a type using Record<unknown, ValueType> type MyRecord = Record<any, string>; // Create an object that conforms to the defined type const myObject: MyRecord = { key1: "value1" ,
key2: "value2" ,
key3: "value3" ,
}; // Access and use the object console.log(myObject[ 'key1' ]);
console.log(myObject[ 'key2' ]);
|
Output:
value1
value2
Approach 2: Using Mapped Types
By changing existing types, mapped types make it possible to create new ones. We can create a type with certain value types while keeping the keys accessible by utilizing mapped types.
Syntax:
type MyObject = { [key: string]: ValueType };
Example: This example shows the declaration of the object value type without declaring the key type by the use of the mapped type.
// Approach 2: Leveraging Mapped Types in JavaScript // Indexed type with string keys type StringIndexedType = { // Value type for string keys
[key: string]: number;
}; // Indexed type with number keys type NumberIndexedType = { // Value type for number keys
[key: number]: string;
}; // Example usage const stringIndexedObject: StringIndexedType = { "key1" : 10,
"key2" : 20,
}; const numberIndexedObject: NumberIndexedType = { 1: "value1" ,
2: "value2" ,
}; // Output using console.log console.log(stringIndexedObject[ "key1" ]);
console.log(numberIndexedObject[1]); |
Output:
10
value1
Approach 3: Using Generics
Generics provide a flexible way to write functions and classes by allowing types to be specified later. We can use generics to define the value type while keeping the key type generic.
Syntax:
type MyObject<T> = { [key: string]: T };
Example: This example shows the declaration of the object value type without declaring the key type by the use of the Generics.
// Approach 3: Employing Generics in JavaScript type MyObject<T> = { [key: string]: T }; // Create an object of type // MyObject with number values const numberObject: MyObject<number> = { key1: 10,
key2: 20,
key3: 30,
}; // Create an object of type // MyObject with string values const stringObject: MyObject<string> = { name: "John" ,
city: "New York" ,
country: "USA" ,
}; // Access and use the objects console.log(numberObject[ 'key2' ]);
console.log(stringObject[ 'city' ]);
|
Output:
20
New York
Approach 4: By utilizing Indexed Types
TypeScript’s indexed types allow us to create object types based on existing types. By leveraging indexed types, we can declare object value types without explicitly mentioning key types.
Syntax:
type MyObject = { [key in string]: ValueType };
Example: This example shows the declaration of the object value type without declaring the key type by the use of the Indexed type.
// Approach 4: Utilizing Indexed Types in JavaScript // Utilizing Indexed Types type MyObject = { [key in string]: number };
// Create an object of type MyObject const myNumericObject: MyObject = { "age" : 30,
"height" : 180,
"weight" : 75,
}; // Access and use the object console.log(myNumericObject[ 'age' ]);
console.log(myNumericObject[ 'height' ]);
console.log(myNumericObject[ 'weight' ]);
|
Output:
30
180
75