I recently wrote a comprehensive Beginners Guide to TypeScript for FreeCodeCamp, but I wanted distil everything from the article into a concise, easy-to-revise-from cheat sheet. So that's what I did.

This cheat sheet explains the following fundamental TypeScript concepts, with code examples:

• Setting up a project
• Compiling TypeScript
• Strict mode
• Primitive types
• Union types
• Dynamic types
• Literal types
• Objects
• Arrays
• Tuples
• Functions
• Type aliases
• Interfaces
• The DOM and type casting
• Generics
• Enums
• Narrowing

FREE TypeScript Cheat Sheet PDF

One page PDF to make it easy to copy and paste in commands.

Download the free TypeScript Cheat Sheet PDF here. Simply enter $0, or you can support my content by sending me a few $.

Cheat sheets are available in Dark Mode and Light Mode:

TypeScript Cheat Sheet Poster

Order a physical A3 poster for your office wall - so you can quickly look up commands, and keep them at the top of your head.

It comes in thick durable paper, and a matte, light-absorbing finish.

Order a TypeScript cheat sheet poster here

Here is everything included in the cheat sheet:

Setup

Install TS globally on your machine

$ npm i -g typescript

Check version

$ tsc -v

Create the tsconfig.json file

$ tsc --init

Set the root (to compile TS files from) and output (for the compiled JS files) directories in tsconfig.json

"rootDir": "./src",
"outDir": "./public",

Compiling

Compile a specified TS file into a JS file of the same name, into the same directory (i.e. index.ts to index.js)

$ tsc index.ts

Tell tsc to compile specified file whenever a change is saved by adding the watch flag (-w)

$ tsc index.ts -w

Compile specified file into specified output file

$ tsc index.ts --outfile out/script.js

If no file is specified, tsc will compile all TS files in the "rootDir" and output in the "outDir". Add -w to watch for changes.

$ tsc -w

Strict Mode

In tsconfig.json, it is recommended to set strict to true. One helpful feature of strict mode is No Implicit Any:

// Error: Parameter 'a' implicitly has an 'any' type
function logName(a) {
  console.log(a.name)
}

Primitive Types

There are 7 primitive types in JS:

• string
• number
• bigInt
• boolean
• undefined
• null
• symbol

Explicit type annotation

let firstname: string = "Danny"

If we assign a value (as above), we don't need to state the type - TS will infer it ("implicit type annotation")

let firstname = "Danny"

Union Types

A variable that can be assigned more than one type

let age: number | string
age = 26
age = "26"

Dynamic Types

The any type basically reverts TS back to JS

let age: any = 100
age = true

Literal Types

We can refer to specific strings & numbers in type positions

let direction: "UP" | "DOWN"
direction = "UP"

Objects

Objects in TS must have all the correct properties & value types

let person: {
  name: string
  isProgrammer: boolean
}
person = {
  name: "Danny",
  isProgrammer: true,
}
person.age = 26 // Error - no age prop on person object
person.isProgrammer = "yes" // Error - should be boolean

Arrays

We can define what kind of data an array can contain

let ids: number[] = []
ids.push(1)
ids.push("2") // Error

Use a union type for arrays with multiple types

let options: (string | number)[]
options = [10, "UP"]

If a value is assigned, TS will infer the types in the array

let person = ["Delia", 48]
person[0] = true // Error - only strings or numbers allowed

Tuples

A tuple is a special type of array with fixed size & known data types at each index. They're stricter than regular arrays.

let options: [string, number]
options = ["UP", 10]

Functions

We can define the types of the arguments, and the return type. Below, : string could be omitted because TS would infer the return type.

function circle(diam: number): string {
  return "Circumf = " + Math.PI * diam
}

The same function as an ES6 arrow

const circle = (diam: number): string => "Circumf = " + Math.PI * diam

If we want to declare a function, but not define it, use a function signature

let sayHi: (name: string) => void
sayHi = (name: string) => console.log("Hi " + name)
sayHi("Danny") // Hi Danny

Type Aliases

Allow you to create a new name for an existing type. They can help to reduce code duplication. They're similar to interfaces, but can also describe primitive types.

type StringOrNum = string | number
let id: StringOrNum = 24

Interfaces

Interfaces are used to describe objects. Interfaces can always be reopened & extended, unlike Type Aliases. Notice that name is readonly

interface Person {
  name: string
  isProgrammer: boolean
}
let p1: Person = {
  name: "Delia",
  isProgrammer: false,
}
p1.name = "Del" // Error - read only

Two ways to describe a function in an interface

interface Speech {
  sayHi(name: string): string
  sayBye: (name: string) => string
}
let speech: Speech = {
  sayHi: function (name: string) {
    return "Hi " + name
  },
  sayBye: (name: string) => "Bye " + name,
}

Extending an interface

interface Animal {
  name: string
}
interface Dog extends Animal {
  breed: string
}

The DOM & Type Casting

TS doesn't have access to the DOM, so use the non-null operator (!) to tell TS the expression isn't null or undefined

const link = document.querySelector("a")!

If an element is selected by id or class, we need to tell TS what type of element it is via Type Casting

const form = document.getElementById("signupform") as HTMLFormElement

Generics

Generics allow for type safety in components where the arguments & return types are unkown ahead of time

interface HasLength {
  length: number
}
// logLength accepts all types with a length property
const logLength = <T extends HasLength>(a: T) => {
  console.log(a.length)
}
// TS "captures" the type implicitly
logLength("Hello") // 5
// Can also explicitly pass the type to T
logLength<number[]>([1, 2, 3]) // 3

Declare a type, T, which can change in your interface

interface Dog<T> {
  breed: string
  treats: T
}
// We have to pass in a type argument
let labrador: Dog<string> = {
  breed: "labrador",
  treats: "chew sticks, tripe",
}
let scottieDog: Dog<string[]> = {
  breed: "scottish terrier",
  treats: ["turkey", "haggis"],
}

Enums

A set of related values, as a set of descriptive constants

enum ResourceType {
  BOOK,
  FILE,
  FILM,
}
ResourceType.BOOK // 0
ResourceType.FILE // 1

Narrowing

Occurs when a variable moves from a less precise type to a more precise type

let age = getUserAge()
age // string | number
if (typeof age === "string") {
  age // string
}

Thanks for reading

Hope this cheat sheet is useful!

Again, feel free to download the one-page PDF or order a poster:

One-page TypeScript cheat sheet PDF

Order a physical poster

For more from me, you can follow me on Twitter, or subscribe to my YouTube channel.

Cheers!