{"id":7227,"date":"2019-06-16T10:27:51","date_gmt":"2019-06-16T10:27:51","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7227"},"modified":"2019-06-16T10:27:51","modified_gmt":"2019-06-16T10:27:51","slug":"typescript-utility-types","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/typescript-utility-types\/","title":{"rendered":"TypeScript utility types"},"content":{"rendered":"

Whilst looking into the NonNullable<> type I noticed there’s a bunch of utility types<\/a>. These types are used to construct other types.<\/p>\n

I’m having trouble at this time understanding the use cases for some of these types, so will solely cover those that I can see use cases for.<\/p>\n

Starting point<\/strong><\/p>\n

Let’s create a simple interface which we’ll start off with<\/p>\n

\r\ninterface Person {\r\n    name: string;\r\n    age: number;\r\n}\r\n<\/pre>\n
Partial<T><\/strong><\/p>\n
Use case<\/em><\/p>\n
We might have a type T with one or more mandatory fields, Partial<T> takes a type T and produces a new type where all fields are optional, so using<\/p>\n
\r\ntype PartialPerson = Partial<Person>;\r\n<\/pre>\n
will create<\/p>\n
\r\ninterface PartialPerson {\r\n    name?: string;\r\n    age?: number;\r\n}\r\n<\/pre>\n
Required<T><\/strong><\/p>\n
Use case<\/em><\/p>\n
The opposite to Partial<T> we may have a type with one or more optional fields and we want to produce a type with mandatory fields, so using<\/p>\n
\r\ninterface PartialPerson {\r\n    name?: string;\r\n    age?: number;\r\n}\r\n\r\ntype RequiredPerson = Required<PartialPerson>\r\n<\/pre>\n
will create<\/p>\n
\r\ninterface RequiredPerson {\r\n    name: string;\r\n    age: number;\r\n}\r\n<\/pre>\n
Readonly<T><\/strong><\/p>\n
Use case<\/em><\/p>\n
In some cases we might have a type T and wish to generate a new type where all those fields are marked as readonly, so using<\/p>\n
\r\ntype ReadonlyPerson = Readonly<Person>;\r\n<\/pre>\n
will create<\/p>\n
\r\ninterface ReadonlyPerson {\r\n    readonly name: string;\r\n    readonly age: number;\r\n}\r\n<\/pre>\n
Record<K, T><\/strong><\/p>\n
Use case<\/em><\/p>\n
We might wish to generate a new type with fields of type T.<\/p>\n
The Record<K, T> takes two types and produces a new type per value passed into the type parameter K of type parameter T, so for example<\/p>\n
\r\ntype RecordPerson = Record<'mother' | 'father', Person>;\r\n<\/pre>\n
will create<\/p>\n
\r\ninterface RecordPerson {\r\n    mother: Person;\r\n    father: Person;\r\n}\r\n<\/pre>\n
Pick<T, K><\/strong><\/p>\n
Use case<\/em><\/p>\n
We might have a type T and wish to generate a new type made up of just selected fields.<\/p>\n
The Pick<T, K> takes a type T and keys, K, as a union from T. The new type will then be made up of the fields declared in K, for example<\/p>\n
\r\ntype PickPerson = Pick<Person, 'name'>\r\n<\/pre>\n
will create<\/p>\n
\r\ninterface PickPerson {\r\n    name: string;\r\n}\r\n<\/pre>\n
ReturnType<T><\/strong><\/p>\n
Use case<\/em><\/p>\n
Useful in situations where we have a function and we want to get the type being returned by the function.<\/p>\n
The ReturnType takes a type function T and returns the return type from the function, so let’s create the following code<\/p>\n
\r\nfunction getPerson() : Person {\r\n    return { name: "Scooby", age: 12 }\r\n}\r\n\r\ntype ReturnsPerson = ReturnType<typeof getPerson>;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Whilst looking into the NonNullable<> type I noticed there’s a bunch of utility types. These types are used to construct other types. I’m having trouble at this time understanding the use cases for some of these types, so will solely cover those that I can see use cases for. Starting point Let’s create a simple […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[46],"tags":[],"class_list":["post-7227","post","type-post","status-publish","format-standard","hentry","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7227"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7227\/revisions"}],"predecessor-version":[{"id":7231,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7227\/revisions\/7231"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}