跳到主要内容

什么是类型接口？

下文默认基于 TypeScript 5.x，并假设开启 strict: true。

面试速答（30 秒版 TL;DR）​

  • 类型接口通常就是指 TypeScript 里的 interface。
  • 它的作用是：在编译阶段描述一个对象、函数、类实例应该满足什么结构。
  • 重点不是“有个接口关键字”，而是它体现了 TypeScript 的核心思想：
    • 按结构检查；
    • 用契约约束协作；
    • 让实现和使用方在编译期对齐。
  • interface 只存在于类型系统里，运行到 JavaScript 后不会保留。

1. 最简单的理解：给“形状”立规矩​

interface User {
  id: number;
  name: string;
  age?: number;
}

const user: User = {
  id: 1,
  name: "Tom",
};

这段代码的含义不是“创建了一个运行时对象模板”，而是：

  • 任何被当成 User 使用的值；
  • 至少要满足 id 和 name 这套结构约束。

2. 为什么叫“接口”​

因为它表达的是：

  • 外部能看到什么；
  • 调用方能依赖什么；
  • 实现方必须提供什么。

也就是常说的“契约”。

比如团队协作时：

  • 后端约定返回字段；
  • 组件约定 props 结构；
  • 类约定必须实现哪些方法；

都很适合用接口表达。

3. 接口最常见的几种写法​

3.1 描述对象结构​

interface Product {
  id: string;
  title: string;
  price: number;
  tags?: string[];
}

3.2 描述函数签名​

interface Formatter {
  (value: number): string;
}

const formatPrice: Formatter = (value) => `¥${value}`;

3.3 描述类实例应具备的能力​

interface Logger {
  log(message: string): void;
}

class ConsoleLogger implements Logger {
  log(message: string) {
    console.log(message);
  }
}

4. 接口为什么适合面试里的“对象建模题”​

因为它很贴近业务语言。

例如：

interface PageResult<T> {
  list: T[];
  total: number;
  page: number;
  pageSize: number;
}

这类写法传达的信息很清楚：

  • 这是一个分页结果；
  • T 决定列表项类型；
  • 其他字段是固定契约。

也就是说，接口在工程里最大的价值不是“语法”，而是把领域模型表达清楚。

5. 接口有哪些常见能力​

5.1 可选属性​

interface Config {
  baseURL: string;
  timeout?: number;
}

5.2 只读属性​

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

5.3 索引签名​

interface StringMap {
  [key: string]: string;
}

5.4 继承接口​

interface Animal {
  name: string;
}

interface Dog extends Animal {
  bark(): void;
}

5.5 声明合并​

interface AppConfig {
  apiBase: string;
}

interface AppConfig {
  retry?: number;
}

这在第三方库补充声明里很常见。

6. 接口的本质是结构类型，不是名义类型​

TypeScript 默认是结构化类型系统（structural typing）。

interface User {
  name: string;
}

const person = { name: "Jerry", age: 20 };

const user: User = person;

之所以允许，是因为：

  • person 至少满足 User 需要的结构；
  • TypeScript 关心“长得像不像”，不是“你是不是显式声明成这个接口”。

7. 高频面试题标准答法​

7.1 接口和类有什么区别​

  • 接口只描述结构，不提供实现；
  • 类既有类型信息，也有运行时实现。

7.2 接口在运行时存在吗​

不存在。

编译成 JavaScript 后，接口会被完全擦除。

7.3 接口能不能描述函数​

能，不只可以描述对象，还可以描述：

  • 函数签名；
  • 构造函数签名；
  • 类实例结构。

8. 常见误区​

  • 误区 1：以为接口只能给对象用。
    • 实际上函数、类实例都能描述。
  • 误区 2：以为接口会生成运行时代码。
    • 不会，它只参与编译期检查。
  • 误区 3：把接口当成“后端 Java/C# 那种运行时接口”。
    • TypeScript 的接口本质是类型系统契约。

速记要点​

  • 类型接口就是用 interface 描述结构契约。
  • 常用于对象模型、函数签名、类实现约束。
  • 它只存在编译期，不存在运行时。