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

easycode · Agent Skill

先看一眼，消除恐惧。

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。像海关申报单，过关前先申报箱子里装什么，机器一扫，不符就报警。你在 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 块，用一句话说出"这个组件要吃什么参数"。再故意把某个文本值改成数字，看红波浪线几秒内亮起，安检正在为你上班。