接口与类型别名

这一课你将能做到

1. 用 interface 和 type 描述对象形状，并说清楚两者的适用场景
2. 正确使用可选属性 ?、只读属性 readonly、索引签名
3. 用 extends 继承和交叉类型 & 组合出复杂类型

为什么要学

JavaScript 里万物皆对象：API 返回的数据是对象、组件的 props 是对象、配置文件是对象。TS 的核心价值就是给这些对象「画形状」——这个对象必须有哪些字段、每个字段什么类型、哪些可缺省。

interface 和 type 就是画形状的两支笔。实际开发中 80% 的类型工作都是在写它们：定义后端返回的 DTO、定义表单的字段结构、定义组件的 props。这一课学会了，你就能读懂项目里绝大多数类型代码。

先建立图像

接口就是对象的「合同」：

合同（interface User）          签约方（实现该类型的对象）
┌─────────────────┐           ┌──────────────────────────┐
│ id:    number   │  ◀─────   │ { id: 1, name: "小明",    │
│ name:  string   │   必须符合  │   email: "a@b.com" }      │
│ email: string   │           │  ✓ 字段齐全、类型匹配       │
└─────────────────┘           └──────────────────────────┘
                                         │
                              { id: 1 }  │  ✗ 缺字段，编译报错

一句话：接口只关心形状，不关心来源。只要对象长对了样子，TS 就认——这叫「结构化类型」（鸭子类型：走起来像鸭子、叫起来像鸭子，那就是鸭子）。

跟着做

新建 interfaces-demo.ts，逐步跟练。

步骤 1：第一个接口

interface User {
  id: number;
  name: string;
  email: string;
}

function printUser(user: User): void {
  console.log(`#${user.id} ${user.name} <${user.email}>`);
}

printUser({ id: 1, name: "小明", email: "ming@example.com" });
// #1 小明 <ming@example.com>

// printUser({ id: 1, name: "小明" }); // 报错：缺少 email
// printUser({ id: "1", name: "小明", email: "x" }); // 报错：id 类型不对

步骤 2：可选属性与只读属性

interface Article {
  id: number;
  title: string;
  readonly createdAt: string;  // 只读：赋值后不能改
  summary?: string;            // 可选：可以没有
  tags?: string[];
}

const article: Article = {
  id: 1,
  title: "TypeScript 入门",
  createdAt: "2026-10-06",
  // summary 和 tags 都可以不写
};

article.title = "新标题";        // OK
// article.createdAt = "2026-01-01"; // 报错：readonly 不可修改

// 访问可选属性要处理 undefined
console.log(article.summary?.toUpperCase() ?? "暂无摘要"); // 暂无摘要

步骤 3：接口里的方法

interface Counter {
  count: number;
  increment(): void;         // 方法签名
  reset(to?: number): void;  // 带可选参数的方法
}

const counter: Counter = {
  count: 0,
  increment() {
    this.count++;
  },
  reset(to = 0) {
    this.count = to;
  },
};

counter.increment();
counter.increment();
console.log(counter.count); // 2
counter.reset(10);
console.log(counter.count); // 10