Typescript Record<Keys, Type> Utility Type

In this article, we are going to learn about the Record<Keys, Type> in Typescript. TypeScript is a programming language that is a strict syntactical superset of JavaScript. It adds optional static typing and class-based object-oriented programming to JavaScript, one of the features is Record<Keys, Type> which is a built-in utility type that is used to define an object type whose keys are in Keys and values manner. Let’s say there could be a scenario where we need to define an object with some fixed set of keys and their corresponding values, where both the keys and the values have specific types. This utility type is often used to define dictionaries or maps in TypeScript. Suppose we want to define an object that represents a dictionary or a map of colours, where the keys are colour names and the values are their corresponding hexadecimal values. We can use the Record<Keys, Type> utility type to define this object type, Like this:

type ColorMap = Record<string, string>;

Syntax:

type MyDictionary = Record<Keys, Type>;

Where –

• Keys: represent the type of keys in the dictionary, 
• Type:  represent the type of the values.

Approach: Suppose that we have to make a colour map by using the Record<Type, Keys> here is the step-by-step approach to how we will do it.

1. First of all define the type of the keys and values for the colour map,  for example, we will use the strings to represent the colour names and also use the string to represent the hexadecimal colour codes.

type ColorName = string;
type HexCode = string;

2. Use Record<Keys, Type> to create a new type representing a colour map.

type ColorMap = Record<ColorName, HexCode>;

3. Create a new object representing the colour map

const colors: ColorMap = {
    "red": "#FF0000",
     "green": "#00FF00",
     "blue": "#0000FF"
};

4. Use the keys of the colour map object to retrieve specific colour values.

const redHexCode = colors["red"]; // "#FF0000"

Example 1: In this example, we define a Student type with two properties, name and age. We then define a StudentsDictionary type using Record<string, Student>, which means that the keys in the dictionary are of string type and the values are of the Student type, after then create a students object of type StudentsDictionary and initialize it with two Student objects. Finally, we use console.log() to output the values of the students object by accessing them using their keys.

Javascript

// Define a type for a student object
// with a name and age property
type Student = {
    name: string;
    age: number;
};

// Define a type for a dictionary of
// students, where the keys are strings
// and the values are Student objects
type StudentsDictionary = Record<string, Student>;

// Define an object of students using
// the StudentsDictionary type
const students: StudentsDictionary = {
    "John": { name: "John", age: 20 },
    "Jane": { name: "Jane", age: 22 },
};

// Log the John and Jane student objects
// from the students dictionary
console.log(students["John"]);
console.log(students["Jane"]);

Output:

Example 2: In this example, first of all, we have defined a Fruit type with three string literal values: “apple”, “banana”, and “orange” as we can see in the code snippet below, after that we will define a FruitDictionary type using the Record<Fruit, number>, which means that the keys in the dictionary are of the Fruit type and values of the number type, after that, we have created an object called fruitCounts which is of FruitDictionary type, and we have initialized it with some number of each fruit that is available in the collection.

Javascript

// Define a union type called Fruit that
// can only be assigned one of the three
// fruit strings.
type Fruit = "apple" | "banana" | "orange";

// Define a dictionary type called
// FruitDictionary that maps each
// fruit string to a number value.
type FruitDictionary = Record<Fruit, number>;

// Create a new object called fruitCounts,
// which is an instance of FruitDictionary type
const fruitCounts: FruitDictionary = {
    apple: 5,
    banana: 3,
    orange: 2,
};

// Loop through each key in the fruitCounts
// object and log the corresponding value to
// the console.
for (const key in fruitCounts) {
    console.log(fruitCounts[key]);
}

Output:

Conclusion: In conclusion, we have seen that we have defined what is Record<Keys, Type> with its syntax, and In both examples, we define a type using Record<Keys, Type> and then create an object of that type with a set of key-value pairs, The Record<Keys, Type> utility type is a useful tool for defining dictionaries or maps in TypeScript, and it can be used in a wide range of applications.