ts文件编译与运行,vscode自动编译

ts文件编译与运行

根据官方文档提示，ts文件无法直接运行，需要编译成js文件。

1.那么问题就来了，如何把ts文件编译成js文件呢？

官方文档说，Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。

但是我的编辑器是vs code 并没有包含ts。所以需要我们去下载他。

npm全局下载 npm install -g typescript

备注: tsc -v 查看typescript版本

现在你就可以使用tsc [你的ts文件名来编译你所写的ts文件了]

示例：

编译成功你就可以在dome01.ts 同级目录里看见dome01.js的文件了。。

注意注意：此处需要注意，使用vs code编译器的小伙伴可能不会这么顺利，可能会出现红一片的可恶景象。

比如在使用 tsc 命令的时候会这样，包括 tsc -v 和 tsc 【文件名】

不要惊慌不要惊慌，这只是个小问题。那么是什么原因造成的呢？

PowerShell的默认执行策略是 Restricted，它禁止运行任何脚本和配置文件。故需更改PowerShell的设置来解决刚遇到的问题。

更改步骤

1. 使用 win+x 快捷键，会出现如下弹窗，鼠标左键单击Windows PowerShell 即可打开shell.

2. 运行 set-ExecutionPolicy RemoteSigned 命令，在询问更改执行策略的时候选择敲Y或者A

3. 运行 get-ExecutionPolicy 命令，可看到脚本的执行策略已被更改为 RemoteSigned

4. 回到vscode的终端，输入命令 tsc -v 不再报错，也可对ts文件进行编译。

此处为啥只有文没有图呢？因为我是cv的，详情请了解：大神之作

好了，按如上步骤操作完就可以愉快的编译ts文件了。

但是，，，，有个小问题就出来了，总不能每次更改一点代码，我们都要在终端tsc [文件名]手动编译一次吧，那多麻烦啊，我肯定是不愿意的

所以，有没有一个方法可以自动编译？答案肯定是 有的

vscode 自动编译ts文件的方式。

1. 首先 在项目文件根目录中运行 tsc --init

   此步骤会自动生成一个sconfig.json 文件

打开tsconfig.json文件修改和删除相应配置（如果想快速修改配置，请复制下列配置），不配置也可以直接使用默认配置

{
  "compilerOptions": {
   "target": "es5", // 指定ECMAScript目标版本 这里选择es5
   "noImplicitAny": false, // 隐藏“any”类型在表达式和声明上引发错误，这里选择不隐藏
   "module": "es2015", // 选择模块化加载规范 这里选择es2015 就是es6加载规范
   "removeComments": false, // 不输出注释 这里选择 输出 
   "sourceMap": false, // 生成相应的'.map'文件 这里选择否
   "allowSyntheticDefaultImports": true ,// 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。
     "outDir": "src/js" //你要生成js的目录,不设置默认同级
  }
}

2. 点击 VScode 上方菜单栏的 终端——运行任务——tsc:监视-tsconfig.json

   然后，

现在你就可以愉快的敲ts代码啦。

参考文献：01

02