TypeScript

TypeScript compiler

Explicit/Implicit Types

Type Syntax

Object Types

Object types can be created using object literals, interfaces, or type aliases. Properties can be separated by , or ;. If a property does not have a specified type, it will be assigned any.

function sum(nums: { a: number; b: number }) {
    return a + b;
}

interface Person {
    name: string;
}

Optional properties

Use ? after a property name to denote that property as optional. Accessing a property that does not exist results in undefined.

function printName(first: string, last?: string) {
    console.log(first);
    if (last !== undefined) {
        console.log(last);
    }
}

readonly properties

The readonly modifier can be used signal that a property should not be written to during development. Runtime behavior does not change.

interface User {
    readonly id: string;
}

Index Signatures

A property's value type can be defined even when the property's name is not known ahead of time. In other words, when accessing obj.someProp or obj["someProp"], the value can be expected to be a certain type. The allowed types for index signatures include string, number, symbol, template string patterns, and unions of these.

type Person = {
    [index: string]: string;
    name: string; // this is fine
    age: number; // not allowed because it does not follow index signature
};

Interface Extension

Interfaces can use the extend keyword to copy properties from existing types. Properties with the same name must have compatible types.

interface Square {
    length: number;
}

interface Color {
    color: string;
}

interface SquareWithColor extends Square, Color {}

interface BadSquare extends Square {
    length: string; // Error: Types of property 'length' are incompatible.
}

Intersection Types

Type aliases and the & operator can be used to combine types. Properties with the same name will have their types merged. In other words, the property value must satisfy both defined types.

interface Student {
    id: string;
}

interface Worker {
    id: string;
    id: string | number; // id can only be a string
    id: number; // id is type 'never'
}

type StudentWorker = Student & Worker;

Union Types

Type Aliases and Interfaces

Type Assertions

Literal Types

Type Guards & Narrowing

Type guards are checks on a value's type, which allows TypeScript to perform narrowing. Narrowing is the process of specifying a value's type beyond that value's initial declared type.

In JavaScript, the typeof operator is used to check a value's type. typeof will return a string from the following: "string", "number", "boolean", "undefined", "object", "function", "bigint", "symbol". Note that typeof null === "object".

function printID(id: string | number) {
    if (typeof id === "string") {
        // In this block of code, TypeScript knows for sure that id is a string
    } else {
        // Otherwise, id must be a number
    }
}

Values in conditional statements are automatically coerced into booleans. Values can also be manually coerced using Boolean() or !! double negation (which becomes a literal boolean of true or false in TypeScript).

More types of narrowing:

// truthy/falsy
function print(s: string) {
    if (s) {
        console.log(s);
    } else {
        console.log("empty string");
    }
}

// equality
function equal(x: string | number, y: string | boolean) {
    if (x === y) {
        // x and y must both be strings
    }
}

// "in" operator
type Square = { length: number };
type Circle = { radius: number };
function shape(s: Square | Circle) {
    if ("length" in s) {
        // s must be a Square
    }
}

// "instanceof" operator
function log(s: Date | string) {
    if (s instanceof Date) {
        // instanceof checks the value's prototype chain
    }
}

// assignment
let x = Math.random() > 0.5 ? 1 : "hello"; // number | string;
x = 3; // number
x = "str"; // string
x = true; // error

// control flow analysis
// TypeScript can narrow based on contextual code
let x: string | number | boolean;
x = true; // boolean
if (Math.random() > 0.5) {
    x = "hello"; // string
} else {
    x = 3; // number
}
return x; // string | number. x logically cannot be a boolean

// type predicate functions
// "param is Type" syntax signals a function that returns a boolean
function isString(val: unknown): val is string {
    return typeof val === "string";
}

// assertion functions
function assert(condition: unknown): asserts condition {
    if (!condition) {
        throw new Error("falsy");
    }
}
// OR
function assertIsString(s: unknown): asserts s is string {
    if (typeof s !== "string") {
        throw new Error("not string");
    }
}

function print(s: unknown) {
    assert(typeof s === "string");
    // OR
    assertIsString(s);

    // This line would be an error without asserting
    console.log(s.toUpperCase());
}

Discriminated Unions

never

Generics

Generics are types used to create a relation between two values.

function identity<Type>(val: Type): Type {
    return val;
}

const output1 = identity<number>(123);
const output2 = identity("hello");

In the code above, <Type> in angle brackets is a type variable. The variable is used to capture the type of the argument passed into the function. Additionally, the function will return a value of the same type. When calling the function, the type may be inferred or explicitly set.

Generic Functions

function identity<Type>(val: Type): Type {
    return val;
}

// Declaring a generic function type
let func1: <SomeType>(val: SomeType) => SomeType = identity;

// or as a call signature in an object literal
let func2: { <SomeType>(val: SomeType): SomeType } = identity;

// or using an interface
interface GenericFunc {
    <SomeType>(val: SomeType): SomeType;
}
let func3: GenericFunc = identity;

// Note that this interface changes the scope of the type variable
interface DifferentGenericFunc<SomeType> {
    (val: SomeType): SomeType;
}
let func4: DifferentGenericFunc = identity; // ERROR: Missing type argument

Generic Classes

class GenericClass<SomeType> {
    // Properties may need to be initialized, depending on strictness
    val: SomeType;
    func: (x: SomeType, y: SomeType) => SomeType;
}

const c = new GenericClass<number>();
c.val = 5;
c.func = function (x, y) {
    return x + y;
};

Generic Constraints

Constraints are useful when the generic type must have a certain property.

interface HasLength {
    length: number;
}

function log<Type extends HasLength>(val: Type) {
    console.log(val.length);
}

// Type parameter constraint
// The constraint checks that key exists in obj
function getVal<Type, Key extends keyof Type>(obj: Type, key: Key) {
    return obj[key];
}

const coords = { x: 2, y: 3 };
getVal(coords, "x");
getVal(coords, "z"); // Error

Generic Factory Functions

Factory functions can be used to dynamically create class instances during runtime when the class is unknown during compile time.

// The argument type is a constructor signature,
// ensuring the argument is a class
function createInstance<Type>(c: { new (): Type }): Type {
    return new c();
}

class Square {
    length: number = 1;
}

createInstance(Square);

Generic Type Parameter Defaults

Defaults can be used to reduce overloading functions.

function getShape<Type extends Shape = Square>(shape?: Type): Type {
    // ...
}

keyof

typeof

Indexed Access Types

Conditional Types

Template Literal Types

Mapped Types

Classes

class Person {
    // Fields can be typed and initialized
    // Class members are public by default
    public name: string;
    readonly age: number = 0;

    // Protected members can only by accessed within the class and subclasses
    // Protected status can be changed in subclasses
    protected greet() {
        return "hello";
    }

    // Private members can only be accessed within the class and across instances
    private id: string;

    // Static members are not associated with particular class instances.
    // Static members are accessed through the class itself (e.g. Person.planet)
    public static planet: string;
    static {
        // Static blocks have their own scope and can access private members
        // This is useful for executing one-time code and initializing static data
    }

    // Only one implementation allowed. Must be compatible with all overloads
    constructor(name: string);
    constructor(name: string, id: string = "1a2b") {
        this.name = name;
        this.id = id;
    }
}

// Class properties can also be extracted from the constructor parameters
// by including visibility modifiers
class Point {
    constructor(
        public readonly x: number,
        protected y: number,
        private z: number,
    ) {}
}

// Classes can be anonymous and defined in expressions
const myClass = class<Type> {
    data: Type;
    constructor(val: Type) {
        this.data = val;
    }
};

protected and private members are only enforced during type checking. These members can be accessed normally during JavaScript runtime. Bracket notation can also be used to access private members in TypeScript (e.g. obj["key"]). To ensure privacy during runtime, use JavaScript private fields (#).

declare can be used in a subclass to overwrite an inherited field's type.

interface Shape {
    name: string;
}

interface Circle extends Shape {
    radius: number;
}

class ShapeContainer {
    shape: Shape;
    constructor(shape: Shape) {
        this.shape = shape;
    }
}

class CircleContainer extends ShapeContainer {
    // Ensures a more specific type.
    // This line is removed during compilation.
    declare shape: Circle;
    constructor(circle: Circle) {
        super(circle);
    }
}

If a class implements an interface, TypeScript will check if that class has the same shape as the interface. This does not necessarily mean the class is a child of the interface.

interface Person {
    greet(name: string): string;
}

class Employee implements Person {
    id: number = 0;
    greet(name: string) {
        return "hello " + name;
    }
}

class Worker implements Person {
    // Error: Class 'Worker' incorrectly implements interface 'Person'.
}

abstract classes can serve as a blueprint and provide members to be implemented by concrete subclasses.

// The Person class cannot be instantiated by itself
abstract class Person {
    abstract getName(): string;
}

// concrete subclass
class Employee extends Person {
    getName() {
        return "joe";
    }
}

// To work with subclasses while avoiding the abstract class,
// use a construct signature instead of referring to the class type
function greetWrong(c: typeof Person) {
    const obj = new c(); // Error: Cannot create an instance of an abstract class
}

function greet(c: new () => Person) {
    const obj = new c();
}

greet(Employee);
greet(Person); // Error: Person has an abstract constructor type

Generic Classes

class Wrapper<Type> {
    data: Type;

    // Static members cannot reference a generic type because
    // there is only one instance of the static member at runtime
    static StaticData: Type; // ERROR

    constructor(val: Type) {
        this.data = val;
    }
}

In TypeScript, this can be used as the first parameter in a function. This will perform a check to ensure that the function is called in the intended context. During compilation, the this parameter will be removed.

class Person {
    name = "joe";
    getName(this: Person) {
        return this.name;
    }
}

const p = new Person();
const func = p.getName;
func(); // Error
p.getName(); // No error

this can also dynamically refer to classes.

class ParentClass {
    getClass() {
        return this;
    }
}

class ChildClass extends ParentClass {}

const parent = new ParentClass();
const child = new ChildClass();
parent.getClass(); // ParentClass
child.getClass(); // ChildClass

this type guarding and narrowing

class Shape {
    isSquare(): this is Square {
        return this instanceof Square;
    }
    isCircle(): this is Circle {
        return this instanceof Circle;
    }
}

class Square extends Shape {
    length: number = 3;
}
class Circle extends Shape {
    radius: number = 2;
}

const shape: Shape = new Square();
if (shape.isSquare()) {
    shape.length;
} else if (shape.isCircle()) {
    shape.radius;
}