在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
用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里面去
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中 |
请发表评论