TypeScript 教程

本教程是 TypeScript 的完整 15 篇入门系列,参考 runoob.com/typescript/ 与官方 Handbook 的结构,面向已掌握 JavaScript 基础的读者。从环境安装、类型注解一路讲到泛型、高级类型与 tsconfig 配置,每一篇都配有可运行的代码示例。

TypeScript(简称 TS)是微软在 2012 年开源的一门语言,由 C# 之父 Anders Hejlsberg 主导设计。它是 JavaScript 的超集——在 JS 的基础上加了一层静态类型系统。换句话说:合法的 JS 几乎都是合法的 TS,你只需给变量、参数、返回值标上类型,就能在编辑器里获得即时的错误提示和智能补全。TS 最终会被编译成普通 JS 运行,类型信息在运行时全部擦除,零运行时成本。

如果你还没学过 JavaScript,建议先过一遍我们的 JavaScript 教程(17 篇),再来这里。本系列默认你已经懂 JS 的变量、函数、对象、数组、Promise 等概念,只把焦点放在"TS 给 JS 加了什么、怎么用"。

先看一段 TypeScript 代码

下面是最简单的 TS 程序,注意 name: string: string 这两处类型标注——这就是 TS 相比 JS 多出来的东西:

// hello.ts
function greet(name: string): string {
  return `你好, ${name}!`;
}

console.log(greet("TypeScript"));
// 输出: 你好, TypeScript!

全部 15 篇子教程

建议按顺序学习,每天 1~2 篇,两周即可入门。每篇都配有可运行的示例,边读边敲效果最好。

  1. TypeScript 简介 — 历史、特点、与 JS 的关系
  2. TypeScript 环境安装 — tsc、ts-node、第一个 .ts 文件
  3. TypeScript 基础语法 — 程序结构、类型注解、与 JS 的异同
  4. TypeScript 变量 — let/const、类型注解、类型推断
  5. TypeScript 基础类型 — string/number/boolean/数组/元组
  6. TypeScript 接口 — 描述对象形状、可选与只读
  7. TypeScript 类型别名 — type、字面量类型、与 interface 对比
  8. TypeScript 函数 — 参数与返回值类型、重载
  9. TypeScript 泛型 — 类型的参数,重点讲 T
  10. TypeScript 联合与交叉类型 — 或与且的类型组合
  11. TypeScript 类 — 修饰符、参数属性、抽象类
  12. TypeScript 模块 — import/export 与类型导出
  13. TypeScript 工具类型 — Partial/Record/Pick/Omit 等
  14. TypeScript 类型断言与守卫 — as、typeof、自定义守卫
  15. TypeScript tsconfig 配置 — strict、target、lib 详解

推荐学习路径

建议按下面 4 个阶段推进,每个阶段都建立在前一个之上:

每篇都建议你边读边敲:把示例代码保存成 .ts 文件,用 tsctsx 跑一跑,故意改错类型看编辑器怎么提示。类型系统是"肌肉记忆",光看不练没感觉。

与 JavaScript 系列的衔接

TypeScript 不是要取代 JavaScript,而是给它"装上护栏"。本系列不会重复讲 JS 已经覆盖的内容(如 DOM 操作、Promise、事件循环),而是专注在类型这条主线上。学完后你会发现,回过头看任何 JS 库的类型定义文件(.d.ts),都能轻松读懂——这正是迈向中大型前端工程的关键一步。

开始学习

准备好了吗?从第一篇开始 → TypeScript 简介

✈️💬