canonical__yypescript

TypeScript Best Practices

Overview

Setting	Recommendation
Strict Mode	Always enabled
Target	ES2022+
Module	ESNext
No any	Use unknown instead

---

Type Fundamentals

Prefer interface for Objects

// ✅ Use interface for object shapes
interface User {
  id: string
  name: string
  email: string
}

// ✅ Use type for unions, intersections, primitives
type Status = 'pending' | 'active' | 'inactive'
type ID = string | number
type UserWithRole = User & { role: string }

Avoid any, Use unknown

// ❌ Bad - any bypasses type checking
function process(data: any) {
  return data.something  // No error, but unsafe
}

// ✅ Good - unknown requires type checking
function process(data: unknown) {
  if (typeof data === 'object' && data !== null && 'something' in data) {
    return (data as { something: string }).something
  }
  throw new Error('Invalid data')
}

---

Strict Mode Settings

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "exactOptionalPropertyTypes": true
  }
}

---

Type Patterns

Discriminated Unions

// ✅ Use discriminated unions for state
type AsyncState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error }

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

Const Assertions

// ✅ Use as const for literal types
const ROLES = ['admin', 'user', 'guest'] as const
type Role = typeof ROLES[number]  // 'admin' | 'user' | 'guest'

const CONFIG = {
  api: 'https://api.example.com',
  timeout: 5000,
} as const