走进“前端的未来”TS——环境配置
前言
上篇文章讲述了TS的理论基础和工作流程，但在上篇文章中留下了一个问题——我们应该如何让TS文件在浏览器上运行？ 准确的来说，TS是不能够直接在浏览器上运行的，但是我们可以通过TS的编译器tsc来实现编译，将TS语言转换为JS语言，这样就可以轻而易举在浏览器上实现我们想要的效果了。（转换过程如下图）
文章简介
本文是一篇关于如何配置TS环境的博客，会一步步带领学习TS的我们配置TS的环境。步骤详细，解释清晰！值得收藏和学习！！
主要内容
1 环境配置具体步骤
step1 找到TS官方文档
不管学习任何一门语言或者开发工具，我们要做的第一件事就是找到它的开发文档（官方文档）。
官网链接：http://www.typescriptlang.org/
点击进入TS官网
进入官网后，页面如下图所示：
下一步，点击Docs，这里就是它的文档。
step2 下载TS编译工具tsc
点击Docs后进入如下页面。在 Get Started 一栏中选择 TypeScript Tooling in 5 minutes
点击后进入如下页面：
这里就是TS学习开始的地方。这篇文档会一步步教你如何安装TS及其编译器。按照文档的说明，我们需要做的第一件事就是安装TS（install TypeScript）。
官网也告诉了我们两种安装方式
- 使用Node.js通过npm来进行安装
- 借助vs code的插件（比较小众 没什么参考价值）
因此我们采取第一种方式进行安装。
- 通过命令
npm install -g typescript，可以在你的电脑中，全局安装TS的编译器和其相关工具链。 - 命令中的g代表全局global，安装完成后，我们可以通过
tsc xxx.ts转化为.js文件（即原生的JS代码），从而在浏览器中运行编译过后的TS代码。 -
step3 安装node.js
不过，TS的工具链需要在Node.js环境下才能运行，所以我们还需要安装Node.js。
安装Node.js可以参照Vue3专栏中
vue3第一幕之起步与基础（点击可直接跳转）
中关于Node.js的安装配置。
- 安装Node.js之后，Win+R+cmd打开命令框，输入
node -v，显示所安装Node.js的版本号。 - 然后在命令框中输入
npm install -g typescript开始全局安装TS编译器。
安装完毕后如下图所示
- 安装完毕后，继续在命令框输入
tsc -v。如果安装成功，在命令框中会显示你所安装的版本号。（如下图）
此时，TS的环境搭建就完成了。是不是很轻松很简单！
2 创建&编辑TS文件
2.1 创建TS文件
作为一位前端开发学习者，编译器vs code必然是一个非常好的选择。
- 首先，新建一个文件夹，用于存放本节课程需要用到的文件。
- 然后，新建一个文件，将其后缀名改为.ts，这里我们命名为
gungun.ts。 - 我们需要新建一个html文件，名为
index.html，用于显示ts文件的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引入js文件-->
<script src="../gungun.js"></script>
</head>
<body>
</body>
</html>
2.2 编辑+编译TS => JS
let hello = "我来了！"
console.log(hello) // 在控制台输出hello的值
- 此时，新建终端，在终端中输入
tsc gungun.ts。有可能回车之后会一直报错。我的解决方法是，先输入cmd，打开cmd命令，然后再输入刚刚的代码tsc gungun.ts。不出意外，命令运行成功。 - 我们会发现，文件中多了一个叫做
gungun.js的文件。很显然，这是ts文件通过tsc编译器编译后转换出的js文件。此时ts就能间接运行在主流浏览器上。
- 在终端中输入
node gungun.js，会显示以下结果。
gungun.js中的内容显示成功。 - 下面我们来验证一下，在浏览器中运行
index.html文件。
summary
本文写于TS学习期间，主要内容是TS编译环境的配置搭建，中间内容介绍详细，提供了方便的链接和方法，有利于自己和学者一起学习、共同成长。
文章内容由本人结合学习笔记和学习课程，并结合个人见解综合整理得出，难免会有错误和不足，希望大家发现后及时向我指出，我会第一时间做出修改和更新。学习的路还很长，感谢陪伴！！
2887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
