You use Typescript. You want to type the world. But you don’t want to read the whole Typescript doc. So here I come with this introduction to Typescript advanced typings with all type tricks you need.
Note: this article is not an introduction for Typescript beginners. I’m considering you’re here with a bit of Typescript experience and you need to go further in Typescript world. If you never used Typescript, please take a look at lease to this tutorial and take the time to manipulate some Typescript code.
- Typescript in 5 minutes: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
Dynamically type a function
You need to create a function which can have different returns types according to its parameters.
This feature works like the infer syntax. We describe a generic type T which will be determined by the Typescript compiler each time you will use the function f. You can use this type to create a complex return type like in Usage.
This is a very powerful feature which allows the creation of complex auto-inferred types.
You can take a look in Typescript 2.4 notes to see some other examples.
Non Nullable type
You need to forbid a variable to be null (or undefined).
Important note: NonNullable is available in global Typescript context
We need to use a Typescript 2.8 trick with a distributive conditional type.
If we take
T = string | undefined, we reduce the code with this:
So we check each type of T and if one of these types is null or undefined, it will be replaced by never which is the Typescript way to remove a type.
You can also define a Diff type to remove any type from T:
Return Type of a function
Important note: ReturnType is available in global Typescript context.
Another Typescript 2.8 use here.
infer keyword tells to the compiler to get the type of a variable. We check if T is a function and telling to the compiler to associate a type R to the type of the return. So we just have to return the type R if T is a function.
Instance Type of a class
Important note: InstanceType is available in global Typescript context.
Always Typescript 2.8 use here.
This is the same trick as ReturnType. We just need to check if the object T extends the function new (which is the needed function to create a class in JS). If new exists, we just get the return type of the new function.
Set all properties of an object as optional
Important note: Partial is available in global Typescript context.
We dive in Typescript 2.1 here.
The syntax used here is the mapped typed syntax. We iterate on each key of T (stored each time in the type variable P) and for each key P, we create a new optional property with its value
It seems complicated at the beginning, but it’s just nothing more than an iteration on all keys of the object T.
Get the type of a function parameter
Some custom use of Typescript 2.8.
infer syntax can be used for anything in typing. Here, we just tell to Typescript to create a type U from getting the type of a specific argument when T is a function with enough parameters.
Make a union with all values of an array/object
You have an array, and you want to create a single union type with all values of an array or an object.
This one looks so ridiculous, but I figure out how to do that after a long time. It’s a custom use of the mapped types and lookup types of Typescript 2.1.
We iterate on all keys of T on T itself. The lookup type (
keyof T) gets all keys of T and create a union with all these keys. Accessing to T with a union of keys result by creating a union of values types.
With these simple tricks, you can now achieve a lot of works in Typescript world.
Don’t hesitate to comment if you have some questions about them. I’m available on this post comments or on my Twitter.
Thanks for reading! :)
CommentairesEnvoyez-moi un message sur Twitter à @aamulumi ou mentionnez moi avec votre opinion sur le sujet.