用例子来说明。
- 标记联合类型实现多种支付方法
- 标记联合类型实现Todo
实现多种支付方法
有三种支付方法：
- 现金
- paypal：需要邮箱信息
- 信用卡：需要卡号和卡密
用代码表示即：
interface Cash {
kind: "cash";
}
interface PayPal {
kind: "paypal";
email: string;
}
interface CreditCard {
kind: "credit";
cardNumber: string;
securityCode: string;
}
注意，每种类型都有一个kind属性，即判别属性。它的作用在接下来的switch-case中体现。
然后我们定义一个PaymentMethod类型，它是我们上述定义的三个类型的联合：
type PaymentMethod = Cash | PayPal | CreditCard;
定义一个方法来解释我们的联合类型：
function describlePaymentMethod(method: PaymentMethod) {
switch (method.kind) {
case "cash": {
return "Cash";
}
case "paypal": {
return `PayPal(${
method.email})`;
}
case "credit": {
return `Credit card(${
method.cardNumber})`;
}
}
}
实现Todo
先定义一个Todo接口，表示它的内容和完成状态，注意是只读的。
interface Todo {
readonly text: string;
readonly done: boolean;
}
用户可以添加Todo和切换Todo的完成状态：type属性表示此接口类型。
interface AddTodo {
type: "Add_TODO";
text: string; //要添加的todo的内容
}
interface ToggleTodo {
type: "TOGGLE_TODO";
index: number;//要修改的todo下标
}
用联合标记类型表示用户的两种操作：
type ReduxAction = AddTodo | ToggleTodo;
用户操作的方法：
function todoReducer(
state: ReadonlyArray<Todo> = [],
action: ReduxAction
): ReadonlyArray<Todo> {
switch (action.type) {
case "Add_TODO": {
return [...state, {
text: action.text, done: false }];
}
case "TOGGLE_TODO": {
return state.map((item, index) => {
// 要改的不是此todo，放过
if (index !== action.index) {
return item;
}
return {
text: item.text,
done: !item.done,
};
});
}
default: {
return state;
}
}
}