面试题：TypeScript联合类型在组件库开发复杂交互场景下的运用

Question

在一个自定义的UI组件库中，有一个按钮组件，该按钮可以有多种状态，比如'normal'（正常）、'loading'（加载中）、'disabled'（禁用）。按钮在不同状态下有不同的样式和交互逻辑。请使用TypeScript联合类型来定义按钮的状态类型，并实现一个函数，根据传入的状态类型，返回对应的样式类名和点击事件处理函数。同时要考虑到在状态转换过程中的类型安全性，防止错误状态的传入。

Answer 1

// 定义按钮状态的联合类型
type ButtonState = 'normal' | 'loading' | 'disabled';

// 定义样式类名和点击事件处理函数的类型
type ButtonStyleAndHandler = {
    className: string;
    onClick: () => void;
};

// 根据按钮状态返回对应的样式类名和点击事件处理函数
function getButtonStyleAndHandler(state: ButtonState): ButtonStyleAndHandler {
    switch (state) {
        case 'normal':
            return {
                className: 'btn-normal',
                onClick: () => console.log('Button clicked in normal state')
            };
        case 'loading':
            return {
                className: 'btn-loading',
                onClick: () => console.log('Button is in loading state, cannot click')
            };
        case 'disabled':
            return {
                className: 'btn-disabled',
                onClick: () => console.log('Button is disabled, cannot click')
            };
    }
}

这样，通过ButtonState联合类型确保了状态类型的安全性，在getButtonStyleAndHandler函数中根据不同状态返回对应的样式类名和点击事件处理函数。