Discriminated unions là gì?

Trong Typescript, discriminated unions nghĩa là khi bạn tạo một đối tượng (object), với một thành viên (member) có thể được sử dụng để phân biệt giữa hai union khác nhau. Ví dụ về một hàm (function) tính bình phương của các hình dạng khác nhau: hình chữ nhật và hình tròn. Chúng ta sẽ bắt đầu bằng cách định nghĩa kiểu dữ liệu (type) Rectangle và Circle.

type Rectangle = {
    shape: "reactangle",
    width: number;
    height: number;
}

type Circle = {
    shape: "circle"
    radius: number;
}

Từ các kiểu dữ liệu trên, mỗi đối tượng sẽ có trường (field) shape, có thể là circle hoặc rectangle. Chúng ta có thể sử dụng trường shape trong hàm của mình để tính diện tích, trường đó sẽ chấp nhận union của Rectangle và Circle, như được hiển thị bên dưới:

function calculateArea(shape: Rectangle | Circle) {
    if(shape.shape === "reactangle") {
        // you can only access the properties of reactangle and not circle
        console.log("Area of reactangle: " + shape.height * shape.width);
    }

    if(shape.shape === "circle") {
        // you can only access the properties of circle and not reactangle
        console.log("Area of circle: " + 3.14 * shape.radius * shape.radius);
    }
}

Khi trường shape là rectangle, bạn chỉ có quyền truy cập vào các thuộc tính có sẵn trong kiểu dữ liệu Rectangle, đó là width, height và shape. Điều tương tự cũng áp dụng khi trường shape là circle, Typescript sẽ chỉ cho phép bạn truy cập radius và shape và nếu không sẽ xuất hiện một lỗi.