Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt

Use this file to discover all available pages before exploring further.

The | operator in TypeScript denotes a Union Type, constructing a new type that represents a value capable of satisfying at least one of several constituent types. In type theory, it functions as an inclusive logical disjunction (OR) at the type level. Because TypeScript utilizes structural typing, a union does not enforce mutual exclusivity (XOR); a value can satisfy multiple constituent types simultaneously. The operator expands the set of permissible values for a given binding while strictly limiting the immediately accessible properties to the intersection of the constituent types’ members. 
type PrimitiveUnion = string | number | boolean;
Type Mechanics and Property Access When the TypeScript compiler evaluates a union type, it enforces strict structural safety. If a variable is typed as A | B, the compiler only permits access to members (properties or methods) that are common to both A and B. Because unions are inclusive, an object containing properties from multiple constituent types is perfectly assignable to the union. 
interface TypeA {
  sharedProp: string;
  uniqueToA: number;
}

interface TypeB {
  sharedProp: string;
  uniqueToB: boolean;
}

declare const value: TypeA | TypeB;

value.sharedProp; // Valid: Exists in both TypeA and TypeB
value.uniqueToA;  // Error: Property 'uniqueToA' does not exist on type 'TypeA | TypeB'

// Valid: Satisfies the structural requirements of both TypeA and TypeB (Inclusive OR)
const combinedValue: TypeA | TypeB = {
  sharedProp: "test",
  uniqueToA: 1,
  uniqueToB: true
};
Control Flow Analysis and Narrowing Because the compiler restricts access to shared members, interacting with type-specific members requires type narrowing. TypeScript utilizes control flow analysis to reduce a union type to a specific constituent type within a given lexical scope. This is achieved via type guards (e.g., typeof, instanceof, the in operator, or custom type predicates). 
if ('uniqueToA' in value) {
  // Compiler narrows 'value' to TypeA within this block
  value.uniqueToA; 
}
Literal Unions The | operator is frequently applied to literal types (string, number, or boolean literals) to define a finite, discrete set of exact permissible values, effectively creating an enumeration at the type level. 
type State = "pending" | "fulfilled" | "rejected";
type Binary = 0 | 1;
Discriminated (Tagged) Unions A core structural pattern reliant on the | operator is the discriminated union. This occurs when all constituent types in a union share a common, literal-typed property (the discriminant). The compiler uses this discriminant to perform exhaustive type checking and precise narrowing across the union. 
interface Circle {
  kind: "circle"; // Discriminant
  radius: number;
}

interface Square {
  kind: "square"; // Discriminant
  sideLength: number;
}

type Shape = Circle | Square;
Master TypeScript with Deep Grasping Methodology!Learn More