面试题：TypeScript多态性对前端框架组件复用的影响

Question

在一个大型前端项目中，如何利用TypeScript类的多态性来优化框架组件的复用？请从类型定义、继承与接口实现等方面进行分析，并给出具体代码示例。

Answer 1

类型定义

在TypeScript中，通过明确的类型定义可以增强代码的可读性与可维护性，为多态性奠定基础。例如，定义一个表示按钮的基类ButtonBase，其中的click方法接受一个Event类型参数：

class ButtonBase {
    click(event: Event) {
        console.log('Button clicked');
    }
}

继承

通过继承，可以创建具有不同行为的子类，实现多态性。比如，创建一个继承自ButtonBase的SubmitButton子类，并重写click方法以实现特定行为：

class SubmitButton extends ButtonBase {
    click(event: Event) {
        console.log('Submitting form...');
        // 这里可以添加提交表单的逻辑
    }
}

接口实现

接口可以定义一组方法签名，类通过实现接口来保证具有特定的行为。定义一个Clickable接口，然后让ButtonBase类实现它：

interface Clickable {
    click(event: Event): void;
}

class ButtonBase implements Clickable {
    click(event: Event) {
        console.log('Button clicked');
    }
}

具体代码示例

// 定义接口
interface Clickable {
    click(event: Event): void;
}

// 基类
class ButtonBase implements Clickable {
    click(event: Event) {
        console.log('Button clicked');
    }
}

// 子类
class SubmitButton extends ButtonBase {
    click(event: Event) {
        console.log('Submitting form...');
    }
}

// 使用多态
function handleClick(button: Clickable, event: Event) {
    button.click(event);
}

// 创建实例
const normalButton = new ButtonBase();
const submitButton = new SubmitButton();

// 模拟点击事件
const event = new MouseEvent('click');
handleClick(normalButton, event);
handleClick(submitButton, event);

在上述代码中，handleClick函数接受一个实现了Clickable接口的对象，无论是ButtonBase实例还是SubmitButton实例，都能正确调用相应的click方法，实现了多态性，从而在大型前端项目中，可以根据不同需求复用不同类型的按钮组件。