Getting friendly with TypeScript (part 4): Utility types
This article is intended for anyone who is trying to get to grips with the world of TypeScript.
It is recommended to read part 1, part 2 and part 3 before reading this article.
This article will cover:
- Utility Types 🥝
- Lots of simple code examples 🪄
In TypeScript, there are multiple built-in default types that we can use.
These are basically types that TypeScript has already created and so we don’t need to worry about creating them ourselves.
As always, examples are our friend because the more I write, the more likely I am to start talking about Jason Bateman or Jason Sudeikis. Oh, there we go.
Utility type one: Partial<T>
Remember the optional property we learned in part 2? Well, this is basically what Partial<T> does — it is the same as adding ?to all the properties.
In a nutshell: Partial<T> makes all properties optional.
The examples above show us a simple interface example. The example below shows us how Partial<T> works.
Because Partial<T> makes all properties optional, we are free to choose which of the properties we use for different variables and we don’t get an error if we don’t use them all.
Partial<T> exampleUtility type two: Required<T>
This is the reverse of Partial<T>
In a nutshell: it makes all ‘optional’ properties of an interface ‘required’.
The examples above show a simple interface with all properties as optional. The example below shows how Required<T> works. It makes all of these properties required and will show an error if any of these properties are missing.
Utility type three: Readonly<T>
In a nutshell: this is the same as Required<T> but it makes all the properties read only.
Above, we have another simple interface example. Below we can see how Readyonly<T> works.
Because we have made readonlyExample a Readonly type, we are not able to modify these variables as you can see in the example below.
Utility type four: Pick<T, K>
With Pick<T,K>, we can pick the properties that we want to use from another type/interface.
In a nutshell: we can create a type based on another type/interface.
In the example above, we have another simple interface. Below, we can see the syntax forPick<T,K>:
Essentially, we are creating a new type E which only has the x and z properties from interface D
If you hover over type E you can see the shape it has:
Utility type five: Omit<T, K>
This is the exact opposite ofPick<T, K>
In a nutshell: you choose the properties you don’t want to include in your new type/interface.
Again, in the above example, we are using interface D and instead of picking the variables we want to use for type F , we are selecting the variables we would like to omit.
This means that type F would have the exact same shape as type E as you can see in the example below:
Utility type six: Exclude <T, U>
This is similar to Omit<T, K> but is used for union types and not properties within types.
In a nutshell: it lets us exclude certain members from an already defined union type.
Hopefully, you can recall from part 1 that Unions can be one of several types.
The example above is an extension of one we looked at previously. Shows is a Union type and can be one of 3 values.
JasonBatemanShows is a type created from the Shows type, but it omits the show Ted Lasso because (hopefully it’s common knowledge) he does not appear in this show. This would be Jason Sudeikis. Oh, great I’m doing it again.
Now, when we hover over JasonBatemanShows you should know what to expect:
Utility type seven: NonNullable<T>
The name pretty much explains this one.
In a nutshell: it removes all the null or undefined elements of a type.
Above, you see that we have a Union type G which can be of type string, string[] ,undefined or null
We can remove the undefined and null types with NonNullable
Utility type eight: Record <K, T>
In a nutshell: this is a shortcut for defining an object type with a specific key and value type.
This means you can narrow down your records by only accepting specific keys or types of keys.
In the above example, we have created a simple Record type called aRecord. This record takes string as the key and number as the value.
This type is good to use when you are mapping and only want to allow certain keys or values.
Let’s see one more example, to help it stick:
Above, we have extended our Shows Union type.
Below, we have created a new Record type which takes the Shows type as it’s key and boolean as it’s value.
This means that the key has to be either: Ozark, Arrested Development, Ted Lasso or Stranger Things, and the value can only be true or false.
This protects us from making any typos or adding incorrect values, which could be a pain to debug later:
TypeScript also helps us out and offers us only the valid values we can use for this property:
We all love IntelliSense 🤤
So, that’s it for our beginner’s guide to TypeScript! There may be more to come in this mini-series, so please leave a comment with any TypeScript topics that you would like to be covered.
🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝🍓🥝
If you enjoyed this article, you might enjoy other articles from the ‘Getting friendly with…’ series:
Getting friendly with the terminal: a super-friendly beginner’s guide
Getting friendly with git: a super-friendly beginner’s guide
Getting friendly with TypeScript (part 1): a super-friendly beginner’s guide
Getting friendly with TypeScript (part 2): a super-friendly beginner’s guide
Getting friendly with TypeScript (part 3): a super-friendly beginner’s guide
Keep challenging yourself and remember, being uncomfortable means you are growing.
