Ts_01 环境的搭建与编译执行

环境搭建

  • TypeScript 编写的程序并不能直接通过浏览器运行，我们需要先通过 TypeScript 编译器把 TypeScript 代码编译成 JavaScript 代码

  • TypeScript 的编译器是基于 Node.js 的，所以我们需要先安装 Node.js

  1. yarn global add npm
  1. node -v #查看当前的node版本

安装TypeScript的编译器

  1. npm install -g typescript #通过npm安装
  2. yarn global add typescript # 通过yarn安装
  1. tsc -v # 安装完成后通过命令来查看当前tsc的版本

编写代码

代码编辑器-Vscode

vsCode 和 TypeScript 都是微软的产品， vsCode 本身就是基于 TypeScript 进行开发的， vsCode 对 TypeScript 有着天然友好的支持 https://code.visualstudio.com/

TypeScript 文件
默认情况下， TypeScript 的文件的后缀为 .ts

TypeScript 代码

  1. let str:string="Aoshisen"

编译执行

使用我们安装的 TypeScript 编译器 tsc 对 .ts 文件进行编译

  1. tsc helloWorld.ts

默认情况下会在当前目录下生成同名的js文件

一些游泳的编译选项

—outdir 指定编译文件输出目录

  1. tsc --outdir ./dist helloWorld.ts

—target 制定编译的代码的版本目标，默认为ES3

  1. tsc --outdir ./dist --target ES6 helloWorld.ts

—watch 在监听模式下运行，当文件发生改变的时候自动编译

  1. tsc --outDir ./dist --target ES6 --watch helloWorld.ts

但是每次都写着么一大堆的配置，会很麻烦且效率低下所以提供了一个编译配置文件 tsconfig.json在用户运行tsc命令的时候默认会去找到当前目录下面的tsconfig.json 文件然后根据配置文件里面的配置编译

编译配置文件

我们可以把编译的一些选项保存在一个指定的 json 文件中，默认情况下 tsc 命令运行的时候会自动 去加载运行命令所在的目录下的 tsconfig.json 文件，配置文件格式如下

  1. {
  2.     "compilerOptions": {
  3.         "outDir": "./dist",
  4.         "target": "ES2015",
  5.     "watch": true,
  6. },
  7. // ** : 所有目录(包括子目录)
  8. // * : 所有文件，也可以指定类型 *.ts "include": ["./src/**/*"]
  9. }

有了单独的配置文件，我们就可以直接运行

  1. tsc

指定加载的配置文件

使用 —project 或 -p 指定配置文件目录，会默认加载该目录下的 tsconfig.json 文件

  1. tsc -p ./configs

或者 也可以指定某个具体的配置文件

  1. tsc -p ./configs/ts.json