TypeScript offers us a level of "safety" in our code by adding static types.
We can guarantee that certain properties or functions are present in our code by making them conform to types.
This can hugely reduce the amount of client-side errors you might have in your website, because it reduces human error bugs like calling functions on the wrong objects, for example.
TypeScript does this by utilising Collective Types and Literal Types.
So, what's the difference?
Collective Types in TypeScript
Collective Types are a concept that are familiar to most developers who work with TypeScript. For example:
const addOne = (numb: number) => num + 1;
This code uses Collective Types.
Collective Types are types like
These types encompass a huge amount of variables present – the
number type for example can cover: 1, 2, 3, 4, 5...and so on.
But TypeScript also offers us sub-types on these Collective Types that are stricter.
Literal Types in TypeScript
You can also use values as types, so
let eleven: 11 = 11 is totally valid TypeScript code.
When I first saw this, I thought it looked a little weird.
But it is used heavily, and can really make your code more readable.
You can start to construct enum-like types, and strictly only allow certain values to be assigned, for example:
type Door = 'open' | 'closed' | 'ajar'
Door type can now be used throughout your code – with a stricter set of values than the
string type would have allowed.
| in the above code is unclear, it is a Union Type – and essentially means
OR. Any type that conforms to
Door can only be
Literal Types are sub-types of Collective Types.
We can say all Literal Types are Collective Types – but not all Collective Types are Literal Types. To make that clearer, we could say the Literal Type
11 is a
number but not all
number types are
I hope the difference between the two types is clearer now, and if you need to constrict types strictly, you can make use of Literal Types.
I tweet my articles here if you would like to read more.