Shulou(Shulou.com)06/01 Report--

This article will explain in detail how TypeScript uses Record. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Using Record

Record is an advanced type of TypeScript, but there is not much documentation, so it is often ignored, but it is a very powerful advanced type.

Record allows you to create new types from the Union type, and the values in the Union type are used as properties of the new type.

To take a simple example, for example, if we want to implement a simple car brand age table, there seems to be no problem with writing it.

Type Car = 'Audi' |' BMW' | 'MercedesBenz'const cars = {Audi: {age: 119}, BMW: {age: 113}, MercedesBenz: {age: 133},}

Although there is no problem with this way of writing, have you ever considered the issue of type safety?

For example:

We forgot to write a car brand. Will he make a mistake?

We misspelled the attribute name, will it report an error?

If we add a brand other than the three brands mentioned above, will he make a mistake?

We have changed the name of one of the brands. Will he be reminded of the mistake?

None of the above can be written, which requires the help of Record.

Type Car = 'Audi' |' BMW' | 'MercedesBenz'type CarList = Recordconst cars: CarList = {Audi: {age: 119}, BMW: {age: 113}, MercedesBenz: {age: 133},}

When we misspell:

When we lose one brand:

When we add a non-agreed brand to it:

Use Record as much as possible in practical projects, it will help you avoid a lot of mistakes, in vue or react there are many scenarios where Record is the better solution.

This is the end of the article on "how TypeScript uses Record". I hope the above content can be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.