What are branded types (opaque types) in TypeScript?
Why Interviewers Ask This
Senior TypeScript engineers are expected to reason about architecture, performance, and edge cases. This question separates mid-level from senior candidates by testing deep system-level understanding.
Answer
Since TypeScript uses structural typing, two types with the same structure are interchangeable — which is sometimes undesirable. Branded types (opaque types) use a phantom property trick to make structurally identical types incompatible, simulating nominal typing. Pattern: type UserId = string & { readonly _brand: "UserId" }; type PostId = string & { readonly _brand: "PostId" };. Both are strings at runtime, but TypeScript treats them as different types — you cannot accidentally pass a PostId where a UserId is expected. Create branded values with a cast: function toUserId(id: string): UserId { return id as UserId; }. Common use cases: ID types (user ID, order ID), validated values (SanitizedString, EmailAddress, ValidatedEmail), units (Meters, Kilograms). The phantom property (_brand) never exists at runtime — it is purely a type-system trick. More ergonomic with a helper: type Brand<T, B> = T & { readonly _brand: B }; type UserId = Brand<string, "UserId">;.
Pro Tip
Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex TypeScript answers easy to follow.
Previous
What is structural typing in TypeScript?
Next
What is the Variance annotation in TypeScript 4.7?
More TypeScript Questions
View all →- Advanced What is structural typing in TypeScript?
- Advanced What is the Variance annotation in TypeScript 4.7?
- Advanced What is the satisfies operator used for in TypeScript?
- Advanced How do you implement a deep partial type in TypeScript?
- Advanced What is the difference between interface and abstract class?