TypeScript Cheat Sheet [2021]

#Non-JS Features

Introduction

TypeScript is an extension of the JavaScript language. Under the hood, everything is transformed into JavaScript, yet TypeScript offers not only types, but also completely new things.

Unions

let someVariable:string|number 

someVariable = "Some text" 
typeof(someVariable) // string

someVariable = 420
typeof(someVariable) // number

With a union you can define several possible data types for a variable. The type is then decided depending on what is stored.

Enums - constant

enum Directions {
    North,
    South,
    West,
    East
} 
Directions.North // 0
Directions.West // 2

Enum stands for enumeration.
Starting at 0, counting is done from top to bottom and a number is assigned to each element. 0, 1, 2, etc.

Enums - not constant

enum Directions {
    North=1,
    South,
    West=10,
    East
}
Directions.South // 2
Directions.East // 11

You can assign a value on your own. Underneath it is simply increased by 1. This is not called a constant enum, because there is no constant / linear increase gsdfgdgfdsfgsdgdfgdsfsfsdfsfd

Interfaces

interface Person {
  name: String, 
  age: number
}

const max: Person = { 
  name: "Max",
  age: 22
}

Interfaces are like blueprints for objects. They force you to implement objects of this type with the provided types and attributes.

Custom types

type RelationshipStatus = "single" | "taken"

interface Person {
  name: String, 
  age: number, 
  status: RelationshipStatus
}

// or to offer types: 
type BankAccount = BigInteger | void

Custom types can be based on types, or even on possible values.

#Functions

Functions without types

function printUsername(username) {
    console.log(username)
}

printUsername("Max") // "Max"

TypeScript offers static types. But they do not need to be used in functions. Since we do not specifiy what should be passed into the function, we can pass anything with an error.

Functions using types

function printUsername(username: string):void {
    console.log(username)
}

printUsername("Max") // "Max"

In the prevoius example, we did not use types. But it makes sense, since a username only can be a string. Also, our function will never return anything, so we can use :void to.

Arrow Functions

const printUsername = (username) => {
    console.log(username)
}

printUsername("Max")

const printUsername = (username: string): void => {
    console.log(username)
}

printUsername("Max")

Also in TypeScript there are Arrow Function. They work the same as in JS. Types are optional too here.

#Objects

Arrays

const names: Array<string> = ["Max", "Carl"]

// Or, if you want an immutable Array:
const names: ReadonlyArray<string> = ["Max", "Carl"]

This is the extensive way of declaring an array in TypeScript. The second option leads to an actually immutable Array. You can read more about what immutability means here.

Classic objects

const person: { 
  name: String, 
  age: Number 
} = { name: "Max", age: 22 }

While this is the extensive way, using types, it is not the recommended way. Rather, use an interface instead, as shown above.

Sets

const numbers: Set<number> = new Set([1, 2, 3])
numberSet.add(4)

// or, to make it immutable: 
const numbers: ReadonlySet<number> = 
  new Set([1, 2, 3])
// won't work:
numbers.add(4)

Sets only allow each value to appear once. Even if you initialize it with an duplicate value, the value will only appear once.