TypeScript 教程（2026 超详版）

近年来，随着前端生态的高速发展，前端开发已经从简单的页面展示，慢慢变成了复杂的工程化应用。在传统的 JavaScript 开发中，小伙伴们肯定遇到过这样的痛点：代码跑起来后才发现变量名写错了，或者传入的参数类型写错，导致整个页面都崩溃了。

为了解决这些令人头疼的问题，TypeScript 慢慢成为了现代 Web 开发的 “标配”。不管是 Vue 社区还是 React 社区，现在 TypeScript 都占据了绝对的主导地位。

TypeScript 是什么？

从名字就可以看出，TypeScript 的核心是：Type（类型）+ Script（脚本）。简单来说就是，TypeScript 是带有 “类型限制” 的 JavaScript。

这里估计很多小伙伴都蒙了：“我 JavaScript 还没吃透，怎么又要学一门新的语言？” 实际上，TypeScript 并不是一门新的语言，它其实是 “JavaScript 的一个超集”。

TypeScript，简称 “TS”，它是微软开发并开源的一门编程语言。TypeScript 是 JavaScript 的一个 “超集”。也就是说，任何合法的 JavaScript 代码，天然就是合法的 TypeScript 代码。TypeScript 只是在 JavaScript 的基础上，加了一层 “类型检查” 的外衣而已。

TypeScript 是 JavaScript 的超集

如果我们把 JavaScript 比作一个无拘无束、自由奔放的剑客，那么 TypeScript 就是给这位剑客穿上了厚重的护甲，并配上了一名严厉的教练。它不仅允许你发挥剑客原有的灵活，还能在代码运行之前，揪出你可能犯下的错误。

注意: 严格来说，TypeScript 不是静态语言，更准确的说法是：TypeScript 是一种带有静态类型系统的 JavaScript 超集。

为什么要使用 TypeScript？

要搞清楚为什么要学 TypeScript，我们先来看看 JavaScript 都做了哪些让人头疼的事情。

示例 1：JavaScript 的隐患

运行代码

// 定义函数
function add(a, b) {
    return a + b;
}

// 正常调用
console.log(add(10, 20));

// 错误调用，但 JavaScript 不会报错
console.log(add(10, "20"));

运行结果如下。

30
1020

分析：

我们本来希望 add() 函数是用来计算两个 “数字” 相加的，但是当我们调用这个函数，不小心传入了一个字符串 "20" 时，JavaScript 竟然不报错！而且它还会自作聪明地把数字 10 转换成字符串，最后拼接成了 "1020"。

在复杂项目中，这样的 bug 是很难排查出来的。因为程序本身并没有崩溃，它只是悄悄地给出了一个错误的结果。等到最终数据显示在页面上出了问题，我们可能需要找半天，才能定位到原来是这里传入了字符串。

接下来，我们来看看如果使用 TypeScript，同样的代码会发生什么。

示例 2：TypeScript 的严谨

// 定义函数：明确规定 a 和 b 必须是数字类型
function add(a: number, b: number) {
    return a + b;
}

// 正常调用
console.log(add(10, 20));

// 错误调用
console.log(add(10, "20"));

分析：

在这个例子中，我们在参数后面加上 “: number”，用于明确告诉程序：a 和 b 都必须是数字。

这个时候，当我们敲下 add(10, "20") 这行代码时，根本不需要等程序运行，编辑器（比如 VS Code）就会飘红报错，如下图所示。

TypeScript 飘红报错并给出提示

这就是 TypeScript 最强大的地方：它能够在你写代码的阶段（编译期），就提前发现并解决潜在的错误，而不是等到程序运行（运行期）才导致崩溃。

TypeScript 有什么特点？

在 TypeScript 社区里，我们经常会听到 “AnyScript” 这个词。虽然这是大家对 TypeScript 的一个调侃，但也侧面反映了它的灵活性。TypeScript 的创始人 Anders Hejlsberg 给它的定位是：安全、可靠、渐进式。

其中，TypeScript 主要有以下几个重要的特点：

静态类型检查：TypeScript 能够在代码编写阶段就发现拼写错误、类型不匹配等低级错误，大大地提高了代码的健壮性。
更好的智能提示（代码补全）：因为 TypeScript 知道每个变量是什么类型、每个对象有哪些属性，所以你在编写代码时，编辑器能给出精准的代码提示。这能大幅提升开发效率。
更好的代码可读性：类型本身就是最好的注释。别人看到你的函数签名 function getUser(id: number): User，不用看源码就知道必须传入数字 id，并且会返回一个 User 对象。
更安全的代码重构：在企业级的大型项目中，由于业务的变更，我们经常需要修改甚至重写原有的代码。在纯 JavaScript 中，修改底层代码往往牵一发而动全身，很容易改出连环 bug。而有了 TypeScript，只要你改错了某个属性名或类型，编译器会把所有受到波及的地方全部标红，真正做到 “重构无死角”。
繁荣的生态支持：很多小伙伴可能会担心：“如果我使用了一个很老的 JavaScript 第三方库，它本身不支持 TypeScript 怎么办？” 别担心！TypeScript 拥有一个极其繁荣的开源生态，社区里有一个叫做 DefinitelyTyped 的庞大仓库，专门为市面上几乎所有的 JavaScript 库编写了类型声明文件。即使是老旧的 JavaScript 库，你依然可以在 TypeScript 中享受到完美的智能提示。

如果小伙伴们已经掌握了 JavaScript，那么学习 TypeScript 的成本是非常低的。我们只需要把文件的后缀名从 “.js” 改为 “.ts”，然后再一步步加上类型注解即可。

此外，TypeScript 还引入了传统面向对象编程中的类（class）、接口（interface）、泛型（generic）等概念，如果以后想学习类似 Go 这种后端语言，TypeScript 无疑是一个很好的过渡桥梁。

TypeScript 的运行机制

首先，我们要清楚一点：浏览器和 Node.js 环境本身是不认识 TypeScript 代码的，它们只认识 JavaScript 代码。那么，我们写的 TypeScript 代码是怎么运行的呢？

实际上，我们编写的 “.ts” 文件，需要先通过 TypeScript 编译器将其编译（翻译）成普通的 “.js” 文件，然后再把这个生成的 “.js” 文件交给浏览器或 Node.js 去运行。

小伙伴们可以这么理解：TypeScript 是我们在开发阶段使用的工具，一旦代码写完并确认无误后，它就会脱下 “类型检查” 的外衣，变成纯净的 JavaScript 去执行。

TypeScript 的运行机制

TypeScript 学习前提

在学习 TypeScript 之前，小伙伴们必须要具备 HTML、CSS、JavaScript 等基础。当然了，也可以先学习我们的：