TypeScript 快速入门：从环境搭建到编译运行实战

初识 TypeScript

TypeScript（简称 TS）是由微软开发的开源编程语言，它是 JavaScript 的超集（即 JS 拥有的特性 TS 均支持）。TS = Type + JavaScript，旨在为 JS 添加类型支持。由于其兼容 JS，任何能运行 JavaScript 的环境都可以运行 TypeScript。

为何选择 TypeScript

解决 JavaScript 的类型痛点

JavaScript 属于动态类型语言，类型检查发生在执行期。这意味着代码通常需要运行到特定逻辑分支时才会暴露类型错误（Uncaught TypeError），这增加了排查 Bug 的时间成本，严重影响开发效率。相反，TypeScript 作为静态类型语言，可以在编译期（代码执行前）发现类型错误。

核心优势

1. 早期报错：配合 VS Code 等现代编辑器，可在编写代码的同时实时发现错误，大幅缩短调试周期。
2. 智能提示：强大的类型系统提供精准的代码补全和文档提示，提升编码体验。
3. 易于维护与重构：显式的类型定义让代码结构更清晰，便于大型项目的长期维护和代码重构。
4. 支持最新 ES 语法：优先支持最新的 ECMAScript 特性，保持技术前沿性。
5. 类型推断机制：无需在所有位置显式标注类型，TS 会自动推断变量类型，降低书写负担。

目前，Vue3 源码、Angular 框架以及 React 项目均已广泛采用 TypeScript，使其成为中大型前端项目的首选。

环境准备与安装

由于 Node.js 和浏览器原生仅识别 JavaScript，我们需要安装 TypeScript 编译器将 TS 代码转换为 JS。前提是本地已安装 Node.js 环境。

第 1 步：全局安装 TypeScript

打开终端（Windows 按 Win+R 输入 cmd，Mac/Linux 打开 Terminal），执行以下命令全局安装 typescript 包：

npm install -g typescript

第 2 步：验证安装

安装完成后，通过查看版本号确认是否成功：` tsc -v `

若输出具体版本号（如 v4.9.5），则说明安装成功。

手动编译与运行 TS 文件

理解 TS 的基础工作流程有助于掌握其本质：TS 文件必须经过编译转换为 JS 文件后，才能由 Node.js 执行。

第 3 步：创建 TS 源文件

在项目目录下新建一个后缀为 .ts 的文件，例如 test.ts。注意：所有合法的 JS 代码都是合法的 TS 代码，但 TS 会额外检查类型。

第 4 步：编译 TS 为 JS

在终端中运行以下命令，将 test.ts 编译为同名的 JS 文件：
` tsc test.ts `

执行成功后，同级目录下会出现 test.js 文件。该 JS 文件中的类型注解已被移除，转化为标准 JS 代码。

第 5 步：运行生成的 JS 文件

使用 Node.js 运行编译后的 JS 文件：
` node test.js `

排错提示：如果在编译或运行时报错“无法重新声明块范围变量”，通常是因为在同目录下同时存在同名未清理的 .js 文件且包含冲突逻辑。关闭或重命名旧的 JS 文件即可解决。

优化开发流程：使用 ts-node

上述手动编译步骤在开发阶段较为繁琐。为了更高效地测试 TS 代码，官方提供了 ts-node 工具，它能在内存中自动完成 TS 到 JS 的转换并直接运行。

第 6 步：安装 ts-node

在终端全局安装 ts-node 包：
` npm install -g ts-node `

第 7 步：直接运行 TS 文件

安装完成后，可直接执行：
` ts-node test.ts `

注意事项：
1. 不要直接使用 node test.ts，除非文件中没有任何 TS 特有的类型语法（即纯 JS 代码），否则 Node.js 会因无法解析类型语法而报错。
2. ts-node 适合开发和测试阶段；生产环境部署仍需先使用 tsc 编译为标准 JS 文件。

常用命令汇总

• 查看最新版本：` npm view typescript version `
• 检查本地安装情况：` npm ls typescript `
• 全局卸载：` npm uninstall -g typescript `

以上就是 TypeScript 安装与使用的详细内容，更多关于 TypeScript 进阶技巧与类型系统的资料请关注本站其它相关文章！