本文共 3323 字，大约阅读时间需要 11 分钟。

TypeScript 接口与类继承关系详解

TypeScript 中接口和类之间的继承关系是一个非常重要且灵活的概念，能够帮助开发者更好地组织代码结构。以下将从接口的基本用法、可索引类型、类类型、以及接口与类的继承关系入手，逐步阐述其复杂性和应用场景。

1. 函数类型接口

函数类型接口用于描述 JavaScript 中对象的外形，尤其适用于函数类型的定义。

示例

interface SearchFunc {    (source: string, subString: string): boolean;}let mySearch: SearchFunc = function (source: string, sub: string): boolean {    let result = source.search(sub);    return result > -1;};

• 特点：函数类型接口定义了一个调用签名，包含参数列表和返回值类型。
• 灵活性：函数的参数名不需与接口一致，TypeScript会逐个检查参数类型的兼容性。
• 推断：如果不指定类型，TypeScript会自动推断。

2. 可索引的类型

可索引类型用于描述可以通过索引访问的对象，适用于字典或数组等结构。

示例

interface StringArray {    [index: number]: string;}let myArray: StringArray = ["Bob", "Fred"];let myStr: string = myArray[0];

• 索引签名：支持两种类型，number 和 string。
• 兼容性：数字索引返回值必须是字符串索引类型的子类型。
• 示例错误：

interface NumberDictionary {    [index: string]: number;    length: number;    name: string; // 错误，`name`的类型与索引类型返回值不匹配}

读写分离

interface ReadonlyStringArray {    readonly [index: number]: string;}let myArray: ReadonlyStringArray = ["Alice", "Bob"];// myArray[2] = "Mallory"; // 错误，索引属性不可写

3. 类类型

类类型用于描述类的结构及其成员，支持静态属性、静态方法、实例属性和实例方法。

示例

interface ClockInterface {    currentTime: Date;    setTime(d: Date): void;}class Clock implements ClockInterface {    currentTime: Date;    setTime(d: Date) {        this.currentTime = d;    }    constructor(h: number, m: number) {}}

• 静态成员：如静态方法和静态属性，用 static 关键字标记。
• 实例成员：如实例属性和实例方法，无需标记。

4. 接口继承

接口可以继承其他接口，形成多接口继承关系，适用于代码重用和模块化。

示例

interface Shape {    color: string;}interface Square extends Shape {    sideLength: number;}let square: Square = {}; // 错误，缺少 `color` 和 `sideLength`square.color = "blue";square.sideLength = 10;

• 多继承：接口可以同时继承多个接口。
• 示例多继承：

interface Shape {    color: string;}interface PenStroke {    penWidth: number;}interface Square extends Shape, PenStroke {    sideLength: number;}let square: Square = {};square.color = "blue";square.sideLength = 10;square.penWidth = 5.0; // 正确

5. 混合类型

一个接口可以同时定义方法和属性，适用于既可以作为函数又可以作为对象的场景。

示例

interface Counter {    (start: number): string;    interval: number;    reset(): void;}function getCounter(): Counter {    let counter = function (start: number) {};    counter.interval = 123;    counter.reset = function () {};    return counter;}let c = getCounter();c(10); // 输出 "10"c.reset();c.interval = 5.0; // 正确

6. 接口继承类

当接口继承了一个类类型时，它会继承类的成员但不提供实现。适用于代码抽象和复用。

示例

class Control {    private state: any;}interface SelectableControl extends Control {    select(): void;}class Button extends Control implements SelectableControl {    select() {}}// 正常用法：const button = new Button();button.select();

• 注意事项：接口继承类时，私有成员只能在类的子类中实现。
• 示例错误：

class Image implements SelectableControl {    select() {}}

• 正确做法：Image 必须继承 Control 类。

7. 类继承接口

类可以实现接口，确保类具备接口定义的所有属性和方法。

示例

interface ClockConstructor {    new (hour: number, minute: number): ClockInterface;}interface ClockInterface {    tick(): void;}class DigitalClock implements ClockInterface {    constructor(h: number, m: number) {}    tick() {        console.log("beep beep");    }}class AnalogClock implements ClockInterface {    constructor(h: number, m: number) {}    tick() {        console.log("tick tock");    }}const digital = new DigitalClock(12, 17);const analog = new AnalogClock(7, 32);

• 实现要求：类必须定义接口中的所有属性和方法。
• 静态成员：不属于实例成员，需手动标记。

总结

TypeScript 的接口和类继承关系为开发者提供了强大的类型系统，能够清晰地组织和复用代码。通过合理使用接口和类继承，可以显著提升代码的可维护性和复用性。在实际开发中，建议根据项目需求合理选择继承关系，并仔细处理私有成员的访问权限。