用npm安装typescript之类的东西就不说了
1. 首先创建一个文件夹作为项目目录,然后用vs code打开,并在目录上创建main.ts文件,敲入代码 console.log("hello world"); 作为运行测试用
现在如果直接运行,会提示"Cannot launch project xxxxx, javascript cannot be found.",在这个提示框中,点击Open launch.json,它会自动创建一个launch.json,不过暂时可以不管这个launch.json
2. vs 菜单栏中点开Terminal,选择New Terminal,下面会有terminal窗口,可以输入一些ts的指令,如果你的环境没问题,那么,输入 tsc -init ,vs code会自动在项目根目录下创建一个 tsconfig.json 文件 ,然后我们需要修改它
3. 关于tsconfig.json的中配置选择,我没有专门去研究它,只罗列平时自己用的吧
compilerOptions 的选项有些是被注释掉的,下面我列出来的如果有被注释掉的,则需要打开
1) target是ts的版本,我用的是默认的es5
2) sourceMap是ts断点用的,设为true,否则打不了断点
3) outDir为运行目录,我将它修改为 "./bin",这样ts编译后输出的js文件全都会放在这里,不会显示那么乱
4) allowJs为是否编译目录下的js文件,默认为true估计好一些,原因忘了
除了默认的compilerOptions,其实还可以添加另一个字段 exclude,你的项目里,可能存在一些目录是不需要ts去编译的,比如bin,lib,node_modules等等,把它们统统列到exclude里面去
4. 现在就可以回到launch.json了,由于定了输出目录,所以应当建个src文件夹把源码全转到src下面比较整洁,那么 launch.json 中的program也应当由 "${workspaceFolder}\\main.ts" 修改为"${workspaceFolder}\\src\\main.ts"
5. 由于使用的是ts语言,所以需要先编辑再运行,所以请选择并点击菜单栏中的 Run Build Task,然后在弹出选择中选择 tsc-build task.json,main.ts会自动被编译成main.js并输出到bin目录下,这时候,选择菜单栏下的Debug中的Start Debug,项目就能跑起来了。
不过这还没完,因为如果每次都需要手动去build的话,那就太不方便了,所以现在要修改launch.json,将 "preLaunchTask": "tsc: build - tsconfig.json" 添加进去,别忘了逗号
这么一来,你就不用手动编译了,现在尝试在hello world 后面加上 it's me,然后直接Start Debug,项目就能跑起来了,可能你看不到打印,这是因为项目在编译的时候会自动切换到Teminal窗口下,编译完了却不会自动切回Debug Console,的确有点烦。
6. 至于网传的什么task.json,好像没卵用
7. node的库如何引用?在Teminal中输入node i @types/node,敲回车就可以了,要记得将node_modules文件夹添加到tsconfig.json的exclude中