How do narrowing and type guards work?

Understand the concept

Narrowing is TypeScript's process of reducing a broad type to a more specific type based on control flow and checks. A type guard is a check that gives the compiler evidence about a value, such as typeof, in or a custom predicate. Correct guards help application code safely use data that starts out uncertain.

Important ideas

• A check like typeof value === 'string' narrows the type.

• A custom guard can return value is User after checking required fields.

• A type assertion like as User does not validate anything.

• A custom predicate must really check the claimed shape; TypeScript trusts the predicate's return type.

• Check for null before using object properties, because runtime typeof null is "object".

Work through the example

function display(value: unknown): string {
  if (typeof value === 'string') return value.toUpperCase();
  if (typeof value === 'number') return value.toFixed(2);
  return 'Unsupported value';
}

• The checks narrow unknown before type-specific methods are used.