( Visual Studio Code + TypeScript )

我们知道,在Windows下使用vscode IDE编译(typescript)ts文件时,如果有类与类的引用。

( Visual Studio Code + TypeScript

我用需要手工指定引用依赖关系,如果ts文件变多了,这个手工指定的过程就很累了:

///<reference path="xxxx/xxxx.ts" />

这样typescript编译器才能正确编译成js。


更新记录:增加对WebGL2.0相关API 的编译支持!!!


前提:

你的tsconfig.json配置里面的选项 outFile 必须开启。像这样


这个选项是把多个ts文件,编译合到一个js文件输出。


在VScode中依赖编译顺序错乱的解决方案:

实际上Egret和Laya的ts编译器已经实现了编译的自动排序。无需手工指定reference 依赖关系。

在官方的ts编译器中,至今也没有加入这个自动编译排序的功能。

但是在vscode中,有没有这样能支持自动排序的ts编译器呢?

有,它就是今天在网上找到的 typescript-box 编译工具(基于npm安装)。

它是基于官方原版的typescript扩展而成的,增加了自动排序编译功能。


【第一步】编译器安装方法(npm命令):

npm  install  -g  typescript-box



【第二步】切换vscode的编译器(重要!!):

安装完成后一定要切换vscode的tsdk编译器,只有在切换之后才会生效,切记!!:

文件-----首选项-----设置--------[ 工作区设置 ]


"typescript.tsdk": "C:/Users/sunnyboxs/AppData/Roaming/npm/node_modules/typescript-box/lib"

这个位置就是npm安装typescript-boxs的位置,用命令可以查看npm的安装位置(npm config get prefix)

选中项目任意一个ts文件,在最底部的状态点击ts版本号(鼠标的点击位置,下图红框指示处)

更改编译器版本,选择我们上面填的这个编译器版本。显示为2.7.3 表示正确。(版本还在更新,可能会不同)




【第三步】使用和tsc一样的编译命令:tsc-x

tsc-x   -w   --sortFiles

(参数选项:--sortFiles   自动排序选项)

在tsconfig.json中配置排序编译选项如下图所示:增加sortFiles节点值为true.

如果你的vscode提示错误:tsconfig.json中有不能识别的sortFiles选项。

表示你的sdk没切换到typescript-box编译器,请回去仔细弄第二步!

{
     "compilerOptions": {
         "sortFiles": true,
         "target": "es5",
         "declaration": true,
         "sourceMap": true,
         "outFile": "bin/js/Main.js",
         "noImplicitAny": false,
         "removeComments": false
    },
     "exclude": [
         "node_modules",
         "bin"]
}

记住:tsc-x的命令和原版的tsc命令完全一样,只是它的一个扩展版。

现在,在vscode中,你可以仍掉reference这样的依赖指定编译顺序方法了。

大功告成!完美支持在vscode中使用ts语言!再也不担心依赖引用顺序了!



最后,推荐一个vscode里的小扩展插件:

【1】Typescript Importer     自动导入功能各种支持命名空间等


【2】Code Outline    显示当前ts文件内的所有函数列表功能,可以快速选择



猜你喜欢

转载自blog.csdn.net/sjt223857130/article/details/80086178