温馨提示×

接口

接口(Interfaces)是 TypeScript 中一个非常重要的概念,它用于定义对象的结构和类型。通过接口,我们可以定义对象应该具有的属性和方法,以确保代码的规范性和可读性。接口在面向对象编程中起着重要的作用,可以帮助我们更好地组织和管理代码。

基本概念

在 TypeScript 中,接口使用 interface 关键字进行定义。接口可以包含属性、方法或者索引签名等内容,具体语法如下:

interface InterfaceName {
  property1: type;
  property2: type;
  method(): returnType;
}

接口只是描述了对象的结构,不包含对象的实际实现。在定义接口时,通常声明对象应该具有的属性和方法的名称和类型,但不会指定具体的值。接口可以在定义对象类型时使用,帮助我们检查代码的正确性。

定义接口

我们可以定义一个简单的接口来描述一个具有 nameage 属性的对象:

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

function greet(person: Person) {
  return `Hello, ${person.name}!`;
}

let john: Person = { name: 'John', age: 30 };
console.log(greet(john)); // 输出:Hello, John!

在这个例子中,我们定义了一个 Person 接口,用于描述具有 nameage 属性的对象类型。然后我们定义了一个函数 greet,它接受一个 Person 类型的参数,并返回一个问候语。最后创建了一个符合 Person 接口定义的对象 john,并调用 greet 函数。

可选属性

接口的属性可以是可选的,即属性不是必须的。在定义接口时可以使用 ? 符号表示可选属性:

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

let p1: Point = { x: 10 };
let p2: Point = { x: 20, y: 30 };

在这个例子中,Point 接口中的 y 属性是可选的,可以选择性地添加到对象中。我们可以创建一个只包含 x 属性的对象 p1,也可以创建一个同时包含 xy 属性的对象 p2

只读属性

接口的属性可以是只读的,即不能被修改。可以使用 readonly 关键字来将属性设置为只读:

interface Circle {
  readonly radius: number;
}

let c: Circle = { radius: 5 };
c.radius = 10; // Error: Cannot assign to 'radius' because it is a read-only property.

在这个例子中,Circle 接口中的 radius 属性被标记为只读,创建对象后就无法修改其值。

函数类型

接口不仅可以描述对象的结构,也可以描述函数的结构。可以在接口中定义函数类型,并将接口作为函数的类型注释:

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

let add: Calculate = (a, b) => a + b;
console.log(add(10, 20)); // 输出:30

在这个例子中,我们定义了一个函数类型的接口 Calculate,表示接受两个参数并返回一个数字的函数。然后我们创建了一个满足 Calculate 接口定义的箭头函数 add,并调用该函数进行计算。

继承接口

接口可以继承其他接口,从而可以扩展接口的属性和方法。可以使用 extends 关键字来实现接口的继承:

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

let square: Square = { color: 'red', sideLength: 10 };

在这个例子中,Square 接口继承了 Shape 接口