认识 TypeScript - TypeScript 教程

讲解

TypeScript 是微软在 2012 年开源的编程语言，它在 JavaScript 的基础上增加了一套静态类型系统。写过 JavaScript 的人都有过这样的经历：代码在编辑器里看着没问题，一运行才报「undefined is not a function」；重构一个函数签名后，要全局搜索所有调用点逐个确认。TypeScript 要解决的正是这类问题——把大量运行时才能暴露的错误，提前到编写和编译阶段发现。

TypeScript 与 JavaScript 的关系可以概括为「超集」：任何合法的 JavaScript 都是合法的 TypeScript。你可以把一个 .js 文件直接改名为 .ts，然后从添加少量类型标注开始，逐步加深类型化的程度。这种渐进式设计让 TypeScript 能在老项目中落地，也是它在十年间从「可选玩具」变成前端和 Node.js 工程事实标准的关键原因。

需要注意：浏览器和 Node.js 都不能直接运行 TypeScript。TypeScript 代码必须先经过编译器 tsc（或 esbuild、swc 等工具）转译成 JavaScript 才能执行。类型标注在编译后会被完全擦除，运行时没有任何类型开销——类型只在开发阶段保护你。本教程所有示例都用 tsc 的严格模式（--strict）编译验证过，这也是业界推荐的配置。

学习本教程之前，你应当已经掌握 JavaScript 基础（变量、函数、数组、对象、类、模块），可以直接对照本站 JavaScript 教程查漏补缺。每一章的示例都不长，建议亲手敲一遍并故意改错，观察编译器报什么——理解报错信息是学好 TypeScript 的一半。

示例

先直观感受一下类型的价值。下面这段代码在严格模式下可以编译通过，因为参数和返回值都标注了 number，调用方传错类型会被编译器拦下：

function add(a: number, b: number): number {
  return a + b;
}

const sum: number = add(1, 2);
// add("1", 2);   // 若取消注释，编译报错：string 不能赋给 number
console.log(`1 + 2 = ${sum}`);

对比纯 JavaScript：同样的函数如果不小心传入字符串，得到的是拼接结果 "12" 而不是 3，错误要等到运行时、甚至被用户触发后才暴露。TypeScript 把它变成了写代码时编辑器里的一条红线。

常见坑

以为 TypeScript 是另一门语言要重学：它的语法主体就是 JavaScript，你已有的知识全部有效，新增的只有类型相关语法。
以为类型会在运行时检查：类型在编译后被擦除。运行时校验外部数据（如 API 返回）要靠代码或 zod 这类校验库，类型标注管不到运行时的真实数据。
一上来就追求零 any：渐进类型化是 TypeScript 的设计初衷，先让项目跑起来，再逐步提高类型覆盖率，比一步到位更可持续。
混淆 .ts 和 .d.ts：.ts 是源码文件，.d.ts 是只含类型声明、不含实现的水印文件，后面会有专门章节讲解。

小结

TypeScript = JavaScript + 静态类型系统，编译后类型被擦除，运行时零开销。它把大量运行时错误提前到编译期暴露，并带来精确的自动补全和安全的重构。下一章我们把开发环境搭起来，写出并编译第一个 TypeScript 程序。