Record is a TypeScript utility class that is available out of the box after version 2.1

Record the Keys and Type >

Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to Map the properties of a type to another type. “– TypeScript’s documentation

Construct an object Type, with Keys representing the object’s attribute key and Type representing the object’s attribute value, used to map attributes of one Type to another

On the surface, Record creates an object with a property of Type Keys and a corresponding value of Type Type. A similar feature is to use index signatures, so why use the Record type? What’s the difference?

Record type Vs index signature

In TypeScript, the way we access objects with square brackets is called index signing. It is widely used for object types with unknown string keys and specific values. Here’s an example:

type studentScore = { [ name:string] :number }
Copy the code

The index signature example above can also be represented using the Record type

type studentScore = Record<string, name>
Copy the code

For this use case, from a type assertion point of view, both types of declarations are the same. From a syntactic point of view, index signatures are better because the key expression for name expresses its intent more clearly and is more intelligently aware in vscode’s presentation.

So why use the Record type?

Why is the Record type useful?

The advantage of the Record type is that it is concise. When we want to restrict properties, this is where the Record type comes in. The following example is where we use union strings in Record to restrict property keys

type roles = 'tester' | 'developer' | 'manager'
const staffCount: Record<roles, number> = {
  tester: 10.developer: 20.manager: 1
}
Copy the code

In the example, we define a type using a joint type constraint. The VS Code compiler prompts us if we try to access an attribute that is not in the union type. This is useful when we are maintaining a complex type because the compiler prevents such errors from happening.

Another useful feature is that keys can be enumerations. In the example below, we use the staffTypes enumeration as the limiting value for the Record type, so it is more readable. Note that enumerations are supported only after TypeScript2.9. Therefore, prior to version 2.9, the type of key was limited to string

Record and keyof

By using keyof to take all attributes from an existing type and combine them with a string, we can do the following:

interface Staff {
  name:string.salary:number,}type StaffJson = Record<keyof Staff, string>

  const product: StaffJson = {
    name: 'John'.salary:'3000'
  }
Copy the code

This is handy when you want to keep attributes of an existing type but convert value types to other types.

Advanced usage

The Record type can be used with other tool types to achieve more advanced usage.

type seniorRole = 'manager'
type technicalRole = 'developer'
const benefits: Partial<Record<seniorRole, 'Free Parking'> & Record<technicalRole, 'Free Coffee'> > = {}; benefits.manager ='Free Parking';
benefits.developer = 'Free Parking';//ERROR: no free parking for dev
Copy the code

Working with the Record, Partial, and Intersection types, this code creates a strongly typed benefits object and establishes associations between key and value types. Strongly typed objects make it easier to catch errors at compile time, make it easier for the IDE to flag errors as you type, and provide intelligent hints with auto-complete functionality

conclusion

Record is a useful and concise tool type that can make your code more robust. If you have any other ideas on how best to use it, please share them with me and your fellow developers in the comments section.

【 original address 】