我们知道,在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编译器,请回去仔细弄第二步!
记住:tsc-x的命令和原版的tsc命令完全一样,只是它的一个扩展版。
现在,在vscode中,你可以仍掉reference这样的依赖指定编译顺序方法了。
大功告成!完美支持在vscode中使用ts语言!再也不担心依赖引用顺序了!
最后,推荐一个vscode里的小扩展插件:
【1】Typescript Importer 自动导入功能各种支持命名空间等
【2】Code Outline 显示当前ts文件内的所有函数列表功能,可以快速选择