07 | 接口（1）：对象类型接口-TypeScript开发实战

当前位置:　首页>> 技术小册>> TypeScript开发实战

### 07 | 接口（1）：对象类型接口

在TypeScript的世界中，接口（Interfaces）是一种强大的工具，用于定义对象的形状，即对象中包含哪些属性以及这些属性的类型。接口不仅有助于代码的规范化和维护，还能在编译时期捕获类型错误，提高开发效率和软件质量。本章将深入探讨TypeScript中的对象类型接口，从基础概念到高级应用，逐步揭开其神秘面纱。

#### 一、接口的基本概念

在TypeScript中，接口是一个抽象的类型定义，它描述了对象的结构，但不实现它。接口可以包含属性、方法签名（但不实现方法体）以及索引签名等。接口的主要作用是作为类型注解使用，强制变量、函数参数或返回值等符合其定义的结构。

```typescript
interface Person {
  name: string;
  age: number;
  greet(): void; // 方法签名
}

let person: Person = {
  name: "Alice",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
```

在上述示例中，`Person`接口定义了三个成员：两个属性`name`和`age`，以及一个方法`greet`。然后，我们创建了一个`person`对象，它实现了`Person`接口所要求的结构。

#### 二、属性接口

属性接口是最基础的接口形式，仅包含属性的定义。在TypeScript中，任何具有相同属性的对象都可以被视为实现了该接口，无论它们是如何被创建的。

```typescript
interface SquareConfig {
  color?: string; // 可选属性
  width: number;
}

let mySquare = createSquare({ width: 10 });
```

在`SquareConfig`接口中，`color`属性是可选的（通过`?`标记），而`width`属性是必须的。`createSquare`函数接受一个`SquareConfig`类型的参数，并返回一个对象，该对象包含`color`和`area`属性。这里展示了如何在函数参数中使用接口，以及如何处理可选属性。

#### 三、只读属性

在接口中，我们可以将属性标记为只读，这意味着一旦属性被赋值后，其值就不能被修改。这通过使用`readonly`关键字实现。

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

let p1: Point = { x: 10, y: 20 };
// p1.x = 5; // 这将引发编译错误
```

在`Point`接口中，`x`和`y`属性都被标记为只读。尝试修改这些属性的值将会导致编译错误。

#### 四、接口中的函数类型

虽然接口主要用于描述对象的形状，但接口中的方法通常只包含签名，不包含实现。然而，这并不意味着接口不能用于描述函数类型。事实上，接口可以用来描述具有特定参数和返回类型的函数。

```typescript
interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  return source.search(subString) !== -1;
};
```

在上面的例子中，`SearchFunc`接口定义了一个函数类型，该函数接受两个字符串参数`source`和`subString`，并返回一个布尔值。然后，我们声明了一个`mySearch`变量，其类型为`SearchFunc`，并赋予了一个具体的函数实现。

#### 五、接口继承

接口之间也可以相互继承，这允许我们基于一个接口来定义另一个接口，从而复用属性和方法签名。

```typescript
interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

let square = {} as Square;
square.color = "blue";
square.sideLength = 10;
```

在上面的例子中，`Square`接口通过`extends`关键字继承了`Shape`接口，从而获得了`color`属性，并添加了`sideLength`属性。

#### 六、混合类型接口

TypeScript还允许创建混合类型的接口，即一个接口中既可以包含属性，也可以包含方法。此外，接口还可以描述一个对象可能同时作为函数和对象的类型。

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

function getCounter(): Counter {
  let count = 0;
  let interval: number;

const counter = function(start: number) {
    count = start;
    return `Counter initialized with ${start}`;
  };

counter.interval = 123;

counter.reset = function() {
    count = 0;
  };

return counter;
}

let c = getCounter();
console.log(c(10)); // "Counter initialized with 10"
console.log(c.interval); // 123
c.reset();
console.log(c(5)); // "Counter initialized with 5"
```

在上面的例子中，`Counter`接口描述了一个既可作为函数又可包含属性和方法的对象。这种混合类型的接口在JavaScript中尤为常见，特别是在使用模块或类库时。

#### 七、总结

对象类型接口是TypeScript中用于定义对象结构的重要工具。通过接口，我们可以确保代码的一致性和可维护性，同时利用TypeScript的类型检查能力来避免运行时错误。在本章中，我们学习了接口的基本概念、属性接口、只读属性、接口中的函数类型、接口继承以及混合类型接口等知识点。希望这些内容能帮助你更好地理解和使用TypeScript中的接口。在未来的章节中，我们将继续探索接口的高级应用，包括泛型接口、索引签名等，以进一步提升你的TypeScript编程技能。

该分类下的相关小册推荐：

TypeScript入门指南

剑指TypeScript

TypeScript 全面进阶指南