TypeScript Cheat Sheet 📄 (32 Code Examples + PDF & Poster)

-29 January 2022

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 PDF dark

TypeScript cheat sheet PDF light

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:


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",


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) {

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 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


We can define what kind of data an array can contain

let ids: number[] = []
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


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]


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 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 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) => {
// 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"],


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

enum ResourceType {
ResourceType.BOOK // 0
ResourceType.FILE // 1


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.


Subscribe to be notified of new blog posts!

No spam ever. One-click unsubscribe whenever.
Twitter LogoGithub LogoCodepen Logo

Follow me on Twitter where I post my daily coding creations!

Affiliate disclosure: As an Amazon Associate, we may earn commissions from qualifying purchases from Amazon.com.