TypeScript编译环境配置

TypeScript 安装和配置

• 全局安装TypeScript语言的编辑器

  npm i -g typescript

• 用vscode打开项目文件夹，右键选择在终端中打开，在终端中输入

  tsc -int
  // tsc是ts语言的编译器，c是compile的意思 ，编译

• 结果：在当前项目文件夹生成tsconfig.json文件，其中保存的是将ts编译为js时所需的配置，比如：

  • target："ES5"，在将ts文件编译为js文件时，编译为ES5的版本，兼容更多浏览器
  • module："commonJS"，将来ts文件中模块化开发所采用的标准
  • strict：true，将ts文件编译js文件时，自动启用严重模式

编译--运行ts文件

手动编译

• 新建xxx.ts文件

  let a:number=10;
  console.log(a);

• 再编译ts文件为js文件

  • 打开命令行窗口，输入tsc xxx.ts

• 结果，tsc编译器将.ts文件的内容翻译为等效的js文件，保存在ts文件旁边的同名xxx .js

  "use strict"
  var a=10;
  console.log(a);

• 生成的js文件进行修改就不归编译器管了，所以js文件不允许修改

• ts只是在开发阶段来规范，限制的标准而已，实际上将来的运行的还是js文件

配置自动编译

• 在vscode中选择终端 -> 运行生成任务 -> tsc:监视xxx
• 结果，只要一修改ts文件，一保存，就自动编译，自动创建js文件
• 不输入 命令，运行js文件
  • 先打开要运行的js文件
  • 点左边小虫+三角图标
  • 点运行和调试
  • 选择nodejs
  • 看到执行结果