Typescript Development

Interfaces and Types

Interface:

interface User {
  id: number
  name: string
  email: string
  age?: number           // Optional
  readonly createdAt: Date  // Read-only
}

// Extending interfaces
interface Admin extends User {
  role: 'admin' | 'superadmin'
  permissions: string[]
}

// Interface with method
interface Logger {
  log(message: string): void
  error(message: string): void
}

Type alias:

type User = {
  id: number
  name: string
  email: string
}

// Union type
type Status = 'pending' | 'active' | 'inactive'

// Intersection type
type AdminUser = User & {
  role: 'admin'
}

// Function type
type Handler = (event: Event) => void

// Mapped type
type ReadonlyUser = {
  readonly [K in keyof User]: User[K]
}

// Conditional type
type NonNullable<T> = T extends null | undefined ? never : T

Interface vs Type:

• Use interface for object shapes that may be extended
• Use type for unions, tuples, and mapped types
• interface supports declaration merging

Generics

Basic generic:

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

const num = identity<number>(42)
const str = identity<string>('hello')
const inferred = identity(42)  // Type inferred

Generic with constraints:

interface HasLength {
  length: number
}

function logLength<T extends HasLength>(arg: T): T {
  console.log(arg.length)
  return arg
}

logLength('string')
logLength([1, 2, 3])
logLength({ length: 10 })

Generic interfaces:

interface Container<T> {
  value: T
  getValue(): T
  setValue(value: T): void
}

const numberContainer: Container<number> = {
  value: 42,
  getValue() {
    return this.value
  },
  setValue(value) {
    this.value = value
  },
}

Generic classes:

class Stack<T> {
  private items: T[] = []

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

  pop(): T | undefined {
    return this.items.pop()
  }

  peek(): T | undefined {
    return this.items[this.items.length - 1]
  }
}

const numberStack = new Stack<number>()
numberStack.push(1)
numberStack.push(2)
const top = numberStack.pop()  // number | undefined

Generic with default:

interface ApiResponse<T = unknown> {
  data: T
  status: number
  message: string
}

type UserResponse = ApiResponse<User>
type GenericResponse = ApiResponse  // Uses unknown as default

Utility types with generics:

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

// Required - all properties required
type RequiredUser = Required<PartialUser>

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

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

// Record - key-value pairs
type UsersById = Record<string, User>

// Exclude / Extract
type NonString = Exclude<string | number | boolean, string>
type OnlyString = Extract<string | number | boolean, string>

// ReturnType
type HandlerReturn = ReturnType<() => string>

// Parameters
type HandlerParams = Parameters<(name: string, age: number) => void>

Advanced Types

Conditional types:

type IsString<T> = T extends string ? true : false

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

Template literal types:

type EventName<T extends string> = `on${Capitalize<T>}`
type ClickEvent = EventName<'click'>  // 'onClick'

type HttpMethod = 'get' | 'post' | 'put' | 'delete'
type Endpoint = `/api/${string}/${HttpMethod}`

Inference with infer:

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never

type Fn = () => string
type R = ReturnType<Fn>  // string

Functions

Function signatures:

// Named function
function add(a: number, b: number): number {
  return a + b
}

// Arrow function
const multiply = (a: number, b: number): number => a * b

// Optional parameters
function greet(name: string, greeting?: string): string {
  return `${greeting ?? 'Hello'}, ${name}!`
}

// Default parameters
function createUser(name: string, age: number = 18): User {
  return { id: 1, name, age }
}

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

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

Function types:

type Comparator<T> = (a: T, b: T) => number

const numberComparator: Comparator<number> = (a, b) => a - b

// Callback type
type Callback<T> = (result: T) => void

function fetchData<T>(url: string, callback: Callback<T>): void {
  // Implementation
}

Classes

class Animal {
  protected name: string
  private age: number

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

  move(distance: number): void {
    console.log(`${this.name} moved ${distance}m`)
  }

  getAge(): number {
    return this.age
  }
}

class Dog extends Animal {
  constructor(name: string, age: number, private breed: string) {
    super(name, age)
  }

  bark(): void {
    console.log(`${this.name} says woof!`)
  }

  // Getter/setter
  get info(): string {
    return `${this.name} is a ${this.breed}`
  }

  // Static member
  static isDog(animal: Animal): animal is Dog {
    return animal instanceof Dog
  }
}

// Abstract class
abstract class Shape {
  abstract area(): number

  describe(): void {
    console.log(`Area: ${this.area()}`)
  }
}

class Circle extends Shape {
  constructor(private radius: number) {
    super()
  }

  area(): number {
    return Math.PI * this.radius ** 2
  }
}

// Interface implementation
interface Drawable {
  draw(): void
}

class Canvas implements Drawable {
  draw(): void {
    console.log('Drawing on canvas')
  }
}

Type Guards

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

// instanceof guard
function handleError(error: Error | string) {
  if (error instanceof Error) {
    return error.message
  }
  return error
}

// in guard
interface Car {
  drive(): void
}

interface Boat {
  sail(): void
}

function move(vehicle: Car | Boat) {
  if ('drive' in vehicle) {
    vehicle.drive()
  } else {
    vehicle.sail()
  }
}

// Custom type guard
function isStringArray(value: unknown): value is string[] {
  return Array.isArray(value) && value.every(item => typeof item === 'string')
}

// Discriminated unions
interface Square {
  kind: 'square'
  size: number
}

interface Circle {
  kind: 'circle'
  radius: number
}

type Shape = Square | Circle

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case 'square':
      return shape.size ** 2
    case 'circle':
      return Math.PI * shape.radius ** 2
  }
}

Configuration

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Best Practices

1. Enable strict mode - Catches more errors at compile time
2. Avoid any - Use unknown for uncertain types
3. Use interfaces for objects - Support declaration merging
4. Leverage type inference - Don't over-annotate
5. Use type guards - Narrow types at runtime
6. Prefer readonly - Prevent accidental mutations
7. Use const assertions - For literal type inference

Additional Resources

• references/typescript-patterns.md - Common type patterns
• examples/type-definitions/ - Type definition examples