Some related code is in codesandbox
Where not explicitly stated Typescript version it's available from 3.0+
Most of the information were taken from Advanced typescript fundamentals and Practical advanced typescript egghead courses.
interface vs. typeunknown vs anyin for automatic type inferenceCreate unions using as constTemplate literal typesNumeric separatorsEfficient usage of neverSelf referencing typesConditional typesasserts signature
interface vs. type
Interface is good for defining shapes
type is useful for defining union types, aliases and looks better for function declarations
there are also alternative declarations using interface although they're not so pretty
or
TS uses structural typing so until they have same structure, they're exchangable
joining types is possible with
& operator and the same effect is reachable with extends for interfacesbut unions are only possible with type operator
on the other hand, interfaces allow extending same interface just with defining them
this is mostly used for extending 3rd party libraries, like in the example below, when you're author of jquery plugin and want to extend it's interface
unknown vs any
any is a most relaxed type in Typescript, it doesn't safe the variable unless you narrow the type.unknown express lack of your knowledge about variable type, but you can't do any operations on the variable unless you narrow the type.unknown ensures type safety, with any we resign on itVery useful when you're author of library or package transpiled to JS. In that case,
number is a happy case type, or type you expect. However unknown is a real type of variable passed down to the function.For a good developer experience and correct types suggestion, don't forget to add function overload
in for automatic type inference
For primitive types there is
typeof operator for type narrowing but we can't use it when variable is object. In that case we can use in operator.there is an alternative in type guard function but for most simple cases it's unnecessary code
Create unions using as const
Makes an object being readonly. Also its values are narrowed to most specific type, eg. from
number to 3.It's just compiler type immutability, for runtime immutability you need to use
Object.freeze or something similar.You can convert readonly array to union type
Template literal types
TS 4.1+
Useful for creating complex union types usually composed of other unions
Numeric separators
You can use quite new ES feature called numeric separators when you need to work with big number. Separator can be used also in fractional part.
Efficient usage of never
Using never can help you prevent dead ends, usually in
switch statement but can be used also in if else statements.Self referencing types
We can self reference type inside itself, eg. for creating tree structure type
Conditional types
We can create type condtionally based on other type.
It always has format
T extends U ? X : Y and result is one of possible types. It works same as usual ternary operator so conditional types can be nested.Most useful in general utilities and libraries with lot of interfaces (look into Fela or Reselect)
asserts signature
TS 3.7+
asserts is a keyword used for return type of assertion function, allows you to create assert utilities.When you try to write assert function as an arrow function, be aware you need to type it slightly different, otherwise you get
Assertions require every name in the call target to be declared with an explicit type annotation errror.