TypeScript Advanced Types

TypeScript Advanced Types: Intersection Types & Template Literal Types

Advanced types allow developers to create sophisticated type logic using intersection types (&), mapped type modifiers, and template literal types.

Intersection Types (&)

Intersection types combine multiple types into a single unified type containing all members of both constituent types.

interface HasId {
  id: string;
}

interface HasAudit {
  createdAt: Date;
  updatedAt: Date;
}

// Intersection type combining both interfaces
type Entity = HasId & HasAudit;

const record: Entity = {
  id: "ent_9918",
  createdAt: new Date(),
  updatedAt: new Date()
};

Template Literal Types

Template literal types build string literal types using template string syntax.

type EventKind = "click" | "hover" | "focus";
type Component = "button" | "input" | "modal";

// Generates: "button-click" | "button-hover" | "button-focus" | "input-click" ...
type ElementEvent = `${Component}-${EventKind}`;

const handleEvent = (event: ElementEvent) => {
  console.log("Triggered event:", event);
};

handleEvent("button-click");
handleEvent("modal-hover");
// handleEvent("card-click"); // Error: Argument of type '"card-click"' is not assignable to parameter of type 'ElementEvent'

Best Practices & Gotchas

• Use Intersection Types for Mixins: Combine modular traits into composite domain models.
• Leverage Template Literals for CSS & Route Typing: Define strict CSS property types (e.g. ${number}px or /${string}).
• Watch Out for Combinatorial Explosion: Intersecting large unions with template literal types can generate millions of permutations and slow down compiler performance.

Self-Check Challenge

Create a template literal type Route that prefixes any string with a forward slash (/${string}). Test it with "/dashboard".