TypeScript 从零基础到精通（一）：前世今生与环境搭建

摘要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年ES6ECMAScript 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.82014: 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都深度支持 TypeScriptNode.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 或 20node -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.json6.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-nodets-node直接运行.ts文件在内存中编译并执行不需要输出.js文件。安装项目内pnpm add -D ts-node运行pnpx ts-node hello.ts7.2 nodemon ts-node 实现热更新安装 nodemonpnpm 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% 复用只需要额外学习类型系统的相关知识。如果这篇文章帮你解决了实操上的困惑别忘记点击点赞、分享也可以留言告诉我你遇到的其它问题我会尽快回复。动手练习是掌握编程最快的方法请务必亲手敲一遍本文的所有示例代码并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源谢谢大家。