Typescript安装和编译,以及VSCode开发工具的相关配置

Typescript安装和编译

1. 安装npm:Typescript可以用npm安装, 去nodejs中文网站下载安装node.js,目的是下载安装额node.js包管理工具npm(安装好node.js默认就安装了npm).打开终端查看是否安装完成：node -v 查看 node 版本, npm -v 查看 npm版本;(查到版本说明已经安装好了)
2. 安装TypeScript : 全局安装TypeScript执行命令行：npm install typescript -g;安装完成后通过tsc -v查看版本号;
3. 将ts文件编译成js文件: 创建一个ts文件,cd到ts文件的根目录如cd /Users/xxx/Desktop/TS/day1,然后执行tsc xxx.ts命令会将ts文件编译成同样名称的js文件;(ts文件是不能直接调用的,必须编译成js文件).

Typescript 开发工具VSCode自动编译ts文件

• 上面每次将ts文件编译为js都需要通过命令行,这样很麻烦;vscode是支持编写ts代码的开发工具,我们可以配置相关环境,就可以达到边写ts边转为js文件(配置好后保存时就会转为js文件);
• 具体步骤:

  1. 创建配置文件: 打开终端 cd到ts文件的根目录,然后执行tsc --init,会生成一个xxxconfig.json的一个json配置文件,里面是一个对象的json;里面有一个outDir的key是用来配置编译后的js文件输出位置,默认是"./"即当前ts文件的根目录.可以改为"outDir": "./js",,这样生成编译成js时会在ts的根目录生成一个js文件夹用于存放编译后的js文件(路径是相对于ts文件的根目录的相对路径,自己看需要配置);
     
     

  2. 设置监听配置文件: 一定要将整个项目文件用vscode打开,即File->Open-文件,然后选择Terminal->Run Build Task->tsc:watch-xxxconfig.json,这时就会编译生成对应的js文件;
     

  3. 创建ts文件保存就自动生成js文件:上面配置好以后,不管是更改原来ts文件的内容,还是在ts根目录创建新的ts文件,然后点击保存后,会更新js内容或生成新的js文件;引入生成的js文件到html中,就可可以进行js学习了.
     
     注意:有时候点击保存ts文件并不能及时生成或更新对应的js文件,这时候再执行一下步骤2 ,或者退出后再执行一次步骤2;(步骤二一般只需要执行一次就行了).