1️⃣ TypeScripy 概述

简称 TS ，ts 是 js 的超集，是一个可选的，静态的类型系统。
类型检查
对代码中所有的标识符（ 变量，函数，参数，返回值 ）进行类型检查
可选的
静态的（ 在运行之前 ）

  1.   1. ts 的类型检测发生在运行之前
  2.   1. 无论浏览器环境还是 node 环境，无法直接识别 ts 代码，需要使用 tsc 编译为 js

1️⃣ 基本使用

2️⃣ 安装

全局安装 typescript：**npm install -g typescript**

2️⃣ 编译

**tsc name.ts**
将指定的 name.ts 文件编译为 js 文件
**tsc name.ts --watch**
编译 ts 文件并监控 ts 文件的变化实时编译

3️⃣ 编译对比

在编译 ts 文件后，会出现这样的报错。这是因为 ts 文件有默认行为。
image.png

4️⃣ TS 的默认情况

假设当前的执行环境是 dom ( 浏览器运行环境 )
如果代码中没有使用模块化语法，便认为该代码是全局执行 <script src="..." />
编译的目标代码是 ES3

4️⃣ 有两种方法可以更改以上假设

在使用 tsc 命令时加上选项，也就是在命令行工具执行时加上知道的选择配置。
使用 tsc 配置文件
推荐使用配置文件方式

2️⃣ 配置 tsconfig.json

自动生成配置文件：**tsc --init** ( 使用了配置文件后，使用 tsc 进行编译时，不能在跟上文件名，如果跟上文件名就会忽略配置文件。 )

  1. {
  2.   // 编译选项
  3.   "compilerOptions": {
  4.     "target": "ES2016", // 要编译成什么版本
  5.     "module": "commonjs 或者 es6", // 要使用的模块语法
  6.     "lib": ["ES2016"], // 要支持的环境 - 不加其他的话为 node 环境，加 "DOM" 为浏览器运行环境
  7.     "outDir": "./dist", // 编译的出口
  8.     "strictNullChecks": true, // 可以获得更严格的空类型检查，让 null 和 undefined 只能赋值给自身
  9.     "sourceMap": true, // 是否生成代码地图
  10.     "isolatedModules": true, // 强制要求每一个单独的文件都是一个模块
  11.     "moduleResolution": "node", // 设置解析模块的模式
  13.     // 开启严格模式后 noImplicitUseStrict 就不能去除 "use strict"，strict 和 noImplicitUseStrict 不能同时指定
  14.     "strict": true, // 是否开启严格模式
  15.     "noImplicitUseStrict": true, // 编译结果中不包含 "use strict" ，或者说非严格模式
  17.     "removeComments": true, // 编译结果移除注释
  18.     "noEmitOnError": true, // 错误时不生产编译结果
  19.     "esModuleInterop": true, // 启用 es 模块化交互非 es 模块导出
  20.     "strictPropertyInitialization": true, // 更加严格的属性初始化
  21.     "noImplicitAny": true, // 开启对隐式 any 的检查，表示 TS 中不可以使用隐私的 any
  22.     "noImplicitThis": true, // 表示不允许 this 的指向隐式指向 any
  23.     "emitDecoratorMetadata": true // 生成装饰器元数据
  24.   },
  25.   // 入口文件夹 - 要编译什么文件下的 ts 文件
  26.   "include": ["./src"]
  27.   // "files": [] 可以指定需要编译的文件而非文件夹
  28. }