TypeScript 安装与使用

1. 环境准备： 

• 安装 Node.js 环境（version: 8.14.0+)
• 确保 npm 或者 yarn 可用

2. TypeScript 安装

通过 npm 全局安装 TypeScript：

npm install -g typescript

注：如果提示权限不足，请使用超管权限安装

TypeScript 在全局安装后，我们可以在任意位置使用 tsc 命令，tsc 命令负责编译 TypeScript 文件为 JavaScript 文件。

tsc -v

3. TypeScript 使用

3.1 通过全局 tsc 命令编译 TypeScript 代码

创建一个练习目录ts-practice，在目录下创建一个ts文件test.ts，用tsc进行编译

//test.ts
let ischoose: boolean = false
console.log(ischoose);
ischoose = Boolean(1)
console.log(ischoose);

用tsc进行编译

  tsc test.ts

 可以看到在同级目录下，生成了一个 test.js 文件。

 使用 tsc 命令进行初始化：

tsc --init

这时候你会发现目录下又多了一个 tsconfig.json 文件，它指定了用来编译这个项目的根文件和编译选项。

在进行简单的语法练习时，可以通过上面介绍的 tsc 命令来编译 ts 文件

ts编译运行结果：

方法一：通过ts-node插件直接运行.ts文件

1.安装ts-node 

npm install -g ts-node        //全局安装ts-node 

2.执行ts文件

ts-node test.ts

方法二：

1.tsc 命令来编译 ts 文件，并实时监控ts变化

  tsc test.ts --watch

2. nodemon 运行js文件

  npm i -g nodemon        //全局安装nodemon

  nodemon test.js        //保存后即可运行js文件

3.2 工程化编译方案

在实际项目工程中，可以采取另一种工程化方案：

① 在 ts-practice 目录下创建 src 目录：

mkdir src && touch src/index.ts

② 接下来用 npm 进行项目初始化

npm init

你会发现目录中多了一个 package.json 文件，它定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、作者、license等信息）。

将 package.json 中入口文件选项改为刚刚创建的 index.ts：

{
  "main": "src/index.ts",
}
 

③ 然后，使用 tsc 命令进行初始化：

tsc --init

这时候你会发现目录下又多了一个 tsconfig.json 文件，它指定了用来编译这个项目的根文件和编译选项。

Tips：

• 不带任何输入文件的情况下调用 tsc 命令，编译器会从当前目录开始去查找 tsconfig.json 文件，逐级向上搜索父目录。
• 当命令行上指定了输入文件时，tsconfig.json 文件会被忽略。

将刚才生成的配置文件稍作修改：

{
  "compilerOptions": {
    "target": "ESNext",     /* 支持 ES6 语法 */                      
    "module": "commonjs",                     
    "outDir": "./lib",
    "rootDir": "./src",
    "declaration": true,    /* 生成相应的.d.ts文件 */
    "strict": true, 
    "strictNullChecks": false,
    "noImplicitThis": true
  },
  "exclude": ["node_modules", "lib", "**/*.test.ts"],
  "include": ["src"]
}

④ 在 package.json 文件中，加入 script 命令以及依赖关系：

{
  "name": "ts-practice",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "tsc": "tsc"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^13.1.1",
    "typescript": "^3.7.4"
  }
}

⑤ 根据配置文件 package.json 中的配置选项，下载所需模块，也就是配置项目所需的运行和开发环境：

npm install

你会看到多了一个 node_modules 文件夹和一个 package-lock.json 文件，node_modules 文件夹是项目的所有依赖包，package-lock.json 文件将项目依赖包的版本锁定，避免依赖包大版本升级造成不兼容问题。

⑥ 与介绍 tsc 命令时一样，将以下内容写入 index.ts 文件：

// src/index.ts
export enum TokenType {
  ACCESS = 'accessToken',
  REFRESH = 'refreshToken'
}

⑦ 在项目根目录输入编译命令：

npm run tsc

这时候可以看到多了一个 lib 文件夹，里面的内容就是项目的编译结果了！ 

4. 小结

本节主要介绍了 TypeScript 的安装与两种使用方式：

• 全局 tsc 命令直接编译 ts 文件。
• 工程化方案，通过 script 脚本 运行编译。