TypeScript中的标记联合类型：实现Todo代办

Tagged Union Types in TypeScript — Marius Schulz

用例子来说明。

• 标记联合类型实现多种支付方法
• 标记联合类型实现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;
		}
	}
}