第 5 章 TypeScript：带"形状检查"的 JS

先看一眼，消除恐惧：

type Certificate = {
  id: string;
  owner: string;
  mintedAt: number;
};

function verify(cert: Certificate): boolean {
  return cert.id.length > 0;
}

现在做个实验：把所有冒号后面的标注和整个 type 块用手遮住——剩下的就是你上一章刚认识的 JS。这就是读 TS 的口诀：冒号后面是"形状说明"，不是逻辑。先遮住冒号读逻辑，再回头看形状。

形状说明在说什么？提前申报每个变量、每个参数长什么样：string 是文本，number 是数字，boolean 是真假，而 Certificate 是我们自定义的形状——"一张凭证必须有文本的 id、文本的 owner、数字的 mintedAt"。像海关申报单：过关前先declare箱子里装什么，机器一扫，不符就报警。你在 VS Code 里见过的红色波浪线，多半就是这台安检机在喊："形状不对。"

为什么 AI 偏爱 TS，为什么我们的项目几乎全是 .ts 和 .tsx？两个原因。其一，错误在写的时候就被抓，不用等跑起来才炸——第一册第 11 章说过"本地被宽容、线上被严查"，TS 就是把严查提前到了打字的那一秒。**其二，类型是给 AI 的说明书。**AI 读到 Certificate 的定义，就确切知道这份数据有什么、没有什么，幻觉大减。类型越全的代码库，AI 改起来越稳——这也算一种"给 AI 立规矩"（第二册第 11 章），只是写法是代码而不是文档。

再认一个高频面孔：.tsx——TS 加上 JSX（第 2 章预告过的"长在 JS 里的 HTML"）。我们项目里一个典型的组件文件是三段式：顶部一排 import（借来的积木），中间一个 type 定义 props（这个组件接受什么参数），下面一个函数 return 出一段"HTML"。认出这个三段式，React 组件就不再神秘。

TS 的报错啰嗦但诚实，核心句式永远是：Type A is not assignable to type B——"你给的形状 A，塞不进要求的形状 B"。贴给 AI 之前自己先猜一次：是哪两个形状没对上？

认脸卡

后缀 .ts / .tsx；满眼冒号标注、type、interface；红波浪线是它的声音。

关键领悟

TS 不是一门新语言，是 JS 加了一层"出错前就报警"的安检。读它，遮住冒号；改它，让逻辑和形状保持一致——改了其一，另一半跟上。

试一试

打开项目里任意一个 .tsx，找到 type 或 interface 块，用一句话说出"这个组件要吃什么参数"。再故意把某个文本值改成数字，看红波浪线几秒内亮起——安检正在为你上班。