Typescript Syntax Cheat Sheet

Basic Types

let isDone: boolean = false;
let age: number = 32;
let name: string = "Alex";
let list: number[] = [1, 2, 3];
let listGeneric: Array<number> = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];

Enums

enum Color {
	Red,
	Green,
	Blue,
}
let c: Color = Color.Green;

Any

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

Void

function warnUser(): void {
	console.log("This is my warning message");
}

Null and Undefined

let u: undefined = undefined;
let n: null = null;

Never

function error(message: string): never {
	throw new Error(message);
}

function fail() {
	return error("Something failed");
}

function infiniteLoop(): never {
	while (true) {}
}

Object

declare function create(o: object | null): void;
create({ prop: 0 });
create(null);

Type Assertions

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

Functions

function add(x: number, y: number): number {
	return x + y;
}

let myAdd = function (x: number, y: number): number {
	return x + y;
};

Optional and Default Parameters

function buildName(firstName: string, lastName?: string) {
	return firstName + " " + (lastName || "");
}

function buildNameWithDefault(firstName: string, lastName = "Smith") {
	return firstName + " " + lastName;
}

Rest Parameters

function buildNameWithRest(firstName: string, ...restOfName: string[]) {
	return firstName + " " + restOfName.join(" ");
}

Interfaces

interface Person {
	firstName: string;
	lastName: string;
}

function greeter(person: Person) {
	return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

Classes

class Animal {
	private name: string;
	constructor(name: string) {
		this.name = name;
	}
	move(distanceInMeters: number = 0) {
		console.log(`${this.name} moved ${distanceInMeters}m.`);
	}
}

class Dog extends Animal {
	bark() {
		console.log("Woof! Woof!");
	}
}

let dog = new Dog("Rex");
dog.bark();
dog.move(10);

Access Modifiers

class Person {
	private name: string;
	protected age: number;
	public constructor(name: string, age: number) {
		this.name = name;
		this.age = age;
	}
}

class Employee extends Person {
	private department: string;

	constructor(name: string, age: number, department: string) {
		super(name, age);
		this.department = department;
	}

	public getDetails() {
		return `${this.name} works in ${this.department}`;
	}
}

let employee = new Employee("John", 30, "HR");
console.log(employee.getDetails());

Readonly Properties

class Octopus {
	readonly name: string;
	readonly numberOfLegs: number = 8;

	constructor(name: string) {
		this.name = name;
	}
}

let dad = new Octopus("Man with the 8 strong legs");
// dad.name = "Man with the 3-piece suit"; // Error

Static Properties

class Grid {
	static origin = { x: 0, y: 0 };
	calculateDistanceFromOrigin(point: { x: number; y: number }) {
		let xDist = point.x - Grid.origin.x;
		let yDist = point.y - Grid.origin.y;
		return Math.sqrt(xDist * xDist + yDist * yDist);
	}
}

let grid1 = new Grid();
console.log(grid1.calculateDistanceFromOrigin({ x: 10, y: 10 }));

Generics

function identity<T>(arg: T): T {
	return arg;
}

let output = identity<string>("myString"); // type of output will be 'string'
let output2 = identity<number>(100); // type of output2 will be 'number'

Generic Classes

class GenericNumber<T> {
	zeroValue: T;
	add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
	return x + y;
};

Type Aliases

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {
	if (typeof n === "string") {
		return n;
	} else {
		return n();
	}
}

Union Types

function padLeft(value: string, padding: number | string) {
	if (typeof padding === "number") {
		return Array(padding + 1).join(" ") + value;
	}
	if (typeof padding === "string") {
		return padding + value;
	}
	throw new Error(`Expected string or number, got '${padding}'.`);
}

Intersection Types

interface ErrorHandling {
	success: boolean;
	error?: { message: string };
}

interface ArtworksData {
	artworks: { title: string }[];
}

type ArtworksResponse = ArtworksData & ErrorHandling;

const response: ArtworksResponse = {
	success: true,
	artworks: [{ title: "Mona Lisa" }],
};

Type Guards and Type Assertions

function isNumber(x: any): x is number {
	return typeof x === "number";
}

function isString(x: any): x is string {
	return typeof x === "string";
}

function padLeftExample(value: string, padding: number | string) {
	if (isNumber(padding)) {
		return Array(padding + 1).join(" ") + value;
	}
	if (isString(padding)) {
		return padding + value;
	}
	throw new Error(`Expected string or number, got '${padding}'.`);
}

Mapped Types

type Readonly<T> = {
	readonly [P in keyof T]: T[P];
};

type Partial<T> = {
	[P in keyof T]?: T[P];
};

type PersonPartial = Partial<Person>;
type ReadonlyPerson = Readonly<Person>;

Conditional Types

type MessageOf<T extends { message: unknown }> = T["message"];

type Email = {
	message: string;
};

type EmailMessageContents = MessageOf<Email>;

Utility Types

interface Person {
	name: string;
	age: number;
}

type PartialPerson = Partial<Person>;
type ReadonlyPerson = Readonly<Person>;
type PickName = Pick<Person, "name">;
type RecordProps = Record<string, number>;

Modules

// math.ts
export function add(a: number, b: number): number {
	return a + b;
}

// app.ts
import { add } from "./math";
console.log(add(2, 3));

Namespaces

namespace Validation {
	export interface StringValidator {
		isAcceptable(s: string): boolean;
	}

	const lettersRegexp = /^[A-Za-z]+$/;

	export class LettersOnlyValidator implements StringValidator {
		isAcceptable(s: string) {
			return lettersRegexp.test(s);
		}
	}
}

let validator = new Validation.LettersOnlyValidator();
console.log(validator.isAcceptable("Hello"));

Decorators

function sealed(constructor: Function) {
	Object.seal(constructor);
	Object.seal(constructor.prototype);
}

@sealed
class Greeter {
	greeting: string;
	constructor(message: string) {
		this.greeting = message;
	}
	greet() {
		return "Hello, " + this.greeting;
	}
}

Decorator Factories

function color(value: string) {
	// this is the decorator factory
	return function (target: any) {
		// this is the decorator
		target.prototype.color = value;
	};
}

@color("blue")
class Car {}

let car = new Car();
console.log(car.color); // blue

function format(target: any, propertyKey: string) {
	let value: string;

	const getter = () => value;
	const setter = (newVal: string) => {
		value = newVal.toUpperCase();
	};

	Object.defineProperty(target, propertyKey, {
		get: getter,
		set: setter,
		enumerable: true,
		configurable: true,
	});
}

class Greeter {
	@format
	greeting: string;

	constructor(message: string) {
		this.greeting = message;
	}

	greet() {
		return `Hello, ${this.greeting}`;
	}
}

let greeter = new Greeter("world");
console.log(greeter.greet()); // Hello, WORLD