72小时带你光速入门TypeScript - 环境搭建01

回归正题，看到这个标题很多人会说，这一定是一篇标题党，或者说现在前端都烂大街了，还有必要学习Ts吗？我想解释一下：

容器能够直接运行TypeScript吗？

那肯定是不行的。我们这里所说的容器只有2种，一种是浏览器环境、一种是Node环境。

浏览器只认识 html、css、Javascript。所以想让TypeScript跑起来的话，那就一定要把TypeScript转译成JavaScript，然后去跑Js脚本。

那如何做Ts到Js的转译呢？

Ts官网已经给出了答案。我们可以使用 tsc 这个工具。安装这个工具也非常的简单，只要你安装了TypeScript，tsc就会被自动安装。这个过程就像安装Node，会自动安装npm一样。

npm i -g typescript

随意找一个空目录，然后编写你的第一个ts文件，index.ts文件内容如下：

let name:string = 'hello world!';

随后运行：

tsc index.ts

随后，大概率你的编译就报错了，大致截图如下：

上面这个报错告诉我们 变量name重复声明了。

那这是为啥呢？明明我们的name在当前的文件里是唯一的，为啥还会提示name重复声明？

这是因为默认情况下，tsc会将DOM环境作为ts文件的运行容器，而DOM环境里已经存在了name这个全局变量，所以当你再声明这个变量的时候就会报错。

如何证明我的结论是正确的呢？

首先来看下面的这张图：

我们的第一行代码是操作DOM的，而编译器没有报错，这就说明了默认这段代码是要运行在浏览器下的。

再来看一张图：

上面这张图证明了name这个变量，确实在DOM环境里是全局存在的。

所以我们的报错，根据Ts的运行规范来看的话，是合理的。

如何解决呢？3种方案：

• 修改变量名字，将 name 换成 name1，编译就可以过去啦。编译成功后在当前的目录下会生成一个js文件，js文件的内容是啥，大家自行查看。
• 既然默认的运行环境是浏览器，那我们是否可以更改这个环境？因为虽然name在浏览器里全局存在，但是在Node环境里，这个全局变量它就不存在啊；答案是可以的。需要我们新建一个tsconfig.json文件来指定当前的运行环境，修改如下：

// tsconfig.json文件内容如下：
{
    "compilerOptions": {
        "lib": ["ES2015"].     // 指定当前的环境是Node环境，当然这么写其实也不准确，后面的文章里会给大家解释原因
    }
}

// 此时我们就不能使用tsc index.js来编译文件了，因为Ts官方规定，如果目录下存在tsconfig.json文件，
// 如果想要让配置文件生效，那么就只能使用tsc命令（注意，后面不能跟着文件名了）。

• 最后一种就是模块化。虽然name变量是全局，但是我可以在其他作用域里去声明name变量，这也是Js的一个特性。先删除 tsconfig.json文件，然后index.ts文件修改如下：

let name:string = 'hello world';

export {};

此时再编译文件，我们就会发现文件执行编译成功了。

本期总结

本篇文章我们来初体验了一下TypeScript，虽然说遇到了一些问题，但是也知道了问题的原因并且成功的解决了。本来这篇文章还应该有如何搭建一个Ts的前端环境、Ts的后端环境。但是文章篇幅有限，这都已经1000多字了，如果再多的话，体验应该不是很少，所以我决定下篇文章再写如何搭建Ts前后端运行环境。

最后，希望我的文章对你有帮助，我们下期再见啦～～