TypeScript 接口

接口是 TypeScript 中一个非常重要的概念,它用于定义对象的类型。通过接口,我们可以为对象、函数、类等定义一种约束或契约。接口描述了对象应该具有的属性和方法,但不提供具体实现。这使得我们能够在编译阶段对类型进行检查,提高代码的可维护性和可读性。

对象接口

对象接口用于描述对象应该具有的属性和方法。我们可以使用interface关键字定义一个对象接口。例如:

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

上面的代码定义了一个Person接口,它要求对象必须具有name和age属性,以及一个sayHello方法。

当我们创建一个实现了接口的对象时,TypeScript 会检查对象是否满足接口的要求:

const john: Person = {
  name: 'John',
  age: 30,
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

如果对象缺少接口要求的属性或方法,TypeScript 会在编译时报错。

函数接口

函数接口用于描述函数的参数类型和返回值类型。我们可以使用接口来定义函数的类型。例如:

interface MathOperation {
  (x: number, y: number): number;
}

const add: MathOperation = (a, b) => a + b;
const multiply: MathOperation = (a, b) => a * b;

上面的代码定义了一个MathOperation接口,它要求函数接受两个number类型的参数,并返回一个number类型的值。

我们可以使用这个接口来定义add和multiply函数,确保它们满足接口的要求。

类接口

类接口用于描述类应该具有的属性和方法。我们可以使用接口来定义类的结构。例如:

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

class Dog implements Animal {
  name: string;

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

  makeSound() {
    console.log('Woof!');
  }
}

上面的代码定义了一个Animal接口,它要求类必须具有name属性和makeSound方法。

我们可以使用implements关键字让Dog类实现Animal接口,确保类满足接口的要求。

接口特性

接口还有一些特殊的特性,可以让我们更灵活地定义对象的类型。

可选属性

我们可以在接口中使用?来标记可选属性。可选属性允许对象缺少某些属性。例如:

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

const john: Person = { name: 'John' }; // 合法
const jane: Person = { name: 'Jane', age: 25 }; // 合法

上面的代码中,age属性被标记为可选,因此john对象可以缺少age属性。

只读属性

我们可以在接口中使用readonly关键字来标记只读属性。只读属性只能在对象创建时被赋值,之后不能被修改。例如:

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

const p1: Point = { x: 10, y: 20 };
p1.x = 5; // 错误,x是只读属性

上面的代码中,x和y属性被标记为只读,因此在对象创建后不能被修改。

索引签名

我们可以在接口中使用索引签名来描述对象可以具有任意数量的属性。索引签名指定了属性的类型和返回值的类型。例如:

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

const myArray: StringArray = ['Hello', 'World'];
const myStr: string = myArray[0];

上面的代码中,StringArray接口使用索引签名[index: number]: string来描述一个字符串数组。它表示对象可以使用数字索引访问,并返回字符串类型的值。

继承接口

接口可以通过extends关键字继承其他接口。这允许我们在已有接口的基础上扩展新的属性和方法。例如:

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

const square: Square = {
  color: 'blue',
  sideLength: 10,
};

上面的代码中,Square接口继承了Shape接口,因此它具有color属性,并且还添加了sideLength属性。

接口可以继承多个接口

interface Button extends Shape, Clickable {
  label: string;
}