4IT580: DocsTypeScript cheatsheet
TypeScript builds on top of JavaScript. First, you write the TypeScript code, then you compile the code into plain JavaScript code using a TypeScript compiler.
Once you have the plain JavaScript code, you can use it in any environment that can run JavaScript.
Why TypeScript?
- Catch errors at compile time instead runtime
- Code is more predictable
🤔 Problem
✅ Solution
Specify the type of the parameter in the function declaration:
When you try passing something else than a number, your code editor will show the following error on hover:
When you try to compile TypeScript using the command, you will get the same error:
📦 What does TypeScript consist of?
- Syntax: types, interfaces, enums, generics...
- Compiler: transpile TypeScript into JavaScript using the command
- Language service: show errors and auto-complete in your code editor
Type inference
Most of the time, when you create a new variable or constant, you don't have to specify the type, since TypeScript can infer it for you. It is always good to check in your code editor if the inferred type is correct.
Variables can be reassigned with different types:
The "forbidden" type
When you want to assign whatever type, you can use .
A good practice is to NOT use this type since you lose the type safety.
Type
This type is usually used when the value is not known at compile time.
Primitives
string
number
boolean
Literal value
Object literal
Type aliases
You can store a type in a type alias using the keyword and re-use it.
Structural typing
Sometimes called "duck typing" (If it walks like a duck and it quacks like a duck, then it must be a duck).
Comparing types is done by comparing the structures, not the names of types.
If contains the same properties as , it is safe to pass it as an argument of .
You can read about structural type system in official docs.
Array
Two syntax variants - or .
Pick what works best for you and stick to it.
Example 1 - array of strings
Example 2 - array of objects
Tuple
A tuple is an array of a fixed length and of known types:
Unions and intersections
Union - OR
Primitives:
String literals:
Intersection - AND
Enum
A key to value mapping.
DO NOT USE ! There are many problems with TypeScript enums. It is a crime against humanity to use in TypeScript.
For a detailed explanation, see this video or read this article.
You can use a string union instead:
Optional and nullable
Optional value
For a value which can be or omitted completely:
This is different than type, which means the property must be present!
Nullable
This is useful to express that value is in a special known state, e.g. a non-filled value.
Functions
Parameters
ES6 arrow function
Return type
When you don't specify the return type, TypeScript will infer it for you based on the return statements in the function body.
Optional parameters
Default parameter values
Utility types
All utility types - documentation
Here are the most useful ones for your projects:
Pick
Pick a set of properties from a type.
Use a union type to pick more props:
Omit
Remove a set of properties from an object literal type.
Partial
Converts all properties of an object literal type to optional.
Required
Converts all properties of an object literal type to required.
Record
Type of
Interfaces
Similar to but with different features and limitations.
Extending interface
Shall I use or ?
In short: Always use unless there's a valid use case for choosing .
For an in-depth explanation, you can read Type vs Interface: Which Should You Use? or watch this video by Matt Pocock.
React example
Type aliases are used to define the props of a React component:
You will get auto-complete for the props in your code editor and TypeScript will check that you are passing the correct values.
Type parameters
Example: we want to make sure that the function return value is derived from the type of the first argument.