TypeScript: TypeScript 简介

TypeScript 是 JavaScript 的"升级版"——它给 JavaScript 加上了类型检查，让你在代码运行前就能发现错误。

本教程面向零基础学习者，从安装配置讲起，直到你能独立用 TypeScript 开发一个命令行应用。

1. 你将学到

• TypeScript 基础类型和类型注解
• 接口、泛型、类型别名等核心概念
• 类、模块、装饰器的 TypeScript 用法
• 从 JavaScript 项目迁移到 TypeScript
• 综合项目实战

2. TypeScript 是什么

TypeScript 是微软开发的一门开源编程语言，2012 年首次发布。它是 JavaScript 的超集——意思是：所有合法的 JavaScript 代码，都是合法的 TypeScript 代码；但 TypeScript 在此基础上增加了类型系统。

打个比方：JavaScript 就像骑自行车出门，不用看路牌也能到，但容易走错路；TypeScript 就像骑自行车的同时还带了导航，出发前就告诉你哪里该转弯、哪里是死胡同。

3. TypeScript 与 JavaScript 的关系

理解 TS 和 JS 的关系，关键是三个词：超集、编译、兼容。

(1) 超集：JS 有的 TS 全有

任何一段 JavaScript 代码，直接放进 .ts 文件里就能工作。你不需要从头学一门新语言——TypeScript 是在 JavaScript 基础上做加法，不是另起炉灶。

(2) 编译：TS 不能直接在浏览器运行

浏览器只认 JavaScript，不认 TypeScript。所以你写的 .ts 代码，需要先通过 TypeScript 编译器（tsc）转换成 .js 文件，然后才能在浏览器或 Node.js 中运行。

.ts 文件  →  TypeScript 编译器 (tsc)  →  .js 文件  →  浏览器/Node.js 运行

这个编译过程就是 TypeScript 的核心价值所在——编译时检查类型错误，而不是等到运行时才报错。

(3) 兼容：现有 JS 项目可以逐步迁移

你可以一个文件一个文件地把 .js 改成 .ts，不需要一次性重写整个项目。TypeScript 官方提供了 allowJs 选项，允许 TS 项目中混用 JS 文件。

▶ 示例：JavaScript 代码直接作为 TypeScript 使用

// 这是一段标准的 JavaScript 代码
function greet(name) {
  return "你好, " + name;
}

console.log(greet("Charlie"));

这段代码不需要任何修改，直接放入 .ts 文件就能编译通过——因为 TypeScript 是 JavaScript 的超集。

输出：

你好, Charlie

4. 为什么要学 TypeScript

如果你已经会 JavaScript，为什么还要花时间学 TypeScript？四个字：防错、提效。

(1) 编译时发现错误，而不是运行时崩掉

JavaScript 是动态类型语言——变量的类型在运行时才确定。这很灵活，但代价是：一个拼写错误、一个类型不匹配，可能要等到用户点击按钮那一刻才暴露。

// JavaScript：不会报错，但结果是 NaN
let price = "99";
let total = price * 2;  // NaN —— 字符串不能做乘法

TypeScript 在编译时就会拦住你：

// TypeScript：编译报错，直接提醒
let price: string = "99";
let total: number = price * 2;  // ❌ 错误：string 类型不能参与算术运算

(2) 编辑器智能提示，写代码更快

VS Code 对 TypeScript 的支持是开箱即用的。当你输入变量名时，编辑器会自动提示可用的属性和方法，还会实时标红类型错误——就像有一个搭档在旁边随时提醒你。

(3) 代码即文档，团队协作更顺畅

TypeScript 的类型注解就是最好的文档。看到 function getUser(id: number): User 就知道：参数是数字，返回值是 User 对象。不需要额外写注释，类型本身就说明了一切。

(4) 行业趋势，就业加分

Angular 从 2.0 起就用 TypeScript 开发，Vue 3 用 TypeScript 重写，React + TypeScript 已成标配，Deno 和 Bun 原生支持 TypeScript。前端岗位招聘中，"熟悉 TypeScript"已从加分项变成基本要求。

▶ 示例：TypeScript 的类型检查在行动

// TypeScript 会在编译时捕获类型错误
let age: number = 25;
age = "二十六";  // ❌ 编译错误：不能将 string 赋值给 number

// JavaScript 中同样的代码不会报错，但运行时可能出问题

5. TypeScript 的工作流程

用 TypeScript 开发的完整流程是这样的：

1. 编写 .ts 文件——在 TypeScript 中写代码，加上类型注解
2. 编译 .ts → .js——用 tsc 命令编译，编译器检查类型错误
3. 运行 .js 文件——编译后的 JavaScript 可以在任何环境运行

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  编写 .ts    │ ──→ │  tsc 编译    │ ──→ │  运行 .js    │
│  类型注解    │     │  类型检查    │     │  浏览器/Node │
└──────────────┘     └──────────────┘     └──────────────┘

6. 谁应该学 TypeScript

❓ 常见问题

📖 小节

• TypeScript 是 JavaScript 的超集，增加了静态类型系统
• TS 代码需要编译成 JS 才能运行，编译过程就是类型检查的过程
• TypeScript 的核心价值：编译时发现错误、编辑器智能提示、代码即文档、行业趋势
• 所有 JavaScript 代码天然就是合法的 TypeScript 代码
• 学习本教程前应掌握 JavaScript 基础语法

📝 作业

1. 基础题（难度⭐）：用自己的话解释 TypeScript 和 JavaScript 的三个核心区别，写出你对"超集"这个词的理解。
2. 进阶题（难度⭐⭐）：写一段 JavaScript 代码，包含一个会出错的类型问题（比如把字符串当数字用），然后说明 TypeScript 如何在编译时捕获这个错误。
3. 挑战题（难度⭐⭐⭐）：调研你感兴趣的一个前端框架（Angular / Vue / React），了解它对 TypeScript 的支持程度，写一段简短的总结。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们