paint-brush
How Records Can Help You Implement Complex Data in Typescript by@smpnjn
401 reads
401 reads

How Records Can Help You Implement Complex Data in Typescript

by Johnny Simpson
Johnny Simpson HackerNoon profile picture

Johnny Simpson

@smpnjn

Product, Engineering, Web

July 16th, 2022
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

A Record is a utility type especially defined by TypeScript to help with a certain problem. Record types enforce key values, and allow you to create custom interfaces for the values. They are a great way to ensure consistency when trying to implement more complex types of data. A Record takes the form `Record<K, T` where`K` is the type of the key, and `T` is the type the values the key is allowed to be. In this case, we can define a type for User and a union type for our key.
featured image - How Records Can Help You Implement Complex Data in Typescript
1x
Read by Dr. One voice-avatar

Listen to this story

Johnny Simpson HackerNoon profile picture
Johnny Simpson

Johnny Simpson

@smpnjn

Product, Engineering, Web

About @smpnjn
LEARN MORE ABOUT @SMPNJN'S
EXPERTISE AND PLACE ON THE INTERNET.


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 firstName and 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 Record<K, T>, where K is the type of the key, and T is the type of the values.


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.

L O A D I N G
. . . comments & more!

About Author

Johnny Simpson HackerNoon profile picture
Johnny Simpson@smpnjn
Product, Engineering, Web

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Codytechs
Hashnode
Learnrepo
Unni
Hashnode
Learnrepo
X REMOVE AD