序章：为什么要学习 TypeScript

0.1. JavaScript 的常见痛点

0.1.1. 瓶颈一：动态类型引发的运行时错误

痛点复盘：这是我们都经历过的经典场景。一个函数在开发时运行良好，但上线后，一个意料之外的 undefined 传入，瞬间引发了 TypeError，导致应用崩溃。这种在编码阶段无法预见的“幽灵”错误，是 JavaScript 动态类型带来的最大困扰。

问题代码示例：

1
2
3
4
5
6
7

function getProductTitle(product) {
  // 我们满怀信心地认为 product 对象上一定有 title 属性
  return product.title.toUpperCase();
}

// 实际运行时，传入了一个不符合预期的对象
getProductTitle({ name: "一个没有 title 的商品" });

1
TypeError: Cannot read properties of undefined (reading 'toUpperCase')

0.1.2. 瓶颈二：模糊的函数协作边界

痛点复盘：您精心编写了一个工具函数，它接收一个 config 对象。一个月后，当您自己或同事需要使用它时，那个曾经清晰的 config 结构早已模糊不清。我们不得不依赖可能早已过时的注释，或者花费大量时间去重新阅读源码。

问题代码示例：

1
2
3
4
5
6
7
8
9
10

function createReport(config) {
  // 同事记忆中的字段是 title，而不是 reportTitle
  console.log(`正在创建报告: ${config.title}`); 
}

// 调用者对数据结构记忆模糊，犯了拼写错误
createReport({ 
  reportTitle: "2025年度销售额报告",
  includeCharts: true
});

1
正在创建报告: undefined

0.2. TypeScript 提供的解决方案

上述两大瓶颈，本质上都源于同一个问题：不确定性。TypeScript 的核心价值，就是用一套强大的类型系统，将这种不确定性从“运行时”消除，移至“编码时”。

0.2.1. 方案一：用类型定义建立可靠契约

解决方案：我们不再依赖“口头约定”或注释，而是使用 interface 或 type 为所有数据结构创建一份 可被机器严格校验的“代码化契约”。

重构代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13

// 第一步：定义契约
interface Product {
  title: string;
}

// 第二步：函数应用契约
function getProductTitle(product: Product): string {
  return product.title.toUpperCase();
}

// 尝试传入不符合契约的对象，编辑器会立刻报错！
// 错误: 类型“{ name: string; }”的参数不能赋给类型“Product”的参数。
// getProductTitle({ name: "一个没有 title 的商品" });

0.2.2. 方案二：用函数签名固化协作边界

解决方案：TypeScript 的函数签名本身就是最强大、最精准的协作工具。我们为每个函数的输入（参数）和输出（返回值）都定义精确的类型。

重构代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

interface ReportConfig {
  title: string;
  includeCharts: boolean;
}

function createReport(config: ReportConfig): void {
  console.log(`正在创建报告: ${config.title}`);
}

// 尝试使用错误的属性名，编辑器会立刻报错并给出修正建议！
// 错误: 对象文字可以只指定已知属性，但“reportTitle”不在类型“ReportConfig”中。你是否指的是“title”?
/*
createReport({ 
  reportTitle: "2025 年度销售额报告",
  includeCharts: true
});
*/