How to Declare Object Value Type Without Declaring Key Type in TypeScript ?

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

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

Javascript

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

Javascript

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

Javascript

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