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

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

安装步骤

1. 安装TS

npm install -g typescript

2. 创建 tsconfig.json 文件

## 生成配置文件 
tsc --init 

image.png

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

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

   
   
   

   image.png

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

image.png

遇到的问题

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

1. 这是vscode现在的配置

   
   
   

   image.png

2. 然后点击重置此设置

   
   
   
   
   

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