DEV Community: Yash Sanghvi

TypeScript Mastery Part 2: Intermediate Concepts and Design Patterns

Yash Sanghvi — Tue, 25 Feb 2025 06:30:00 +0000

Introduction

Building on our foundation from Part 1, we'll dive into more advanced TypeScript features that help you write more robust and maintainable code. This guide focuses on practical patterns and real-world scenarios.

Advanced Type Concepts

1. Union and Intersection Types

// Union Types
type StringOrNumber = string | number;
type Status = "success" | "error" | "pending";

// Intersection Types
type Employee = {
    id: number;
    name: string;
};

type Manager = {
    subordinates: number;
    department: string;
};

type ManagerEmployee = Employee & Manager;

const seniorManager: ManagerEmployee = {
    id: 1,
    name: "John Doe",
    subordinates: 5,
    department: "Engineering"
};

2. Generics

// Generic Functions
function wrapInArray<T>(value: T): T[] {
    return [value];
}

// Generic Interfaces
interface Repository<T> {
    get(id: string): Promise<T>;
    save(item: T): Promise<void>;
    delete(id: string): Promise<boolean>;
}

// Generic Classes
class Queue<T> {
    private data: T[] = [];

    push(item: T): void {
        this.data.push(item);
    }

    pop(): T | undefined {
        return this.data.shift();
    }
}

3. Type Guards and Type Narrowing

// Type Guards
function isString(value: unknown): value is string {
    return typeof value === "string";
}

// Using type guards
function processValue(value: string | number) {
    if (isString(value)) {
        console.log(value.toUpperCase());  // TypeScript knows value is string
    } else {
        console.log(value.toFixed(2));     // TypeScript knows value is number
    }
}

// Discriminated Unions
type Circle = {
    kind: "circle";
    radius: number;
};

type Rectangle = {
    kind: "rectangle";
    width: number;
    height: number;
};

type Shape = Circle | Rectangle;

function calculateArea(shape: Shape): number {
    switch (shape.kind) {
        case "circle":
            return Math.PI * shape.radius ** 2;
        case "rectangle":
            return shape.width * shape.height;
    }
}

Advanced Design Patterns

1. Builder Pattern with Method Chaining

class QueryBuilder {
    private query: string = '';
    private parameters: any[] = [];

    select(columns: string[]): this {
        this.query = `SELECT ${columns.join(', ')}`;
        return this;
    }

    from(table: string): this {
        this.query += ` FROM ${table}`;
        return this;
    }

    where(condition: string, parameter: any): this {
        this.query += ` WHERE ${condition}`;
        this.parameters.push(parameter);
        return this;
    }

    build(): { query: string; parameters: any[] } {
        return {
            query: this.query,
            parameters: this.parameters
        };
    }
}

// Usage
const query = new QueryBuilder()
    .select(['name', 'email'])
    .from('users')
    .where('age > ?', 18)
    .build();

2. Factory Pattern with Abstract Classes

abstract class Payment {
    abstract process(amount: number): void;
}

class CreditCardPayment extends Payment {
    process(amount: number): void {
        console.log(`Processing credit card payment: $${amount}`);
    }
}

class PayPalPayment extends Payment {
    process(amount: number): void {
        console.log(`Processing PayPal payment: $${amount}`);
    }
}

class PaymentFactory {
    static createPayment(type: "creditcard" | "paypal"): Payment {
        switch (type) {
            case "creditcard":
                return new CreditCardPayment();
            case "paypal":
                return new PayPalPayment();
            default:
                throw new Error("Invalid payment type");
        }
    }
}

3. Decorators (Experimental Feature)

// Method Decorator
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function(...args: any[]) {
        console.log(`Calling ${propertyKey} with:`, args);
        const result = originalMethod.apply(this, args);
        console.log(`Result:`, result);
        return result;
    };

    return descriptor;
}

class Calculator {
    @log
    add(a: number, b: number): number {
        return a + b;
    }
}

Practical Project: Task Management System

Let's build a more complex project incorporating these concepts:

// Types and Interfaces
interface User {
    id: string;
    name: string;
    email: string;
}

interface Task {
    id: string;
    title: string;
    description: string;
    status: TaskStatus;
    assignee?: User;
    dueDate: Date;
}

type TaskStatus = "TODO" | "IN_PROGRESS" | "DONE";

// Generic Repository Implementation
class TaskRepository implements Repository<Task> {
    private tasks: Map<string, Task> = new Map();

    async get(id: string): Promise<Task> {
        const task = this.tasks.get(id);
        if (!task) throw new Error("Task not found");
        return task;
    }

    async save(task: Task): Promise<void> {
        this.tasks.set(task.id, task);
    }

    async delete(id: string): Promise<boolean> {
        return this.tasks.delete(id);
    }
}

// Task Management Service
class TaskManagementService {
    constructor(private repository: Repository<Task>) {}

    async assignTask(taskId: string, user: User): Promise<void> {
        const task = await this.repository.get(taskId);
        task.assignee = user;
        await this.repository.save(task);
    }

    async updateStatus(taskId: string, status: TaskStatus): Promise<void> {
        const task = await this.repository.get(taskId);
        task.status = status;
        await this.repository.save(task);
    }
}

Best Practices and Tips

Use strict compiler options:

{
    "compilerOptions": {
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "noImplicitThis": true
    }
}

Leverage type inference when possible
Use readonly properties for immutability
Consider using branded types for type safety
Make good use of discriminated unions
Implement proper error handling with custom error types

Next Steps

Explore advanced type manipulation
Study real-world TypeScript codebases
Practice implementing design patterns
Learn about module augmentation

Resources

TypeScript Design Patterns Book
Advanced TypeScript GitHub repositories
TypeScript compiler API documentation

TypeScript for Beginners: Your First Steps into Typed JavaScript

Yash Sanghvi — Mon, 24 Feb 2025 07:30:00 +0000

Introduction

TypeScript has become an essential tool in modern web development, powering everything from small projects to enterprise applications. In this first part of our three-part series, we'll explore the fundamentals that every TypeScript developer needs to know.

Prerequisites

Basic understanding of JavaScript
Node.js installed on your computer
A code editor (VS Code recommended for its excellent TypeScript support)

Setting Up Your TypeScript Environment

First, let's set up a TypeScript project from scratch:

# Install TypeScript globally
npm install -g typescript

# Create a new project directory
mkdir ts-basics
cd ts-basics

# Initialize a new npm project
npm init -y

# Install TypeScript as a dev dependency
npm install typescript --save-dev

# Initialize TypeScript configuration
npx tsc --init

Core Concepts

1. Basic Types

TypeScript's type system is one of its most powerful features. Let's explore the fundamental types:

// Basic types
let fullName: string = "John Doe";
let age: number = 30;
let isEmployed: boolean = true;

// Arrays
let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["Alice", "Bob", "Charlie"];

// Tuple
let person: [string, number] = ["John", 30];

// Enum
enum Color {
    Red,
    Green,
    Blue
}
let favoriteColor: Color = Color.Blue;

// Any and Unknown
let notSure: any = 4;
let mysterious: unknown = "hello";

2. Type Inference

TypeScript is smart enough to infer types in many cases:

// Type inference in action
let message = "Hello"; // TypeScript infers string type
let count = 42;        // TypeScript infers number type
let isValid = true;    // TypeScript infers boolean type

// Array inference
let numbers = [1, 2, 3]; // TypeScript infers number[]

3. Interfaces

Interfaces define contracts in your code:

interface User {
    name: string;
    age: number;
    email: string;
    isAdmin?: boolean; // Optional property
}

function createUser(user: User): void {
    console.log(`Creating user: ${user.name}`);
}

// Using the interface
const newUser: User = {
    name: "Alice",
    age: 25,
    email: "alice@example.com"
};

createUser(newUser);

4. Functions in TypeScript

Understanding how to type functions is crucial:

// Function with type annotations
function add(x: number, y: number): number {
    return x + y;
}

// Arrow function with types
const multiply = (x: number, y: number): number => x * y;

// Optional and default parameters
function greet(name: string, greeting: string = "Hello"): string {
    return `${greeting}, ${name}!`;
}

// Rest parameters
function sum(...numbers: number[]): number {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

5. Practical Project: Todo List

Let's create a simple todo list application to practice these concepts:

interface Todo {
    id: number;
    title: string;
    completed: boolean;
    dueDate?: Date;
}

class TodoList {
    private todos: Todo[] = [];

    addTodo(title: string): void {
        const todo: Todo = {
            id: Date.now(),
            title,
            completed: false
        };
        this.todos.push(todo);
    }

    toggleTodo(id: number): void {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
            todo.completed = !todo.completed;
        }
    }

    listTodos(): void {
        this.todos.forEach(todo => {
            console.log(`[${todo.completed ? 'X' : ' '}] ${todo.title}`);
        });
    }
}

// Usage
const myTodos = new TodoList();
myTodos.addTodo("Learn TypeScript basics");
myTodos.addTodo("Practice coding");
myTodos.toggleTodo(1);
myTodos.listTodos();

Common Gotchas and Best Practices

Type Assertions: Use them sparingly

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

Null Checking: Enable strict null checks in tsconfig.json

{
    "compilerOptions": {
        "strictNullChecks": true
    }
}

Type vs Interface: Understanding when to use each

// Use interface for object definitions
interface Animal {
    name: string;
    makeSound(): void;
}

// Use type for unions, intersections, and primitives
type StringOrNumber = string | number;
type Point = { x: number; y: number };

Next Steps

Practice type annotations with different data structures
Explore the TypeScript Playground (typescript-play.js.org)
Read through the official TypeScript documentation
Start converting some of your JavaScript projects to TypeScript

Resources for Further Learning

Official TypeScript Documentation
TypeScript Playground
Microsoft's TypeScript GitHub repository