深入剖析TypeScript中的接口：揭开设计模式的面纱

2024-01-02 01:05:38

接口：TypeScript中的数据契约

TypeScript接口为对象定义了一个合同，规定了对象应具有的属性和方法。接口本身并不创建对象，而是定义了对象的行为和结构。理解接口在TypeScript中的作用至关重要，它有助于创建更健壮、更灵活、更可扩展的代码。

定义接口

接口使用interface定义，后跟接口名称和大括号。大括号内列出了接口的属性和方法：

interface Person {
  name: string;
  age: number;
  greet(): string;
}

上面的示例定义了一个Person接口，它包含三个成员：

name：字符串类型属性
age：数字类型属性
greet：无参数的字符串类型方法

可选属性和只读属性

接口可以包含可选属性和只读属性。可选属性允许对象具有该属性，但不是必须的。只读属性不允许修改其值，一旦赋值后就不能更改：

interface Person {
  name: string; // 必填属性
  age?: number; // 可选属性
  readonly id: string; // 只读属性
}

用接口声明函数

接口可以用来声明函数的类型。函数类型的接口定义了函数的参数类型和返回值类型：

interface Greetable {
  greet(name: string): string;
}

上面的接口定义了一个greet函数，它接收一个字符串参数并返回一个字符串。

可索引类型的接口

可索引类型的接口允许您使用索引语法访问对象中的属性：

interface StringArray {
  [index: number]: string;
}

上面的接口定义了一个StringArray类型，它允许使用数字索引访问字符串值。

声明的数组和map

接口可以用来声明数组和map的类型：

interface NumberArray {
  [index: number]: number;
}

interface StringMap {
  [key: string]: string;
}

上面的接口定义了一个NumberArray类型，它允许使用数字索引访问数字值。StringMap类型允许使用字符串键访问字符串值。

类类型和接口对类的约束

接口可以用来定义类类型，并约束类的行为：

interface Animal {
  name: string;
  eat(): void;
}

class Dog implements Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

上面的示例定义了一个Animal接口，它包含两个成员：name属性和eat方法。Dog类实现Animal接口，它提供了name属性和eat方法的实现。

接口的继承

接口可以继承其他接口，继承的接口可以拥有父接口的所有属性和方法：

interface Animal {
  name: string;
  eat(): void;
}

interface Dog extends Animal {
  bark(): void;
}

class GoldenRetriever implements Dog {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }

  bark() {
    console.log(`${this.name} is barking.`);
  }
}