TypeScript接口：定义数据结构的契约

引言

在软件开发过程中，数据结构是不可避免的。不同的数据结构用于描述不同的实体和关系。定义数据结构有时需要更为精确和严格的方式，以避免在多人合作或迭代过程中出现误解和错误。在这种情况下， TypeScript 接口就成为了一种强有力的工具，可以定义数据结构的契约，从而确保数据在应用程序中的正确性和可维护性。

但是，仅仅使用基本类型、数组和对象等数据类型并不足以满足复杂应用程序中的数据结构需求。这时， TypeScript 接口就可以派上用场了。

什么是接口

• 在 TypeScript 中，接口是指一组方法和属性的声明，用于定义一个对象的形状。它只定义了对象所应该有的成员，而不关心对象的具体实现。接口可以被类、函数、对象等各种类型实现，从而使得这些实现具有相同的形状和属性。
• 使用接口可以方便地定义类型，从而避免了在代码中使用硬编码来定义对象的类型。它可以让代码更加清晰、可读、可维护，同时也可以提高代码的复用性和可扩展性。

接口的定义

• 接口的定义使用 interface 关键字，语法如下：

  interface InterfaceName {
      property1: type1;
      property2: type2;
      method1(param1: type1, param2: type2): returnType;
      method2(param1: type1): void;
  }
  

• 其中，InterfaceName 指定了接口的名称，property1、property2 是接口的属性，method1、method2 是接口的方法。属性和方法都有自己的名称和类型声明。
• 下面是一个简单的接口定义例子：

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

• 这个接口定义了一个 Person 类型，它有两个属性和一个方法。 name 和 age 属性分别是字符串和数字类型， sayHi 方法没有参数，返回值为空。

接口的实现

• 在 TypeScript 中，接口可以被任何类型实现，包括类、函数、对象等。当一个类型实现了某个接口时，它必须满足该接口的所有定义，包括属性和方法的类型和名称。
• 下面是一个类实现接口的例子：

  interface Person {
      name: string;
      age: number;
      sayHi(): void;
  }
  
  class Student implements Person {
      name: string;
      age: number;
      constructor(name: string, age: number) {
          this.name = name;
          this.age = age;
      }
      sayHi(): void {
          console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old.`);
      }
  }
  
  const student = new Student("Alice", 18);
  student.sayHi();
  

• 在这个例子中，我们定义了一个 Person 接口，并让Student类实现了该接口。在Student类中，我们定义了 name 和 age 属性，并实现了 sayHi 方法。由于 Student 类实现了 Person 接口，因此它必须满足接口的所有定义。在实例化这个类时，可以看到输出了正确的信息。

TypeScript接口的继承

• TypeScript 接口也可以 继承其他接口 ，从而可以更好地描述数据结构的关系。以下是一个继承接口的例子：

  interface Cancer {
      name: string;
      symptom: string;
  }
  
  interface LungCancer extends Cancer {
      smoking: boolean;
  }
  

• 上面的代码定义了两个接口，“ Cancer ”和“ LungCancer ”。显然，“ LungCancer ”继承了“ Cancer ”的属性，并增加了一个“ smoking ”属性。这种方式可以方便地描述数据结构的层次关系。

接口的可选属性和只读属性

可选属性

• 有时候我们定义的数据结构并不一定需要所有的属性，在这种情况下，我们可以使用可选属性。可选属性在属性名后面加上一个 ? 标记，表示该属性是可选的。例如：

  interface Person {
      name: string;
      age?: number;
      sayHi(): void;
  }
  
  const person1: Person = {
      name: "Bob",
      sayHi() {
          console.log(`Hi, my name is ${this.name}.`);
      },
  };
  
  const person2: Person = {
      name: "Alice",
      age: 18,
      sayHi() {
          console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old.`);
      },
  };
  

• 在这个例子中， Person 接口的 age 属性是可选的，因此我们可以在实现该接口的对象中省略 age 属性。在上面的 person1 对象中，我们只实现了 name 和 sayHi 属性，而没有实现 age 属性。在 person2 对象中，我们实现了所有的属性和方法。

只读属性

• 另外，有些时候我们希望定义一些只读的属性，这些属性只能在声明时被赋值，之后就不能被修改了。在 TypeScript 中，我们可以使用 readonly 关键字来定义只读属性。例如：

  interface Person {
      readonly name: string;
      age?: number;
      sayHi(): void;
  }
  
  const person: Person = {
      name: "Alice",
      age: 18,
      sayHi() {
          console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old.`);
      },
  };
  
  person.name = "Bob"; // 编译错误，只读属性不能被修改
  

• 在这个例子中，我们定义了一个 Person 接口，并将 name 属性定义为只读属性。在实现该接口的对象中，我们无法修改 name 属性的值，因此在赋值时会出现编译错误。

TypeScript接口的函数类型

• 在 TypeScript 中，接口不仅可以描述对象，还可以描述函数类型。以下是一个函数类型的例子：

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

• 上面的代码定义了一个函数类型的接口“ SearchFunc ”，它描述了一个具有两个参数和一个布尔类型返回值的函数。在实例化这个函数类型的时候，“ mySearch ”变量被赋值为符合这个函数类型的函数。

TypeScript接口的类类型

• 在 TypeScript 中，接口还可以描述类的属性和方法。以下是一个例子：

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

• 上面的代码定义了一个接口“ ClockInterface ”，它描述了一个具有“ currentTime ”和“ setTime ”方法的类。然后，我们定义了一个“ Clock ”类，并实现了这个接口。当我们实例化这个类的时候，它必须符合接口的描述，即含有“ currentTime ”属性和“ setTime ”方法。

总结

在 TypeScript 中，接口是定义数据结构的契约，用于确保代码的健壮性和可维护性。它可以被任何类型实现，包括类、函数、对象等。接口可以定义属性、方法、可选属性、只读属性等，从而使代码更加清晰、可读、可维护。接口的使用可以提高代码的复用性和可扩展性，是 TypeScript 中一个非常重要的概念。