企业官网建设流程全解析

摘要：TypeScript 是 JavaScript 的超集，由微软开发，为大型应用提供了静态类型检查、现代 ES 语法支持等强大特性。本文作为系列第一篇，从零开始带你了解 TypeScript 诞生的背景、它和 JavaScript 的“血缘关系”，以及如何从零搭建 TypeScript 开发环境。无论你是前端新手还是已掌握 JavaScript 的开发者，都能从中获得完整的知识链条。

一、引言：为什么我们需要 TypeScript？

如果你已经学过了 HTML、CSS 和 JavaScript，并且用 Node.js 写过一些小工具，你一定遇到过这样的场景：

function greet(name) { return "Hello, " + name.toUpperCase(); } greet(42); // 不小心传了数字，运行时才报错！

上面这段代码在编写时没有任何报错，但在运行时会崩溃，因为42没有toUpperCase方法。这暴露了 JavaScript 的一个核心问题：它是动态类型语言，变量的类型可以在运行时随意改变，类型错误只有在执行到那一行时才会暴露。

对于小型脚本来说，这很灵活。但当你的项目有成千上万行代码、多人协作时，这种“运行时才发现错误”的体验会变得非常痛苦。

TypeScript 的解决方案：在代码运行之前（编译阶段）就检查类型错误，让你把潜在 bug 消灭在萌芽状态。

二、JavaScript 的前世今生

要理解 TypeScript，必须先搞懂 JavaScript 的演化过程。

• 1995年：网景公司（Netscape）的 Brendan Eich 仅用 10 天创造了 JavaScript（当时叫 LiveScript），目的是为网页添加简单的交互。

• 1997年：ECMAScript 标准发布，JavaScript 正式标准化。

• 2009年：ES5 发布，带来了严格模式、JSON 对象等成熟特性。

• 2015年：ES6（ECMAScript 2015）发布，引入了类、模块、箭头函数、Promise 等现代语法，JavaScript 真正成为一门能够开发大型应用的语言。

• 此后：每年更新一个版本（ES2016、ES2017……），JavaScript 语言能力越来越强。

但无论怎么演进，类型系统始终没有被加入标准。因为一旦强行给 JavaScript 加上静态类型，会破坏数以亿计的现有网页。所以，社区和厂商选择了另一条路：在 JavaScript 之上构建一层类型系统，编译时去掉类型，生成纯 JavaScript。这就是 TypeScript。

三、TypeScript 的诞生——补上 JavaScript 的“短板”

2012年，微软发布了 TypeScript 的第一个公开版本（0.8）。它的设计目标是：

• 成为JavaScript 的超集（所有 JS 代码都是合法的 TS 代码）

• 提供可选的静态类型检查

• 支持最新的 ES 语法（甚至可以编译成低版本 JS）

• 提供强大的工具支持（代码补全、重构、跳转）

为什么是微软？因为当时微软内部有很多大型 JavaScript 项目（如 Office Online、Visual Studio Online），饱受 JS 维护难的困扰。同时，C# 之父Anders Hejlsberg主导了 TypeScript 的设计，他之前还设计了 Turbo Pascal 和 C#，对类型系统理解极深。

有趣的事实：TypeScript 编译器本身也是用 TypeScript 写的。

发展历程：

• 2012: TS 0.8

• 2014: TS 1.0 正式发布

• 2015: 支持 ES6 模块

• 2016: 发布 2.0，加入非空类型、类型守卫

• 2018: 发布 3.0，项目引用、元组展开

• 2020: 发布 4.0，可变元组、标签元素

• 2023: 发布 5.0，装饰器标准化、const 类型参数

如今，TypeScript 已经成为前端大型项目的标配：Angular、Vue 3、React（配合 Next.js）都深度支持 TypeScript，Node.js 后端（NestJS、Midway）也大量使用。

四、TypeScript 与 JavaScript 的关系（一张图说清）

可以用一个简单的包含关系理解：

关键点：

• 任何.js文件重命名为.ts都可以直接运行（但可能类型检查报错）

• TypeScript 添加的类型注解在编译后被完全删除，不产生运行时开销

• 你写的 TS 代码最终会被转成 JS 文件，然后交给浏览器或 Node.js 执行

五、环境准备：Node.js、npm、pnpm 已就绪

本系列假设你已经掌握了：

• HTML5 / CSS3 / JavaScript（基础语法）

• Git 版本控制

• Node.js 和 npm / pnpm 的使用

如果你还不确定，请先确认 Node.js 版本不低于 16（推荐 18 或 20）：

node -v pnpm -v

我们将在全局安装 TypeScript 编译器tsc，也可以项目内安装。为方便学习，建议全局安装：

# 运行自动配置环境变量 pnpm setup # 关闭终端然后重新打开 pnpm add -g typescript

安装完成后检查：

tsc -v

六、安装 TypeScript 并编写第一个程序

6.1 创建项目文件夹

mkdir ts-learning cd ts-learning pnpm init # 生成 package.json

6.2 编写第一个 TypeScript 文件

新建hello.ts，输入以下内容：

// 带有类型注解的 TypeScript 代码 function sayHello(person: string): string { return `Hello, ${person}!`; } const user = "TypeScript 新手"; console.log(sayHello(user));

注意person: string和: string返回值类型就是 TypeScript 特有的类型注解。

6.3 编译 TypeScript

运行tsc hello.ts，会生成一个hello.js文件，内容为：

function sayHello(person) { return "Hello, ".concat(person, "!"); } var user = "TypeScript 新手"; console.log(sayHello(user));

可以看到所有类型注解都被删除了，变成了纯 JS。

然后用 Node 运行：

node hello.js

输出：Hello, TypeScript 新手!

6.4 体验类型保护

修改hello.ts，故意传一个数字：

console.log(sayHello(123)); // 在 TS 中，编辑器会立即报红

保存后，在命令行再次编译：

tsc hello.ts

你会看到报错信息：

这就是 TypeScript 在编译阶段捕获到的错误。而如果不使用 TS，这种错误只能等到运行时才能发现。

七、ts-node 与 nodemon 实现自动运行

每次手动tsc再node比较繁琐，我们可以使用两个工具来提高开发效率。

7.1 ts-node

ts-node直接运行.ts文件（在内存中编译并执行），不需要输出.js文件。

安装（项目内）：

pnpm add -D ts-node

运行：

pnpx ts-node hello.ts

7.2 nodemon + ts-node 实现热更新

安装 nodemon：

pnpm add -D nodemon

在package.json中添加脚本：

"scripts": { "dev": "nodemon --exec ts-node hello.ts" }

然后执行pnpm run dev，每次保存hello.ts都会自动重新编译并运行，非常适合学习阶段。

八、总结

通过本篇文章，我们完成了以下内容：

理解了 TypeScript 的价值：在编译阶段发现类型错误，提升代码健壮性和可维护性。

回顾了 JavaScript 的历史：知道为什么 JS 一直没能加入类型系统，从而催生了 TypeScript。

了解了 TypeScript 的发展：由微软 Anders Hejlsberg 主导，2012 年发布，如今成为主流。

搭建了完整的开发环境：Node.js + pnpm + TypeScript + ts-node + nodemon。

编写并运行了第一个 TS 程序，体验了类型检查带来的好处。

核心思想：TypeScript 不是一门新的编程语言，而是“带了类型盔甲的 JavaScript”。你已有的 JS 知识可以 100% 复用，只需要额外学习类型系统的相关知识。

如果这篇文章帮你解决了实操上的困惑，别忘记点击点赞、分享，也可以留言告诉我你遇到的其它问题，我会尽快回复。动手练习是掌握编程最快的方法，请务必亲手敲一遍本文的所有示例代码，并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源，谢谢大家。