When it comes to TypeScript, there are three features I wanted to share with you that I found pretty cool.
For my examples, I used TypeScript Playground.
Conditional types were something I found extremely cool, being able to conditionally return a type, I actually found it hard to learn due to misunderstanding the term
extends in this context.
Let's have a look at a simple example:
Here all we are saying is, if
Dog is of type
object, if it contains that, then we want the type
NumberOrString to be a number, otherwise, if that wouldn't be the case for some reason, then we want the type to be a string.
Template Literal Types
Template Literal Types are just the pure definition of flexibility, I was actually astonished when I learned about them 😄.
Let's say we want to define some CSS values, and we want developers to only be able to pass
rem values, then we can do something like this:
Here we have two correct variables and one which is false, the one TypeScript complains about. The variables with the type
Value must explicitly have a number and unit of either
Let's say we have a simple function,
arrayOfNumbers, that returns an array of numbers with the given inputs, but the type of the inputs is
asserts of TypeScript we can create a function that we can invoke inside of
arrayOfNumbers, in order to ensure the inputs are of type number, that way TypeScript won't complain anymore.
Now the function
arrayOfNumbers doesn't complain, because using our
assertIsNumber function, we ensure the inputs of the function are of type number, otherwise, we throw an error if that is not the case.
We created a function which asserts that the inputs are of type number, but you can do the same with type string, boolean and other types 😁.
Here you can find more examples of assert functions.