What Are Discriminated Unions?
Discriminated unions are a powerful TypeScript feature for modeling data that can take on one of several distinct, but related, forms. A discriminated union is a union of object types that each contain a special, shared property—called the discriminant property—which has a literal type unique to each variant. This discriminant property allows TypeScript to reliably determine which variant of the union you are working with at any point in your code. By leveraging discriminated unions, you can express variant data shapes more safely than with traditional unions, because the discriminant property gives TypeScript a clear, type-safe way to narrow down which type is present.
With traditional unions, you might combine several types into a single union, but you have to rely on checking for the presence or type of various properties, which can be error-prone and less maintainable. Discriminated unions solve this by requiring each variant to have a uniquely identifying property, making it much easier for both you and TypeScript to write safe, robust code.
123456789101112type Shape = | { kind: "circle"; radius: number } | { kind: "rectangle"; width: number; height: number }; function area(shape: Shape): number { if (shape.kind === "circle") { return Math.PI * shape.radius * shape.radius; } else { // Here, TypeScript knows shape is a rectangle return shape.width * shape.height; } }
In this example, the Shape type is a discriminated union of two variants: one representing a circle and one representing a rectangle. Both variants have a kind property, but each assigns it a unique literal value: "circle" or "rectangle". This kind property is the discriminant property. When you check shape.kind, TypeScript can automatically narrow the type of shape to the correct variant, so you get full type safety and autocompletion for the relevant properties.
Discriminated unions make your code safer because you cannot accidentally access properties that do not exist on a given variant. The compiler will catch these errors for you. They also make your code more maintainable, as adding new variants or changing existing ones is straightforward and less likely to introduce subtle bugs. Compared to traditional unions—which might require manual property checks and type assertions—discriminated unions are more robust and easier to reason about, especially as your codebase grows.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain how discriminated unions differ from regular unions in more detail?
Can you show more examples of discriminated unions in TypeScript?
What are some common use cases for discriminated unions?
Awesome!
Completion rate improved to 5.88What Are Discriminated Unions?
Veeg om het menu te tonen
Discriminated unions are a powerful TypeScript feature for modeling data that can take on one of several distinct, but related, forms. A discriminated union is a union of object types that each contain a special, shared property—called the discriminant property—which has a literal type unique to each variant. This discriminant property allows TypeScript to reliably determine which variant of the union you are working with at any point in your code. By leveraging discriminated unions, you can express variant data shapes more safely than with traditional unions, because the discriminant property gives TypeScript a clear, type-safe way to narrow down which type is present.
With traditional unions, you might combine several types into a single union, but you have to rely on checking for the presence or type of various properties, which can be error-prone and less maintainable. Discriminated unions solve this by requiring each variant to have a uniquely identifying property, making it much easier for both you and TypeScript to write safe, robust code.
123456789101112type Shape = | { kind: "circle"; radius: number } | { kind: "rectangle"; width: number; height: number }; function area(shape: Shape): number { if (shape.kind === "circle") { return Math.PI * shape.radius * shape.radius; } else { // Here, TypeScript knows shape is a rectangle return shape.width * shape.height; } }
In this example, the Shape type is a discriminated union of two variants: one representing a circle and one representing a rectangle. Both variants have a kind property, but each assigns it a unique literal value: "circle" or "rectangle". This kind property is the discriminant property. When you check shape.kind, TypeScript can automatically narrow the type of shape to the correct variant, so you get full type safety and autocompletion for the relevant properties.
Discriminated unions make your code safer because you cannot accidentally access properties that do not exist on a given variant. The compiler will catch these errors for you. They also make your code more maintainable, as adding new variants or changing existing ones is straightforward and less likely to introduce subtle bugs. Compared to traditional unions—which might require manual property checks and type assertions—discriminated unions are more robust and easier to reason about, especially as your codebase grows.
Bedankt voor je feedback!
