面试题：TypeScript中接口和类型别名在定义函数类型时的区别

Question

请阐述在TypeScript里，使用接口和类型别名来定义函数类型有哪些不同之处，并分别给出代码示例。

Answer 1

不同之处

1. 可扩展性
   • 接口：可以通过 extends 关键字进行扩展，多次声明同一个接口时，会自动合并其成员。
   • 类型别名：不能被扩展，重新声明会报错。类型别名可以通过交叉类型 & 来达到类似扩展的效果，但本质上与接口的扩展机制不同。
2. 实现方式
   • 接口：主要用于定义对象类型结构，也可用于定义函数类型。它更侧重于对对象形状的描述。
   • 类型别名：可以定义任何类型，包括基本类型、联合类型、元组类型等，定义函数类型只是其中一种应用场景。
3. 声明合并
   • 接口：支持声明合并，即可以多次定义同名接口，编译器会将它们合并成一个接口。
   • 类型别名：不支持声明合并，重复声明相同名称的类型别名会报错。

代码示例

1. 使用接口定义函数类型

// 定义一个接口来描述函数类型
interface AddFunction {
    (a: number, b: number): number;
}

// 使用接口定义函数
const add: AddFunction = (a, b) => a + b;

2. 使用类型别名定义函数类型

// 使用类型别名定义函数类型
type MultiplyFunction = (a: number, b: number) => number;

// 使用类型别名定义函数
const multiply: MultiplyFunction = (a, b) => a * b;

接口扩展示例

interface BaseFunction {
    (): void;
}

interface ExtendedFunction extends BaseFunction {
    (param: string): void;
}

const myFunction: ExtendedFunction = (param?: string) => {
    if (param) {
        console.log(param);
    } else {
        console.log('No param');
    }
};

类型别名交叉类型模拟扩展示例

type BaseType = () => void;
type ExtendedType = BaseType & ((param: string) => void);

const myOtherFunction: ExtendedType = (param?: string) => {
    if (param) {
        console.log(param);
    } else {
        console.log('No param');
    }
};