现在，您的电脑已经具备了运行 JavaScript 和管理软件包的能力，这得益于 Node.js 和 npm。接下来，我们需要请来一位关键的“翻译官”—— TypeScript 编译器 (tsc)。
它的核心任务就是将您用 TypeScript 写的代码（.ts 文件）翻译成浏览器和 Node.js 能够理解的 JavaScript 代码（.js 文件）。
什么是编译器 (tsc)？
- 角色：它是一个命令行工具。
- 功能：
- 类型检查：读取
.ts 文件，检查类型是否正确。
- 编译转换：将 TypeScript 语法（如
let、const、class、interface 等）转换为指定版本的 JavaScript 语法（如 ES3、ES5 或 ES6）。
- 错误报告：如果代码中有类型错误，它会拒绝编译，并明确指出错误位置。
安装步骤
我们将使用 npm（您刚安装好的包管理器）来全局安装 TypeScript。
-
打开命令行工具
- Windows：打开 cmd 或 PowerShell。
- macOS / Linux：打开 Terminal。
-
执行安装命令
在命令行中输入以下命令并按下回车：
npm install -g typescript
-
命令解析：
npm install：这是安装包的指令。-g：这是一个参数，代表 global（全局安装）。这意味着 tsc 命令将可以在您电脑的任何目录下使用。如果不加 -g，则只会在当前文件夹生效，这显然不方便。typescript：这是我们要安装的包的名字。
-
等待安装完成
命令行会显示下载和安装的进度。由于网络位置不同，速度可能有快慢。如果觉得官方源太慢，可以配置淘宝镜像源（npm config set registry https://registry.npmmirror.com）后再试。
验证安装
安装完成后，我们需要确认这位“翻译官”是否已经到岗。
-
检查版本
在命令行中输入以下命令：
tsc -v
-
预期输出
命令行会返回一个版本号，例如：
Version 5.8.3
如果看到类似这样的输出，说明安装成功！
-
常见问题排查
- 报错提示：权限不足 (Permission Denied)
- 报错提示：‘tsc‘ 不是内部或外部命令...
- 原因：这通常是因为环境变量
PATH 没有正确配置，或者 npm 的全局安装路径没有被系统识别。
- 解决：
- 重新检查 Node.js 是否安装成功（上一章的
node -v 能用吗？）。
- 确保在安装 Node.js 时勾选了“Add to PATH”。
- 尝试关闭并重新打开命令行窗口。
- 如果是 Windows 系统，可能需要手动将 npm 的全局路径（通常是
C:\Users\您的用户名\AppData\Roaming\npm）添加到系统的 PATH 环境变量中。
编译器初体验
安装好 tsc 后，我们来做一个最简单的测试，感受一下“翻译”的过程。这能帮助你理解这个编译器的基本工作流程。
-
创建一个测试文件
在任意目录下，新建一个名为 hello.ts 的文件（注意后缀是 .ts，不是 .js）。
-
写入代码
在文件中写入一行简单的代码：
let message: string = “Hello, TypeScript!”;
-
执行编译
打开命令行，进入该文件所在的目录，输入：
tsc hello.ts
-
观察结果
-
发生了什么？
tsc 读取了 hello.ts。- 它检查了
: string 类型注解，确认无误。
- 它将 TypeScript 语法（类型注解）擦除，并将
let 转换为了 var（默认目标版本是 ES3/ES5）。
- 它生成了纯净的
hello.js。
小结：
您已经成功安装了 TypeScript 的核心——编译器 tsc，并亲手完成了第一次编译。现在，您已经具备了将 TypeScript 代码转化为 JavaScript 代码的能力。
下一步：
虽然我们可以手动输入 tsc hello.ts 来编译单个文件，但这在大型项目中非常低效。下一章，我们将学习如何使用 tsconfig.json 文件来配置一个“智能”的项目，让编译器自动识别项目范围并进行管理。掌握这些前端工程化的基础工具，是高效开发的关键。更多实用的开发技巧和资源，欢迎到 云栈社区 交流探讨。 | 
发表于 昨天 05:19
|
查看: 5|
回复: 0
