interface Project { id: number; title: string }return project.titel
- Property ‘titel’ does not exist. Did you mean ‘title’?
- Property ‘toUpperCase’ does not exist on type ‘number’.
用户看到的徽章：尚未生成
工程与栈 · 开发基础
TypeScriptTypeScript
为 JavaScript 加上编译期类型：同一行拼写错，JS 等运行时 TypeError，TS 在编辑器或 CI 就用红线拦住。
先认出这行红波浪，再决定何时拦错
下面就是编辑器里的 badge.ts：默认 tsc 已在 titel 上画红线。点「当成 JS 直接跑」，用户徽章变成 undefined；失败也写在同一块编辑器上。
tsc · 2 个错误：红线和徽章长在编辑器物件上。
原因：编辑器对照 interface Project，发现 titel 拼错、number 上调了字符串方法。下一步：点「当成 JS 直接跑」，看用户徽章会变成什么。
知识点：编译期对照契约
红线和徽章已经演示了差异，这里只命名三层能力。
- 编译期 vs 运行时：TS 在编辑器或 CI 报错；JS 要跑到那行才 TypeError。
- 类型描述形状：interface Project 是契约，编辑器拿它对照字段名和方法。
- strict 会多拦「可能为 null」和隐式 any；关掉就放过。
- 类型不验证运行时输入：外部 JSON 仍需 unknown + 校验，不能用 as 当检查。
什么时候用、怎么用
从协作和契约判断，而不是无脑上。
- 信号：多人改同一份接口、重命名字段、CI 要在上线前拦住拼写错。
- 适用：中大型项目、公共数据契约、组件 props。
- 不适用：一次性脚本或极速原型可能拖慢节奏；运行时数据仍要单独校验。
- 最短路径：给核心数据建型 → 开 strict → CI 跑 tsc --noEmit → 外部输入先收窄。
正反例：拿到接口数据后用 title
目标都是显示项目名，只改是否把断言当校验。
拼写错和缺字段在边界被发现。徽章显示真实 title。
编译通过，运行时 title 仍可能是 undefined。失败写在徽章上。
快速自测
后端给接口加了一个字段，前端没更新类型。哪种情况会被 TypeScript 在编译期发现？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。