TypeScript Development

Modern TypeScript patterns and type-safe development.

Type Fundamentals

Basic Types

// Primitives
const name: string = 'John';
const age: number = 30;
const isActive: boolean = true;
const nothing: null = null;
const notDefined: undefined = undefined;

// Arrays
const numbers: number[] = [1, 2, 3];
const strings: Array<string> = ['a', 'b', 'c'];
const mixed: (string | number)[] = [1, 'two', 3];

// Tuples
const tuple: [string, number] = ['hello', 42];
const namedTuple: [name: string, age: number] = ['John', 30];

// Objects
const user: { name: string; age: number } = { name: 'John', age: 30 };

// Any vs Unknown
const dangerous: any = getData();     // Avoid - no type checking
const safe: unknown = getData();       // Prefer - requires type narrowing
if (typeof safe === 'string') {
    console.log(safe.toUpperCase());   // Now TypeScript knows it's string
}

Interfaces vs Types

// Interface - extendable, for objects
interface User {
    id: number;
    name: string;
    email: string;
}

interface AdminUser extends User {
    role: 'admin';
    permissions: string[];
}

// Type - more flexible
type ID = string | number;
type Callback = (data: string) => void;
type Status = 'pending' | 'active' | 'inactive';

// Intersection types
type UserWithTimestamps = User & {
    createdAt: Date;
    updatedAt: Date;
};

// Use interface for objects, type for unions/primitives

Optional & Readonly

interface Config {
    required: string;
    optional?: string;              // May be undefined
    readonly immutable: string;     // Can't be reassigned
}

// Readonly utility
type ReadonlyUser = Readonly<User>;

// Partial - all optional
type PartialUser = Partial<User>;

// Required - all required
type RequiredUser = Required<User>;

Generics

Basic Generics

// Generic function
function identity<T>(value: T): T {
    return value;
}

const num = identity(42);        // T inferred as number
const str = identity('hello');   // T inferred as string

// Generic interface
interface Response<T> {
    data: T;
    status: number;
    message: string;
}

const userResponse: Response<User> = {
    data: { id: 1, name: 'John', email: 'john@example.com' },
    status: 200,
    message: 'Success',
};

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

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

    dequeue(): T | undefined {
        return this.items.shift();
    }
}

const numberQueue = new Queue<number>();
numberQueue.enqueue(1);

Constraints

// Constrain to specific shape
interface HasId {
    id: number;
}

function findById<T extends HasId>(items: T[], id: number): T | undefined {
    return items.find(item => item.id === id);
}

// Multiple constraints
function merge<T extends object, U extends object>(a: T, b: U): T & U {
    return { ...a, ...b };
}

// keyof constraint
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const user = { name: 'John', age: 30 };
const name = getProperty(user, 'name');  // string
const age = getProperty(user, 'age');    // number

Utility Types

// Pick - select specific properties
type UserPreview = Pick<User, 'id' | 'name'>;

// Omit - exclude properties
type UserWithoutEmail = Omit<User, 'email'>;

// Record - map keys to values
type UserRoles = Record<string, 'admin' | 'user' | 'guest'>;

// Extract / Exclude
type Status = 'pending' | 'active' | 'deleted';
type ActiveStatus = Extract<Status, 'pending' | 'active'>;  // 'pending' | 'active'
type WithoutDeleted = Exclude<Status, 'deleted'>;           // 'pending' | 'active'

// ReturnType / Parameters
function createUser(name: string, email: string): User {
    return { id: 1, name, email };
}

type CreateUserReturn = ReturnType<typeof createUser>;      // User
type CreateUserParams = Parameters<typeof createUser>;       // [string, string]

// NonNullable
type MaybeString = string | null | undefined;
type DefinitelyString = NonNullable<MaybeString>;           // string

Type Guards

// typeof guard
function process(value: string | number) {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    return value * 2;
}

// instanceof guard
class Dog {
    bark() { console.log('Woof!'); }
}

class Cat {
    meow() { console.log('Meow!'); }
}

function speak(animal: Dog | Cat) {
    if (animal instanceof Dog) {
        animal.bark();
    } else {
        animal.meow();
    }
}

// in guard
interface Bird { fly(): void; }
interface Fish { swim(): void; }

function move(animal: Bird | Fish) {
    if ('fly' in animal) {
        animal.fly();
    } else {
        animal.swim();
    }
}

// Custom type guard
interface ApiError {
    code: string;
    message: string;
}

function isApiError(error: unknown): error is ApiError {
    return (
        typeof error === 'object' &&
        error !== null &&
        'code' in error &&
        'message' in error
    );
}

// Usage
try {
    await fetchData();
} catch (error) {
    if (isApiError(error)) {
        console.log(error.code);  // TypeScript knows it's ApiError
    }
}

Advanced Patterns

Discriminated Unions

interface LoadingState {
    status: 'loading';
}

interface SuccessState<T> {
    status: 'success';
    data: T;
}

interface ErrorState {
    status: 'error';
    error: string;
}

type AsyncState<T> = LoadingState | SuccessState<T> | ErrorState;

function handleState<T>(state: AsyncState<T>) {
    switch (state.status) {
        case 'loading':
            return 'Loading...';
        case 'success':
            return state.data;  // TypeScript knows data exists
        case 'error':
            return state.error; // TypeScript knows error exists
    }
}

Template Literal Types

type EventName = 'click' | 'focus' | 'blur';
type EventHandler = `on${Capitalize<EventName>}`;  // 'onClick' | 'onFocus' | 'onBlur'

type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type Endpoint = `/api/${string}`;

function request(method: HTTPMethod, url: Endpoint) {
    // ...
}

request('GET', '/api/users');    // OK
request('GET', '/users');        // Error: doesn't start with /api/

Mapped Types

// Make all properties optional
type Optional<T> = {
    [K in keyof T]?: T[K];
};

// Make all properties nullable
type Nullable<T> = {
    [K in keyof T]: T[K] | null;
};

// Prefix keys
type Prefixed<T, P extends string> = {
    [K in keyof T as `${P}${string & K}`]: T[K];
};

type PrefixedUser = Prefixed<User, 'user_'>;
// { user_id: number; user_name: string; user_email: string }

Conditional Types

// Basic conditional
type IsString<T> = T extends string ? true : false;

type A = IsString<string>;  // true
type B = IsString<number>;  // false

// Extract array element type
type ElementOf<T> = T extends (infer E)[] ? E : never;

type StringElement = ElementOf<string[]>;  // string

// Function return type
type AsyncReturnType<T> = T extends (...args: any[]) => Promise<infer R> ? R : never;

async function fetchUser(): Promise<User> {
    return { id: 1, name: 'John', email: 'john@example.com' };
}

type FetchedUser = AsyncReturnType<typeof fetchUser>;  // User

React TypeScript

Component Types

import { FC, ReactNode, ComponentProps } from 'react';

// Props interface
interface ButtonProps {
    variant: 'primary' | 'secondary';
    size?: 'sm' | 'md' | 'lg';
    children: ReactNode;
    onClick?: () => void;
}

// Function component
function Button({ variant, size = 'md', children, onClick }: ButtonProps) {
    return (
        <button className={`btn-${variant} btn-${size}`} onClick={onClick}>
            {children}
        </button>
    );
}

// With FC (includes children)
const Card: FC<{ title: string; children: ReactNode }> = ({ title, children }) => (
    <div className="card">
        <h2>{title}</h2>
        {children}
    </div>
);

// Extending HTML element props
interface InputProps extends ComponentProps<'input'> {
    label: string;
    error?: string;
}

function Input({ label, error, ...props }: InputProps) {
    return (
        <div>
            <label>{label}</label>
            <input {...props} />
            {error && <span className="error">{error}</span>}
        </div>
    );
}

Hooks

import { useState, useEffect, useRef, useCallback, useMemo } from 'react';

// useState with type
const [user, setUser] = useState<User | null>(null);
const [items, setItems] = useState<string[]>([]);

// useRef
const inputRef = useRef<HTMLInputElement>(null);
const countRef = useRef<number>(0);

// useCallback with types
const handleClick = useCallback((id: number) => {
    console.log(id);
}, []);

// useMemo
const expensiveValue = useMemo(() => {
    return items.filter(item => item.length > 5);
}, [items]);

// Custom hook
function useLocalStorage<T>(key: string, initialValue: T) {
    const [value, setValue] = useState<T>(() => {
        const stored = localStorage.getItem(key);
        return stored ? JSON.parse(stored) : initialValue;
    });

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(value));
    }, [key, value]);

    return [value, setValue] as const;
}

Configuration

tsconfig.json

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "bundler",
        "lib": ["ES2022", "DOM", "DOM.Iterable"],

        "strict": true,
        "noUncheckedIndexedAccess": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,

        "declaration": true,
        "declarationMap": true,
        "sourceMap": true,

        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,

        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"],
            "@components/*": ["src/components/*"]
        },

        "outDir": "dist",
        "rootDir": "src"
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
}

Strict Mode Benefits

// strictNullChecks - catches null/undefined errors
const user: User | null = getUser();
user.name;              // Error: user might be null
user?.name;             // OK: optional chaining

// noImplicitAny - requires explicit types
function process(data) { }  // Error: implicit 'any'
function process(data: unknown) { }  // OK

// strictPropertyInitialization - ensures class properties are initialized
class User {
    name: string;       // Error: not initialized
    name: string = '';  // OK
}