TypeScript接口

栏目： typescript 发布时间：2024-11-01

在typescript中，接口（Interfaces）是一种强大的特性，它允许我们定义对象的形状，即对象应该有哪些属性以及这些属性的类型。接口在构建大型应用程序时特别有用，因为它们提供了一种方式来确保代码的一致性和可维护性。

1. 基本接口定义

接口使用interface关键字来定义。一个接口可以包含多个属性，这些属性定义了实现该接口的对象应该具有的结构。

interface Person {
  name: string;
  age: number;
}

在这个例子中，Person接口定义了两个属性：name（字符串类型）和age（数字类型）。

2. 实现接口

在TypeScript中，一个类可以实现一个或多个接口。实现接口的意思是类必须提供接口中定义的所有属性。

class Student implements Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

在这个例子中，Student类实现了Person接口。它提供了name和age两个属性，并且它们的类型与接口中定义的类型相匹配。

3. 可选属性

有时，接口中的某些属性可能不是必需的。在这种情况下，你可以使用?标记这些属性为可选的。

interface Address {
  street: string;
  city?: string; // 可选属性
}

在这个例子中，city属性是可选的，这意味着实现Address接口的对象可以没有city属性。

4. 只读属性

有些属性在对象被创建后就不应该被修改。在TypeScript中，你可以使用readonly关键字来定义只读属性。

interface Point {
  readonly x: number;
  readonly y: number;
}

在这个例子中，x和y属性都是只读的，这意味着一旦它们被赋值，就不能再被修改。

5. 函数类型接口

接口不仅可以描述对象的结构，还可以描述函数的形状。

interface AddFunc {
  (a: number, b: number): number;
}

在这个例子中，AddFunc接口描述了一个接受两个数字参数并返回一个数字的函数。

6. 可索引的类型

有时，你可能想描述一个数组或对象的索引签名。你可以使用索引类型来定义这些。

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

在这个例子中，StringArray接口描述了一个对象，它的索引是数字类型，并且对应的值是字符串类型。这基本上等同于一个字符串数组。

7. 继承接口

就像类可以继承类一样，接口也可以继承接口。这允许你创建一个新的接口，它包含另一个接口的所有成员，同时还可以添加新的成员。

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: string;
  department: string;
}

在这个例子中，Employee接口继承了Person接口，并添加了employeeId和department两个新的属性。

8. 混合类型

在TypeScript中，一个接口不仅可以包含属性，还可以包含方法。这允许你创建一个同时包含数据和行为的对象。

interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

然而，需要注意的是，上面的例子并不是一个典型的用法，因为它试图将函数类型的接口和包含属性和方法的接口混合在一起。在实际应用中，你可能会将函数类型的接口和对象类型的接口分开定义。

一个更常见的混合类型示例可能是定义一个包含属性和方法的类，然后定义一个接口来描述这个类的形状：

class CounterImpl {
  private count = 0;
  public interval: number = 123;

  constructor(start: number) {
    this.count = start;
  }

  public increment(): number {
    return this.count++;
  }

  public reset(): void {
    this.count = 0;
  }
}

interface Counter {
  interval: number;
  increment(): number;
  reset(): void;
}

const counter: Counter = new CounterImpl(10);
console.log(counter.increment()); // 输出: 10
console.log(counter.reset()); // 输出: undefined, 但计数器已重置

在这个例子中，CounterImpl类实现了Counter接口。注意，虽然Counter接口没有直接包含构造函数，但它描述了CounterImpl类应该具有的方法和属性。

接口是TypeScript中一个非常强大的特性，它允许你定义代码的结构和约束，从而提高代码的可读性、可维护性和可扩展性。

本文地址：https://www.tides.cn/p_typescript-interface