先前已顺利完成了安装环节，现在我们开始探讨如何操作这个编译工具。

编写代码之前，需要先挑选一个合适的开发工具，市面上能够支持的集成开发环境种类繁多，比如就包含了VS code，等等，大家可以依据个人偏好来选择，我比较习惯运用，以往的教程和教程也都是借助它完成的，因此接下来的课程将采用它来进行演示。

打开，我们新建一个项目，在项目下我们新建一个 文件：

我们暂且将这份文件命名为：-1，名字可以随意定。创建完成后，我们会发现一个-1.ts文件。

注意：的文件都是以 .ts 后缀结尾。

接下来，我们就可以写段 来玩一下。

不必在意，是按照ES6的规则来编写吗？ES6的规则我们之前已经讲过，没什么难度。那么就用ES6的方式简单编写一些代码进行尝试。附上我们的代码部分：

 function say(name = '前端君'){
    return `hello,${name}`
 }

 let myName = '后端君';
 say(myName);

这段代码相当简明扼要，运用了部分基础的ES6功能。然而，我们清楚并非所有网络浏览器都能兼容这些ES6功能，那么应当如何应对这种情况呢？

接下来，我们就用 编译器把它编译成各大浏览器都看得懂的。

编译

启动终端程序，切换至个人工作空间的文件夹位置，示范路径为：F:\tsc，抵达此文件夹后，实施下列指令：

 tsc lession-1.ts

操作完成，你将发现在F:\tsc目录中，除了你创建的-1.ts文件，又多出一个-1.js文件。

它就是你通过编译器编译出来到js文件，我们打开看看：

 function say(name) {
    if (name === void 0) { name = '前端君'; }
    return "hello," + name;
 }
 var myName = '后端君';
 say(myName);

这是编译后的结果，所有主流浏览器都能识别，原因是编译工具将ES6的新功能转换成了ES5的标准代码，这样做是为了让各种浏览器都能正常使用。

每当需要对-1.ts文件进行改动，只要运行前面提到的指令，编译程序就会重新编译并生成-1.js文件。

这样岂不是很麻烦。是的，就是这么麻烦。

别怕， 可以帮助我们自动编译我们编写的，并更新到 文件上。

在编写代码的时候sublime text 3编译php，ws会很智能地提示你，如下图：

（ to ?）

我们决定采用这种方式。一旦我们进行改动，系统就会自动进行编译sublime text 3编译php，并且会同步更新到相应的文件中。这样，我们就不需要每次都手动去执行命令了，这个过程非常便捷。借助这种工具的帮助，在开发工作期间我们可以更加专注于代码的编写，从而显著提升了工作效率。

编译环境已经配置妥当，借助开发工具的便利功能，实现了编译自动化，接下来，章节内容将转入对特性的学习。

本节小结

善用IDE开发工具，实现 自动编译成，提高开发效率。

热门文章

如有侵权请联系删除！