Typescript

What is TypeScript Record Utility Type? How to Use It?

TypeScript has a variety of predefined utility types that make it easier to work with complex types. The “Record” utility type is one of them. It can be useful when you want to define an object type with specific keys and values, but you don’t know the exact keys and values ahead of time. It functions/works effectively as a dictionary, mapping keys to values. Developers can make type-safe dictionaries with “Record” and mappings between different types and string literals.

This post will define the “Record” utility type in TypeScript.

What is TypeScript Record Utility Type?

The “Record” utility type in TypeScript can be used to create an organized dictionary. It can create a new type using the available keys and values types. The Record type accepts two “type” parameters: the key’s type and the value’s type.

Syntax

The following syntax is utilized for the TypeScript “Record” utility type:

Record<keyType, valueType>

Example

Create a TypeScript file “record.ts” and add a Typescript code to create a simple dictionary named “colorCodes” using the “Record” utility type where the keys and values are of the “string” type:

let colorCodes: Record<string, string> = {
 "red": "#FF0000",
 "blue": "#0000FF",
 "green": "#008000",
};

Print the dictionary on the console using the “console.log()” method:

console.log(colorCodes);

Now, transpile the Typescript file using the “tsc” command:

tsc record.ts

Then, execute the JavaScript file utilizing the below command:

node record.js

Output

Note: After updating the TypeScript file, it is mandatory to transpile it and then execute it using the above commands.

How to Use TypeScript Record Utility Type?

There are two ways to utilize the TypeScript “Record” utility type:

  • The Union of string literals
  • Using an object

Method 1: Use TypeScript Record Utility Type With the Union of String Literals

You can use the “Record” utility type with the union of string literals. In this approach, you have to define a type that will be used as a key in a Record utility type.

Example

First, we will define a “Color” type that is a union of four string literals:

type Color = 'Red' | 'Blue' | 'Green' | 'Black';

Then, we will use the “Record” utility type to define a “colorCodes” type which represents an object with keys of type Color and values of type string:

const colorCodes: Record<Color, string> = {
 Red: "#FF0000",
 Blue: "#0000FF",
 Green: "#008000",
 Black: "#000000"
}

Finally, print the dictionary on the console:

console.log(colorCodes);

Output

Method 2: Use TypeScript Record Utility Type Using an Object

Another way is to use the Object in a Record type as the type of a value. Define an object and pass it in a “Record” utility type as a second argument “valueType”.

Example

Here, first, we will define an object named “Info” that contains three properties of different types:

type Info = {
 id: number;
 name: string;
 code: string;
};

Declare a dictionary using the “Record” utility type and pass the type “number” as a Key and an object “number” as a valueType:

type colorCode = Record<number, Info>;

Assign the keys and values to the dictionary according to their specified types:

const colors: colorCode = {
 1: {
  id: 5,
  name: "Black",
  code: "#000000"
 },
 2: {
  id: 7,
  name: "Blue",
  code: "0000FF"
 }
};

Lastly, print the colors dictionary on the console:

console.log(colors);

Output

That’s all about the TypeScript “Record” utility type.

Conclusion

The “Record” utility type is a predefined utility type in TypeScript that is used to create an organized dictionary. To use the “Record” utility type there are two ways including “the union of string literals” and “using an object”. This post explained the “Record” utility type in TypeScript.

About the author

Farah Batool

I completed my master's degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.