关于vscode运行typescript

2,807 阅读1分钟

一,typescript简单介绍:

  • 1,typescript是由微软开发的一款开源的编程语言
  • 2,typescript是JavaScript的超集,遵循最新的es6、es5规范。typescript扩展了JavaScript的语法。
  • 最新的Vue、react也可以集成typescript
  • nodejs框架nestjs、midway中用的就是typescript语法。

二,typescript安装

  • 1, cnpm i -g typescript || npm i -g typescript || yarn add -g typescript
  • 2,检测安装是否成功: tsc -v
  • 3,编译: tsc index.ts

三,编译

  • 1,每次修改index.ts文件的代码,都要手动执行:tsc index.ts,非常麻烦。想偷懒,于是想,怎么能在vscode上,自动编译index.ts文件?
  • 2,看下面步骤。

四,实现

  • 1,创建tsconfig.json文件 : tsc --init

image-20210714194143395.png

  • 2,点击终端,找到配置任务

image-20210714194454994.png

  • 3,输入 tsc ,选择tsc监视(注意,正确路径)

image-20210714194711248.png

  • 4,新建一个html文件,引入 编译后的js文件

image-20210714194926681.png

  • 5,在ts文件里写代码,保存后自动编译成js文件

image-20210714195307157.png

  • 6,编译成功后,刷新html页面,即可看到效果

五,结束

一个简单的ts文件,就可以在vscode上完美编译并看到效果了。对于刚学习typescript或者准备学习typescript的小伙伴来说,是非常棒的。这样,边学边用代码检验,掌握的更牢固。