TypeScript Records are a great way to ensure consistency when trying to implement more complex types of data. They enforce key values and allow you to create custom interfaces for the values. That sounds confusing, but let's see how it works in practice. Utility Types A Record is a utility type - that means it is a type especially defined by TypeScript to help with a certain problem. How Typescript Record Types Work Suppose you have a data set like this: const myData = {
    "123-123-123" : { firstName: "John", lastName: "Doe" },
    "124-124-124" : { firstName: "Sarah", lastName: "Doe" },
    "125-125-125" : { firstName: "Jane", lastName: "Smith" }
} Our data set has an ID for its key, which is of type string. All of the values have the same format - that is, they have a and . firstName lastName For this data structure, a Record is the best utility type to use. We can define our data structure type as follows: type User = {
    firstName: string,
    lastName: string
}

const myData:Record<string, User> = {
    "123-123-123" : { firstName: "John", lastName: "Doe" },
    "124-124-124" : { firstName: "Sarah", lastName: "Doe" },
    "125-125-125" : { firstName: "Jane", lastName: "Smith" }
} A Record takes the form , where is the type of the key, and is the type of the values. Record<K, T> K T Above, we defined a new type User for our values and set our keys to type string. Record Types and Union Types Sometimes, we can have an object with a predefined set of possible keys. This is particularly true when calling from an API. For example: const myData = {
    "uk" : { firstName: "John", lastName: "Doe" },
    "france" : { firstName: "Sarah", lastName: "Doe" },
    "india" : { firstName: "Jane", lastName: "Smith" }
} Let's presume that for our data set above, the key can only be three values: uk, france or india. In this case, we can define a type for User and a union type for our key: type User = {
    firstName: string,
    lastName: string
}
type Country = "uk" | "france" | "india";

const myData:Record<Country, User> = {
    "uk" : { firstName: "John", lastName: "Doe" },
    "france" : { firstName: "Sarah", lastName: "Doe" },
    "india" : { firstName: "Jane", lastName: "Smith" }
} Using this method, we can enforce strict rules about the values the key is allowed to be, along with the type our values should conform to. Also published . here

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How Records Can Help You Implement Complex Data in Typescript 

How Records Can Help You Implement Complex Data in Typescript

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How Records Can Help You Implement Complex Data in Typescript

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES