本文将简述如何使用vscode [Visual Studio Code]开发工具来搭建一套TypeScript的开发环境，主要的目的是落地留痕，同时也希望能对一些刚入门的小伙伴有一定的参考价值。[注意：Windows，Linux，OS X在操作上基本上一致，只是工具的安装有所不同，这里仅以Windows平台作为本次教程的演示环境]
- Node.js Node.js - Official Site
- Visual Studio Code Visual Studio Code - Official Site
一方面提供一个开发的Runtime；另一方面提供的工具，我们可以利用这个工具来安装。
首先按照准备工作里面提供的链接下载对应平台的Node.js安装包
讯享网
安装Node.js，安装过程基本上是下一步，即可完成，然后在中运行如下命令： 来查询当前node.js的版本号，然后输出如图所示的结果就表示node.js安装成功，接着可以输入命令： 来查询当前npm工具的版本号[可能需要时间稍长点]，便会输出如图所示的结果表示npm工具可用
由于npm安装工具默认会跑到C盘[因为npmrc文件中默认的设置为：]，这样有时可能会因为系统权限的问题，导致不能正常成功的安装某些工具，那么我们可以先将npm安装的全局路径自定设置一下，比如：我们可以在nodejs的目录下[即你的node.js安装后的根目录]新建两个目录：，，然后找到目录下的目录下名为 或者 文件，[为安全，我们可以先将该文件copy一个副本出来进行备份]使用文本编辑器打开，修改并新增如下： 和 分别对应之前新建的目录 和 
通过步骤3设置后，后续在安装工具的时候，比如安装TypeScript，最终会安装到中，所以为了后续使用工具命令行，我们可以配置一个环境变量：
首先新建一个 -> ，然后在下新增
[这里只是为了说明问题，可不用进行这一步] 打开，运行命令：，这里不能正常像是版本号，这是由于这里还没有安装typescript，所以我们接下来就先安装TypeScript Compiler
在前面安装好Node.js后，我们可以直接使用npm工具来安装TypeScript，这个TypeScript的Package其实也是一个Compiler，我们可以通过这个Complier将typescript编译成javascript。打开命令提示符(或其他终端Terminal)，输入指令：，稍等片刻即可完成TypeScript Compiler的安装。
如上图所示，下载的TypeScript版本为1.8.10，在官网，该版本为最新稳定版，所以不需要更新，如果我们下载的版本小于这个版本，我们可以使用如下命令来进行更新：
首先按照准备工作里面提供的链接下载对应平台的vscode安装包
这里我先在桌面上新建一个的目录来存放一些我的Demo Projects，然后选中右键使用 vscode 打开或者打开，切换到下，然后输入命令： 既可以使用 vscode 打开目录。
接着，在该目录下新建一个名为的目录：
在下新建一个名为的文件，并输入如下代码：
我们发现这就是一个简单的javascript code，那么我继续改造一下这个代码，弄得稍微复杂点，加入接口和类：
继续在该目录下新建一个的文件，并在body中引入脚本：
首先在目录下创建一个名为的文件，可以手动创建该文件，并输入如下代码：
也可以使用命令自动创建这个配置文件，中切换到目录，然后输入命令： 即可自动创建
接下来我们继续输入编译命令，编译；输入指令：, 其中是监控的意思，当typescript文件内容发生改变时会自动进行编译。
我们可以看到，目录下多了一个后缀的同名文件，这就是typescript编译后的javascript文件。
同时我们还可以更改中的属性，调整编译出来的javascript版本
最后我们将index.html用Chrome或者Firefox打开看看效果：
- http://www.open-open.com/lib/...
- https://www.typescriptlang.or...
- https://code.visualstudio.com...
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/164607.html