Skip to main content

TypeScript

TypeScript is a superset of JavaScript that adds static types, making it easier to write robust, maintainable code.

Key concepts:

1. Type Annotations​

TypeScript allows you to explicitly declare the types of variables, function parameters, and return values.

let isDone: boolean = false;
function add(x: number, y: number): number {
    return x + y;
}

2. Interfaces​

Interfaces define the structure of an object, enforcing type checking for object properties.

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

const person: Person = {
    name: "John",
    age: 25
};

3. Classes and Inheritance​

TypeScript supports object-oriented programming with classes, including inheritance, access modifiers, and more.

class Animal {
    private name: string;

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

    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

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

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

4. Generics​

Generics provide a way to create reusable components that work with a variety of types.

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

let output = identity<string>("myString");
let output2 = identity<number>(123);

5. Modules​

TypeScript uses ES6 modules to organize code into separate files and namespaces.

// In math.ts
export function add(x: number, y: number): number {
    return x + y;
}

// In app.ts
import { add } from './math';

console.log(add(2, 3));

6. Enums​

Enums allow a developer to define a set of named constants.

enum Direction {
    Up,
    Down,
    Left,
    Right
}

let dir: Direction = Direction.Up;

7. Type Assertions​

Type assertions provide a way to tell the compiler the type of a variable when you know better than the compiler.

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

8. Union and Intersection Types​

Union types allow a variable to be one of several types, while intersection types combine multiple types into one.

let value: string | number;
value = "hello";
value = 42;

interface A {
    a: number;
}

interface B {
    b: number;
}

let ab: A & B = { a: 1, b: 2 };

9. Type Aliases​

Type aliases create a new name for a type.

type StringOrNumber = string | number;
let value: StringOrNumber;
value = "hello";
value = 42;

10. Advanced Types​

TypeScript supports various advanced type features such as conditional types, mapped types, and more.

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

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

let readonlyPerson: Readonly<Person> = {
    name: "John",
    age: 25
};

// readonlyPerson.age = 26; // Error: Cannot assign to 'age' because it is a read-only property.

11. Type Inference​

TypeScript can infer the types of variables and functions based on their usage, reducing the need for explicit type annotations.

let x = 3; // TypeScript infers x is of type number

12. Decorators​

Decorators are a special kind of declaration that can be attached to a class, method, accessor, property, or parameter. Decorators are still an experimental feature in TypeScript.

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