How to Declare Object Value Type Without Declaring Key Type in TypeScript ?
Last Updated :
23 Jan, 2024
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:
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.
Javascript
type MyRecord = Record<any, string>;
const myObject: MyRecord = {
key1: "value1" ,
key2: "value2" ,
key3: "value3" ,
};
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.
Javascript
type StringIndexedType = {
[key: string]: number;
};
type NumberIndexedType = {
[key: number]: string;
};
const stringIndexedObject: StringIndexedType = {
"key1" : 10,
"key2" : 20,
};
const numberIndexedObject: NumberIndexedType = {
1: "value1" ,
2: "value2" ,
};
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.
Javascript
type MyObject<T> = { [key: string]: T };
const numberObject: MyObject<number> = {
key1: 10,
key2: 20,
key3: 30,
};
const stringObject: MyObject<string> = {
name: "John" ,
city: "New York" ,
country: "USA" ,
};
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.
Javascript
type MyObject = { [key in string]: number };
const myNumericObject: MyObject = {
"age" : 30,
"height" : 180,
"weight" : 75,
};
console.log(myNumericObject[ 'age' ]);
console.log(myNumericObject[ 'height' ]);
console.log(myNumericObject[ 'weight' ]);
|
Output:
30
180
75
Share your thoughts in the comments
Please Login to comment...