pfftdammitchris

// Using a type annotation
const theme: Record<string, string> = {
  primary: '#3b82f6',
  secondary: '#10b981',
  danger: '#ef4444',
}

// Later in your code...
theme.primary.toUpperCase() // Works fine

pfftdammitchris

// No type annotation
const theme = {
  primary: '#3b82f6',
  secondary: '#10b981',
  danger: '#ef4444',
}

// Great! TypeScript knows the exact keys and values
theme.primary // Type is '#3b82f6'
theme.primry // Error! Property 'primry' does not exist

pfftdammitchris

type ThemeColors = Record<'primary' | 'secondary' | 'danger', string>

const theme = {
  primary: '#3b82f6',
  secondary: '#10b981',
  danger: '#ef4444',
} satisfies ThemeColors

// Validation: TypeScript ensures all required keys exist
// Inference: TypeScript still knows the exact literal values

pfftdammitchris

type Route = {
  path: string
  method: 'GET' | 'POST' | 'PUT' | 'DELETE'
}

const routes = {
  users: { path: '/api/users', method: 'GET' },
  createUser: { path: '/api/users', method: 'POST' },
  updateUser: { path: '/api/users/:id', method: 'PUT' },
} satisfies Record<string, Route>

pfftdammitchris

// Contract is explicit - great for function parameters and return types
function createUser(data: UserInput): User {
  // ...
}

// But for objects, it widens the type
const config: Config = { timeout: 5000 }
// config.timeout is now just `number`, not `5000`

pfftdammitchris

// Sometimes necessary with DOM or external data
const element = document.getElementById('app') as HTMLDivElement

// Dangerous! You're telling TypeScript to trust you
const data = JSON.parse(response) as User // Could be anything at runtime

pfftdammitchris

// Best of both worlds
const config = {
  timeout: 5000,
  retries: 3,
} satisfies Partial<Config>

// config.timeout is `5000`, and we know it matches Config

pfftdammitchris

type RGB = [number, number, number]
type Color = string | RGB

const palette = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [0, 0, 255],
} satisfies Record<string, Color>

// TypeScript knows the exact type of each property!

pfftdammitchris

type Endpoint = {
  url: string
  method: 'GET' | 'POST'
}

const endpoints = {
  getUsers: { url: '/users', method: 'GET' },
  createUser: { url: '/users', method: 'POST' },
  // Forgot an endpoint? TypeScript can help if you use a stricter type
} satisfies Record<string, Endpoint>

pfftdammitchris

type Features = 'darkMode' | 'notifications' | 'analytics'

const featureFlags = {
  darkMode: true,
  notifications: false,
  analytics: true,
} satisfies Record<Features, boolean>

// If you add a new feature to the union and forget to add it here,
// TypeScript will error!