TypeScript Strict Mode Skill

Advanced TypeScript patterns for strict mode, type safety, and sophisticated type techniques.

When to Use

• Enforcing strict TypeScript configuration
• Implementing advanced type patterns
• Building type-safe APIs and libraries
• Improving type inference and narrowing

Strict Configuration

// tsconfig.json
{
  "compilerOptions": {
    // Strict mode (enables all strict flags)
    "strict": true,

    // Individual strict flags (all enabled by "strict": true)
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,

    // Additional strictness
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "exactOptionalPropertyTypes": true,

    // Module resolution
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],

    // Output
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,

    // Interop
    "esModuleInterop": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true
  }
}

Type Narrowing

Type Guards

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

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

// in operator
interface Dog { bark(): void }
interface Cat { meow(): void }

function speak(animal: Dog | Cat) {
  if ('bark' in animal) {
    animal.bark() // animal is Dog
  } else {
    animal.meow() // animal is Cat
  }
}

// Custom type guard
function isString(value: unknown): value is string {
  return typeof value === 'string'
}

function isUser(obj: unknown): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'id' in obj &&
    'email' in obj &&
    typeof (obj as User).id === 'string' &&
    typeof (obj as User).email === 'string'
  )
}

// Assertion function
function assertDefined<T>(value: T | null | undefined, message?: string): asserts value is T {
  if (value === null || value === undefined) {
    throw new Error(message ?? 'Value is not defined')
  }
}

// Usage
function getUser(id: string): User | null {
  // ...
}

const user = getUser('123')
assertDefined(user, 'User not found')
console.log(user.email) // user is User, not User | null

Discriminated Unions

// Status pattern
type LoadingState = { status: 'loading' }
type SuccessState<T> = { status: 'success'; data: T }
type ErrorState = { status: 'error'; error: Error }
type AsyncState<T> = LoadingState | SuccessState<T> | ErrorState

function handleState<T>(state: AsyncState<T>) {
  switch (state.status) {
    case 'loading':
      return 'Loading...'
    case 'success':
      return `Data: ${state.data}` // state.data is available
    case 'error':
      return `Error: ${state.error.message}` // state.error is available
  }
}

// Event pattern
type UserCreatedEvent = {
  type: 'USER_CREATED'
  payload: { userId: string; email: string }
}

type UserUpdatedEvent = {
  type: 'USER_UPDATED'
  payload: { userId: string; changes: Partial<User> }
}

type UserDeletedEvent = {
  type: 'USER_DELETED'
  payload: { userId: string }
}

type UserEvent = UserCreatedEvent | UserUpdatedEvent | UserDeletedEvent

function handleEvent(event: UserEvent) {
  switch (event.type) {
    case 'USER_CREATED':
      console.log(`Created user ${event.payload.email}`)
      break
    case 'USER_UPDATED':
      console.log(`Updated user ${event.payload.userId}`)
      break
    case 'USER_DELETED':
      console.log(`Deleted user ${event.payload.userId}`)
      break
  }
}

Utility Types

Built-in Utilities

interface User {
  id: string
  email: string
  name: string
  age: number
  role: 'admin' | 'user'
}

// Partial - all properties optional
type PartialUser = Partial<User>
// { id?: string; email?: string; ... }

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

// Readonly - all properties readonly
type ReadonlyUser = Readonly<User>

// Pick - select specific properties
type UserCredentials = Pick<User, 'email' | 'id'>
// { email: string; id: string }

// Omit - exclude specific properties
type PublicUser = Omit<User, 'role'>
// { id: string; email: string; name: string; age: number }

// Record - object with specific key/value types
type UserRoles = Record<string, 'admin' | 'user'>
// { [key: string]: 'admin' | 'user' }

// Extract - extract types from union
type StringOrNumber = string | number | boolean
type JustStrings = Extract<StringOrNumber, string>
// string

// Exclude - exclude types from union
type NotStrings = Exclude<StringOrNumber, string>
// number | boolean

// NonNullable - remove null and undefined
type MaybeString = string | null | undefined
type DefinitelyString = NonNullable<MaybeString>
// string

// ReturnType - get function return type
function createUser() {
  return { id: '1', name: 'John' }
}
type NewUser = ReturnType<typeof createUser>
// { id: string; name: string }

// Parameters - get function parameter types
function updateUser(id: string, data: Partial<User>) {}
type UpdateParams = Parameters<typeof updateUser>
// [string, Partial<User>]

// Awaited - unwrap Promise type
type AsyncUser = Promise<User>
type ResolvedUser = Awaited<AsyncUser>
// User

Custom Utility Types

// DeepPartial - recursive partial
type DeepPartial<T> = T extends object
  ? { [P in keyof T]?: DeepPartial<T[P]> }
  : T

// DeepReadonly - recursive readonly
type DeepReadonly<T> = T extends object
  ? { readonly [P in keyof T]: DeepReadonly<T[P]> }
  : T

// Nullable - add null to type
type Nullable<T> = T | null

// NonEmptyArray - array with at least one element
type NonEmptyArray<T> = [T, ...T[]]

function firstElement<T>(arr: NonEmptyArray<T>): T {
  return arr[0] // No undefined risk
}

// RequireAtLeastOne - at least one property required
type RequireAtLeastOne<T, Keys extends keyof T = keyof T> =
  Pick<T, Exclude<keyof T, Keys>> &
  {
    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
  }[Keys]

type SearchParams = RequireAtLeastOne<{
  id?: string
  email?: string
  name?: string
}, 'id' | 'email' | 'name'>

// Must provide at least one of id, email, or name
const validSearch: SearchParams = { email: 'test@test.com' }

// Prettify - expand type for better IDE display
type Prettify<T> = {
  [K in keyof T]: T[K]
} & {}

// MergeTypes - merge two types with second overriding first
type MergeTypes<T, U> = Prettify<Omit<T, keyof U> & U>

Template Literal Types

// Event names
type EventName = `on${Capitalize<string>}`

// HTTP methods
type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
type ApiEndpoint = `/${string}`
type ApiRoute = `${HttpMethod} ${ApiEndpoint}`

const route: ApiRoute = 'GET /users'

// Property paths
type PropPath<T, Prefix extends string = ''> = T extends object
  ? {
      [K in keyof T & string]: K | `${K}.${PropPath<T[K], ''>}`
    }[keyof T & string]
  : never

interface Config {
  database: {
    host: string
    port: number
  }
  cache: {
    enabled: boolean
  }
}

type ConfigPath = PropPath<Config>
// 'database' | 'database.host' | 'database.port' | 'cache' | 'cache.enabled'

// CSS units
type CSSUnit = 'px' | 'em' | 'rem' | '%' | 'vh' | 'vw'
type CSSValue = `${number}${CSSUnit}`

const width: CSSValue = '100px'
const height: CSSValue = '50vh'

Conditional Types

// Basic conditional
type IsString<T> = T extends string ? true : false
type A = IsString<string> // true
type B = IsString<number> // false

// Infer keyword
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T
type UnwrapArray<T> = T extends (infer U)[] ? U : T

type X = UnwrapPromise<Promise<string>> // string
type Y = UnwrapArray<number[]> // number

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

// Extract function argument types
type GetFirstArg<T> = T extends (first: infer F, ...args: any[]) => any ? F : never

// Distributive conditional types
type ToArray<T> = T extends any ? T[] : never
type StrOrNumArray = ToArray<string | number>
// string[] | number[]

// Prevent distribution with tuple
type ToArrayNonDist<T> = [T] extends [any] ? T[] : never
type StrOrNumArraySingle = ToArrayNonDist<string | number>
// (string | number)[]

Mapped Types

// Basic mapped type
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
}

interface Person {
  name: string
  age: number
}

type PersonGetters = Getters<Person>
// { getName: () => string; getAge: () => number }

// Filter properties
type FilterByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K]
}

type StringProps = FilterByType<Person, string>
// { name: string }

// Make specific properties required
type RequireProps<T, K extends keyof T> = T & Required<Pick<T, K>>

interface Config {
  host?: string
  port?: number
  debug?: boolean
}

type RequiredHostConfig = RequireProps<Config, 'host'>
// { host: string; port?: number; debug?: boolean }

// Mutable - remove readonly
type Mutable<T> = {
  -readonly [K in keyof T]: T[K]
}

Generic Constraints

// Basic constraint
function getLength<T extends { length: number }>(item: T): number {
  return item.length
}

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

// Constructor constraint
type Constructor<T = {}> = new (...args: any[]) => T

function createInstance<T>(ctor: Constructor<T>): T {
  return new ctor()
}

// Multiple constraints
interface Identifiable { id: string }
interface Timestamped { createdAt: Date }

function processEntity<T extends Identifiable & Timestamped>(entity: T) {
  console.log(entity.id, entity.createdAt)
}

// Default type parameter
function createArray<T = string>(length: number, value: T): T[] {
  return Array(length).fill(value)
}

const strings = createArray(3, 'hello') // string[]
const numbers = createArray<number>(3, 42) // number[]

Branded Types

// Create distinct types for primitive values
declare const brand: unique symbol

type Brand<T, B> = T & { [brand]: B }

type UserId = Brand<string, 'UserId'>
type PostId = Brand<string, 'PostId'>
type Email = Brand<string, 'Email'>

// Constructor functions
function UserId(id: string): UserId {
  return id as UserId
}

function PostId(id: string): PostId {
  return id as PostId
}

function Email(email: string): Email {
  if (!email.includes('@')) {
    throw new Error('Invalid email')
  }
  return email as Email
}

// Usage - prevents mixing IDs
function getUser(id: UserId): User {
  // ...
}

function getPost(id: PostId): Post {
  // ...
}

const userId = UserId('user-123')
const postId = PostId('post-456')

getUser(userId) // OK
// getUser(postId) // Error: PostId is not assignable to UserId

Type-Safe Event Emitter

type EventMap = Record<string, any[]>

class TypedEventEmitter<Events extends EventMap> {
  private listeners = new Map<keyof Events, Set<Function>>()

  on<E extends keyof Events>(
    event: E,
    listener: (...args: Events[E]) => void
  ): () => void {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set())
    }
    this.listeners.get(event)!.add(listener)

    return () => this.off(event, listener)
  }

  off<E extends keyof Events>(
    event: E,
    listener: (...args: Events[E]) => void
  ): void {
    this.listeners.get(event)?.delete(listener)
  }

  emit<E extends keyof Events>(event: E, ...args: Events[E]): void {
    this.listeners.get(event)?.forEach(listener => listener(...args))
  }
}

// Usage
interface AppEvents {
  userLoggedIn: [userId: string]
  userLoggedOut: []
  messageReceived: [message: string, from: string]
}

const emitter = new TypedEventEmitter<AppEvents>()

emitter.on('userLoggedIn', (userId) => {
  console.log(`User ${userId} logged in`)
})

emitter.on('messageReceived', (message, from) => {
  console.log(`${from}: ${message}`)
})

emitter.emit('userLoggedIn', 'user-123')
emitter.emit('messageReceived', 'Hello!', 'John')

Type-Safe Builder Pattern

type BuilderState = {
  name: boolean
  email: boolean
  age: boolean
}

type RequiredFields = 'name' | 'email'

class UserBuilder<State extends Partial<BuilderState> = {}> {
  private user: Partial<User> = {}

  setName(name: string): UserBuilder<State & { name: true }> {
    this.user.name = name
    return this as any
  }

  setEmail(email: string): UserBuilder<State & { email: true }> {
    this.user.email = email
    return this as any
  }

  setAge(age: number): UserBuilder<State & { age: true }> {
    this.user.age = age
    return this as any
  }

  build(
    this: UserBuilder<{ name: true; email: true }>
  ): User {
    return this.user as User
  }
}

// Usage
const user = new UserBuilder()
  .setName('John')
  .setEmail('john@example.com')
  .setAge(30)
  .build() // Only available after name and email are set

// const invalid = new UserBuilder()
//   .setName('John')
//   .build() // Error: email not set

Best Practices

1. Enable all strict flags - don't half-measure
2. Avoid any - use unknown and narrow
3. Use discriminated unions - for state machines
4. Prefer interfaces for objects - use types for unions/intersections
5. Use const assertions - for literal types
6. Leverage type inference - don't over-annotate
7. Use branded types - for domain primitives
8. Write type guards - for runtime safety
9. Use satisfies - for type checking without widening
10. Keep types close to usage - colocate when possible

Common Pitfalls

// Bad: any
function process(data: any) {}

// Good: unknown with narrowing
function process(data: unknown) {
  if (typeof data === 'string') {
    // data is string
  }
}

// Bad: type assertion without validation
const user = JSON.parse(data) as User

// Good: runtime validation
const user = parseUser(JSON.parse(data))

// Bad: ignoring null checks
function getName(user: User | null) {
  return user.name // Error in strict mode
}

// Good: proper null handling
function getName(user: User | null) {
  return user?.name ?? 'Unknown'
}

// Bad: object index without undefined check
const value = obj[key] // might be undefined

// Good: with noUncheckedIndexedAccess
const value = obj[key]
if (value !== undefined) {
  // use value
}