Joe Wood Notes

Structured Data Type Definitions (Interfaces, Types)

TypeScript allows defining structured data with interface or type. Fields can be optional (?).

interface User {
    id: number;
    name: string;
    email?: string; // Optional field
}

const user: User = { id: 1, name: "Alice" };

Alternatively, using type:

type Product = {
    id: number;
    name: string;
    price: number;
    category?: string; // Optional field
};

const item: Product = { id: 101, name: "Laptop", price: 1200 };

Classes

class Person {
    name: string;

    constructor(name: string) {
        this.name = name;
        console.log(`${this.name} is created`);
    }

    greet(): void {
        console.log(`Hello, my name is ${this.name}`);
    }

    // No direct destructor, but `finalize` can be used in specific environments
}

const person = new Person("Alice");
person.greet();
// Output:
// Alice is created
// Hello, my name is Alice

Typescript does not have destructors.

Class Property Accessors

class Person {
    private _name: string;
    private _age: number;

    constructor(name: string, age: number) {
        this._name = name;
        this._age = age;
    }

    // Getter for name
    get name(): string {
        return this._name;
    }

    // Setter for name
    set name(newName: string) {
        if (newName.length < 3) {
            throw new Error("Name must be at least 3 characters long.");
        }
        this._name = newName;
    }
}

// Usage
const person = new Person("Alice", 25);

console.log(person.name); // Getter: Alice
person.name = "Bob"; // Setter
console.log(person.name); // Getter: Bob

Class Generics

class Box<T> {
    private content: T;

    constructor(content: T) {
        this.content = content;
    }

    getContent(): T {
        return this.content;
    }
}

const intBox = new Box<number>(10);
console.log(intBox.getContent()); // 10

const strBox = new Box<string>("TypeScript");
console.log(strBox.getContent()); // "TypeScript"

Class Inheritance

class Animal {
    name: string;

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

    makeSound(): void {
        console.log("Some generic animal sound");
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name); // Calls parent constructor
    }

    makeSound(): void {
        console.log("Woof!");
    }
}

const dog = new Dog("Buddy");
dog.makeSound(); // "Woof!"

Classes can also implement interface (pure abstract class):

interface Speakable {
    speak(): void;
}

class Robot implements Speakable {
    speak(): void {
        console.log("Beep boop!");
    }
}

const bot = new Robot();
bot.speak(); // "Beep boop!"

Abstract classes also supported, with a parial implementation:

abstract class Vehicle {
    abstract move(): void; // Must be implemented by subclass

    stop(): void {
        console.log("Stopping...");
    }
}

class Car extends Vehicle {
    move(): void {
        console.log("Driving...");
    }
}

const car = new Car();
car.move(); // "Driving..."
car.stop(); // "Stopping..."

Enum Definitions

Enums define a set of named constants.

enum Status {
    Pending,
    InProgress,
    Completed,
}

const currentStatus: Status = Status.InProgress;

• Enum values default to numeric (starting from 0).
• Custom values can be assigned:

enum Role {
    User = "USER",
    Admin = "ADMIN",
}

const userRole: Role = Role.Admin;

Type Casting in TypeScript

TypeScript provides mechanisms for type casting to convert between types or assert the type of a value. This is useful when working with dynamic data or narrowing types.

Explicit Type Casting. TypeScript allows explicit type casting using the as keyword or angle-bracket syntax (<>).

let value: unknown = "Hello, TypeScript";

// Casting to a string
let strLength: number = (value as string).length;
console.log(strLength); // Output: 17

// Alternatively, using angle-bracket syntax
let strLengthAlt: number = (<string>value).length;
console.log(strLengthAlt); // Output: 17

• Use as for readability and compatibility with JSX.
• Type casting does not perform runtime type checks; it only tells the compiler to treat the value as a specific type.

Type guards are used to narrow down the type of a variable within a block of code. They are often used with typeof, instanceof, or custom type-checking functions.

function processValue(value: string | number): void {
    if (typeof value === "string") {
        console.log(`String value: ${value.toUpperCase()}`);
    } else {
        console.log(`Number value: ${value * 2}`);
    }
}

processValue("hello"); // Output: String value: HELLO
processValue(42); // Output: Number value: 84

class Animal {
    makeSound(): void {
        console.log("Some generic animal sound");
    }
}

class Dog extends Animal {
    makeSound(): void {
        console.log("Woof!");
    }
}

function identifyAnimal(animal: Animal): void {
    if (animal instanceof Dog) {
        console.log("This is a dog");
    } else {
        console.log("This is some other animal");
    }
}

const dog = new Dog();
identifyAnimal(dog); // Output: This is a dog

Type assertions are used to tell the TypeScript compiler to treat a value as a specific type. This is useful when you know more about the type than the compiler does.

let someValue: unknown = "TypeScript";

// Assert that the value is a string
let strLength: number = (someValue as string).length;
console.log(strLength); // Output: 10

You can combine type assertions or type guards with conditional statements to handle dynamic types.

function printValue(value: string | number): void {
    if (typeof value === "string") {
        console.log(`String: ${value}`);
    } else {
        console.log(`Number: ${value}`);
    }
}

printValue("Hello"); // Output: String: Hello
printValue(123); // Output: Number: 123

You can define custom type guard functions to narrow down types.

interface Cat {
    meow(): void;
}

interface Dog {
    bark(): void;
}

function isCat(animal: Cat | Dog): animal is Cat {
    return (animal as Cat).meow !== undefined;
}

function handleAnimal(animal: Cat | Dog): void {
    if (isCat(animal)) {
        animal.meow();
    } else {
        animal.bark();
    }
}

const cat: Cat = { meow: () => console.log("Meow!") };
const dog: Dog = { bark: () => console.log("Woof!") };

handleAnimal(cat); // Output: Meow!
handleAnimal(dog); // Output: Woof!