Record<K, T>

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

If you already have a subscription, you can sign in.

Professional TypeScript Masterclass Lessons

1.Introduction
free
⏱️ 1:54
2.Setup
free
⏱️ 5:44
3.Primitive Types
free
⏱️ 1:42
4.Instance Types
free
⏱️ 1:52
5.Arrays And Tuples
free
⏱️ 1:38
6.Objects
free
⏱️ 1:33
7.const declarations
free
⏱️ 1:03
8.Function Types
free
⏱️ 1:57
9.Structural Typing
free
⏱️ 2:10
10.Classes in TypeScript
free
⏱️ 1:48
11.Target Compiler Option
free
⏱️ 2:37
12.Generics
⏱️ 3:02
13.Special Types any And unknown
⏱️ 2:00
14.JavaScript to TypeScript
⏱️ 1:32
15.Frontend Projects
⏱️ 3:49
16.Type Assertions
⏱️ 2:15
17.Type Casting
⏱️ 1:16
18.Modules
⏱️ 1:55
19.Type Declarations
⏱️ 4:25
20.Creating NPM packages
⏱️ 3:20
21.Async Await
⏱️ 3:05
22.Running in NodeJS
⏱️ 1:40
23.Lexical this
⏱️ 2:34
24.readonly Modifier
⏱️ 1:59
25.Union Types
⏱️ 2:57
26.Literal Types
⏱️ 2:58
27.Type Narrowing
⏱️ 4:19
28.Discriminated Unions
⏱️ 3:29
29.Class Parameter Properties
⏱️ 1:02
30.Strict Compiler Option
⏱️ 6:18
31.null vs undefined
⏱️ 4:19
32.Intersection Types
⏱️ 2:03
33.Optional Modifier
⏱️ 2:47
34.Non Null Assertion Operator
⏱️ 3:40
35.Interfaces
⏱️ 2:28
36.Interface Declaration Merging
⏱️ 1:01
37.Types vs Interfaces
⏱️ 2:16
38.never Type
⏱️ 3:00
39.implements Keyword
⏱️ 1:25
40.Definite Assignment Assertion
⏱️ 2:31
41.User Defined Type Guards
⏱️ 2:02
42.Assertion Functions
⏱️ 3:42
43.Function Overloading
⏱️ 4:15
44.Call Signatures
⏱️ 2:53
45.Abstract Classes
⏱️ 1:53
46.Index Signatures
⏱️ 3:08
47.Readonly Arrays and Tuples
⏱️ 2:58
48.Double Assertions
⏱️ 2:20
49.const Assertions
⏱️ 3:55
50.this Parameter
⏱️ 2:33
51.Generic Constraints
⏱️ 2:43
52.typeof Type Operator
⏱️ 2:12
53.Lookup Types
⏱️ 3:12
54.keyof Type Operator
⏱️ 3:55
55.Conditional Types
⏱️ 4:39
56.Contitional Types with Unions and never
⏱️ 3:32
57.infer Keyword and `ReturnType<T>`
⏱️ 3:47
58.Mapped Types
⏱️ 2:48
59.Mapped Type Modifiers
⏱️ 3:37
60.Template Literal Type
⏱️ 4:28
61.Partial<T>
⏱️ 1:27
62.Required<T>
⏱️ 1:36
63.Readonly<T>
⏱️ 1:34
64.Record<K, T>
⏱️ 4:05
65.Project References
⏱️ 4:18
66.undefined vs. optional
⏱️ 2:48
67.satisfies Operator
⏱️ 2:42
68.PropertyKey Type
⏱️ 0:57
69.ThisType<T>
⏱️ 4:11
70.Awaited<T>
⏱️ 4:12
71.String Manipulation Types
⏱️ 3:36
72.Mapped Types as Clauses
⏱️ 4:01
73.Union vs Intersection Mental Model
⏱️ 3:36
74.Enums are Bad
⏱️ 8:11

Record<K, T>

Subscription Required

You must have an active subscription to access this content.
If you already have a subscription, you can sign in.

Record Builtin Type Function

Record is useful for creating types where the fields are all of the same type e.g. all members are number:

// Same as `{x: number, y: number}`
type Point = Record<'x' | 'y', number>;

Example Use Case

For example a record of all the pages in a web application. The following is verbose:

type PageInfo = {
id: string,
title: string,
};

type Pages = {
home: PageInfo,
services: PageInfo,
about: PageInfo,
contact: PageInfo,
};

With a Record you can do the same more concisely:

type Pages = Record<
'home' | 'services' | 'about' | 'contact',
{ id: string, title: string }
>;
javascript
typescript
react
playwright

Enjoy free content straight from your inbox 💌

No spam, unsubscribe at any time.

Transcript

00:00

A record is defined as a data structure that stores a related set of properties. A common example of that would be something like a table within a relational database. Now in JavaScript, it is common to store records as key value pairs within JavaScript objects, and TypeScript provides a utility type to annotate such objects intuitively called record. So let's take a look Here. We are using the built-in utility type called record to create an object such that given a string key, it'll give us a value object that has a member name of type string and role of type string.

00:33

We can create an object of type persons and then use it to store some people. For example, we are storing two people over here, one named John of role admin and one named Jane of role owner. Now, the value type is something that will be enforced whenever we try to store a new person. For example, if you try to store an object that does not contain the name property, we'll get an error from the type strip compiler. Now, even though this demonstrates some of the usefulness of the record utility, this is not something that you couldn't easily achieve with the existing index signatures feature of TypeScript. However, even in this particular case,

01:07

I find the record utility to be a bit more easier to read, however it provides additional features as well. So let's take a look. In addition to using primitive types such as string and number, you can use a union of literal types as well as keys for your record utility. For example, we can create a record called people with roles such that it only allows the two roles, which are admin and owner as the keys and the values of string arrays. An obvious example would be something like this object that contains the two keys and arrays containing the different users. Now, when we use a limited set of literals as keys

01:42

for the record, utility type TypeScript will also enforce that all of those keys are provided when we create the object and raise an error. If you forget some of them, enforcing this constraint means that we can access any of the records literals without having to worry about them being possibly undefined. This also means that we can use the record utility as a shorthand for creating some simple objects. For example, hey, we've defined the point at a type as something that can contains two members, X and Y, both of type number. And we can see that when we hover over this particular type.

02:15

And honestly in this particular case, I would much rather type the verbose version instead of using the record utility. But let's look at a use case where this is actually useful. We have a type called page in four that has two members id of type string and title of type string. And then we have a number of pages within our project. Now, a verbal way of defining those pages is to repeat the page info annotation for all of the pages that exist. That is home services about and contact. This is an excellent use case for using the record digital. Instead of having to define the page info annotation again

02:49

and again, we can simply specify that people have the keys home services about and contact, and they will all have the same type. And because we don't have to keep annotating Page info again and again, we can even not create that type and declare that in line as the value for the different records as well. So in this particular case, using the record utility saves us from having to create the page info type and then having to repeat ourself by using the same annotation again and again. Now finally, if you are interested in the internals of this record utility, it is nothing more than a maps type wrapper.

03:22

It takes a set of keys that must be valid indexes, takes a value type T, and then loops over all of the keys in K using a map type and maps them to the value T. That said, you don't need to look at the internals of the record type in order to use it effectively as long as you remember the key use cases that we have demonstrated in this lesson. And that's all for this lesson. Smash the like and subscribe for more quick recording tips like this. And if you're interested more in learning about map types, I have a lesson dedicated to that over here. Thanks for joining me and I will see you in the next one.

Professional TypeScript Masterclass

Professional TypeScript Masterclass

1.Introduction
free
⏱️ 1:54
2.Setup
free
⏱️ 5:44
3.Primitive Types
free
⏱️ 1:42
4.Instance Types
free
⏱️ 1:52
5.Arrays And Tuples
free
⏱️ 1:38
6.Objects
free
⏱️ 1:33
7.const declarations
free
⏱️ 1:03
8.Function Types
free
⏱️ 1:57
9.Structural Typing
free
⏱️ 2:10
10.Classes in TypeScript
free
⏱️ 1:48
11.Target Compiler Option
free
⏱️ 2:37
12.Generics
⏱️ 3:02
13.Special Types any And unknown
⏱️ 2:00
14.JavaScript to TypeScript
⏱️ 1:32
15.Frontend Projects
⏱️ 3:49
16.Type Assertions
⏱️ 2:15
17.Type Casting
⏱️ 1:16
18.Modules
⏱️ 1:55
19.Type Declarations
⏱️ 4:25
20.Creating NPM packages
⏱️ 3:20
21.Async Await
⏱️ 3:05
22.Running in NodeJS
⏱️ 1:40
23.Lexical this
⏱️ 2:34
24.readonly Modifier
⏱️ 1:59
25.Union Types
⏱️ 2:57
26.Literal Types
⏱️ 2:58
27.Type Narrowing
⏱️ 4:19
28.Discriminated Unions
⏱️ 3:29
29.Class Parameter Properties
⏱️ 1:02
30.Strict Compiler Option
⏱️ 6:18
31.null vs undefined
⏱️ 4:19
32.Intersection Types
⏱️ 2:03
33.Optional Modifier
⏱️ 2:47
34.Non Null Assertion Operator
⏱️ 3:40
35.Interfaces
⏱️ 2:28
36.Interface Declaration Merging
⏱️ 1:01
37.Types vs Interfaces
⏱️ 2:16
38.never Type
⏱️ 3:00
39.implements Keyword
⏱️ 1:25
40.Definite Assignment Assertion
⏱️ 2:31
41.User Defined Type Guards
⏱️ 2:02
42.Assertion Functions
⏱️ 3:42
43.Function Overloading
⏱️ 4:15
44.Call Signatures
⏱️ 2:53
45.Abstract Classes
⏱️ 1:53
46.Index Signatures
⏱️ 3:08
47.Readonly Arrays and Tuples
⏱️ 2:58
48.Double Assertions
⏱️ 2:20
49.const Assertions
⏱️ 3:55
50.this Parameter
⏱️ 2:33
51.Generic Constraints
⏱️ 2:43
52.typeof Type Operator
⏱️ 2:12
53.Lookup Types
⏱️ 3:12
54.keyof Type Operator
⏱️ 3:55
55.Conditional Types
⏱️ 4:39
56.Contitional Types with Unions and never
⏱️ 3:32
57.infer Keyword and `ReturnType<T>`
⏱️ 3:47
58.Mapped Types
⏱️ 2:48
59.Mapped Type Modifiers
⏱️ 3:37
60.Template Literal Type
⏱️ 4:28
61.Partial<T>
⏱️ 1:27
62.Required<T>
⏱️ 1:36
63.Readonly<T>
⏱️ 1:34
64.Record<K, T>
⏱️ 4:05
65.Project References
⏱️ 4:18
66.undefined vs. optional
⏱️ 2:48
67.satisfies Operator
⏱️ 2:42
68.PropertyKey Type
⏱️ 0:57
69.ThisType<T>
⏱️ 4:11
70.Awaited<T>
⏱️ 4:12
71.String Manipulation Types
⏱️ 3:36
72.Mapped Types as Clauses
⏱️ 4:01
73.Union vs Intersection Mental Model
⏱️ 3:36
74.Enums are Bad
⏱️ 8:11