vscode配置ts自动编译及其遇到的问题

如果,你仅仅是想学习一下Typescript的话,那完全不需要搞什么复杂的webpack去搭建项目,配置一下vscode自动编译TS功能即可。
配置ts的步骤也很简单,分三步走。

安装步骤

  1. 安装TS
npm install -g typescript
  1. 创建 tsconfig.json 文件
## 生成配置文件 
tsc --init 
image.png

target参数会让TS代码编写成es5的代码
outDir参数决定了你编译成功的js文件储存在哪里

  1. 点击菜单 终端-运行任务


    image.png

点击 tsc:监视-tsconfig.json 然后就可以自动生成代码了

image.png

遇到的问题

等我按照上面配置完成之后,本想快快乐乐的学习TS了,结果事情远没有那么简单,我发现,我的ts文件并没有被编写成js,终端虽然开启了,但是一点动静都没有。
百思不得其解,上网查了很多资料也没有解决,最后,想是不是终端的配置有问题呢,就抱着试一试的心态尝试了一下。

  1. 这是vscode现在的配置


    image.png
  2. 然后点击重置此设置



    还原为vscode的默认终端,再去运行任务,发现就可以了。所以大家如果遇到类似的问题,也可以试一下是不是你原先修改了vscode默认终端导致的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容