面试题：TypeScript 类型守卫在前端复杂交互逻辑中的应用

Question

在一个前端项目中，有一个通用的按钮组件，根据不同的业务场景，按钮可能处于 'loading'、'disabled' 或 'normal' 状态，并且每种状态下的交互逻辑不同。请使用 TypeScript 的类型守卫来实现这个按钮组件，确保在不同状态下执行正确的逻辑，同时要求代码具备良好的可维护性和扩展性。请详细描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 定义状态类型：使用 TypeScript 的 enum 定义按钮的三种状态：loading、disabled、normal。
2. 定义按钮组件类型：创建一个包含状态和对应交互逻辑函数的类型。
3. 类型守卫函数：编写类型守卫函数，用于判断按钮当前的状态，并根据状态执行相应的逻辑。

关键代码片段

// 定义按钮状态枚举
enum ButtonState {
    Loading = 'loading',
    Disabled = 'disabled',
    Normal = 'normal'
}

// 定义按钮组件类型
type ButtonComponent = {
    state: ButtonState;
    onClick: () => void;
};

// 类型守卫函数
function handleButtonClick(button: ButtonComponent) {
    if (button.state === ButtonState.Loading) {
        console.log('按钮处于loading状态，无法点击');
    } else if (button.state === ButtonState.Disabled) {
        console.log('按钮处于disabled状态，无法点击');
    } else if (button.state === ButtonState.Normal) {
        button.onClick();
    }
}

// 示例按钮组件
const myButton: ButtonComponent = {
    state: ButtonState.Normal,
    onClick: () => {
        console.log('按钮被点击');
    }
};

// 调用类型守卫函数
handleButtonClick(myButton);