TypeScript配置、tsconfig.json配置文件，TypeScript使用详解
关于TypeScript【JavaScript的超集】
1、TypeScript 是 JavaScript 的一个超集，换句话说，所有的JavaScripe程序代码已经是TtypScript程序代码了，反之不行，因为TypeScript有自己的一些语法。
.
2、TypeScript 支持 ECMAScript 6 - 10… 标准（在未来的新ECMAScript标准中，可能会拥有TypeScript的所有）。
.
3、TypeScript 由微软开发的自由和开源的编程语言。
.
4、TypeScript 设计目标是开发大型应用，它最终是编译成标准的JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上、任何计算机和任何操作系统上运行，并且是开源的。
.
5、TypeScript的类型检查系统是静态的（就是当你在编写代码时，不用运行代码，就能提提前推断错误，并给出解决方案）
相关资源
TypeScript 中文官网，TypeScript 英文官网
TypeScript安装
可用命令行的TypeScript编译器可以使用Node.js包来安装。
全局安装
如：npm install -g typescript
局部安装
如：npm i typescript
文件编译(生成对应的.js文件)
在TypeScript安装成功后，会得到两个可执行文件（命令）
1、tsc //TypeScript编译器
2、tsserver //TypeScript独立服务器（用于提供语言服务，如：自动补全，导航，检查，重构等）
在要编译ts文件的目录中打开DOS命令行工具，输入 tsc ts文件名 回车
如：tsc xxx.ts
注：回车后系统会在当前目录，自动编译并生成一个对应文件名的js文件，也可以在后面指定要输出的目录。
监听ts文件(更新对应的js文件)
注：如果我们每修编写或修改一次ts文件，就要去执行一次编译命令的话，这可是一件很繁琐的事情，此时我们可以通过监听到ts文件有变化时，自动编译并生成、更新js文件）
* 以前做法：
1、在生成的tsconfig.json文件中，把 “outDir”: “./js”, 的注释取消，并指定输出js文件在当前路径下的js目录中
2、【注：这是在项目第一次的时候要操作的】在vsCode中选择终端菜单 -> 配置任务 -> 在弹出的列表中向下滑动选择 -> tsc:构建 - xx项目名/tsconfig.json
3、在vsCode中选择终端菜单 -> 运行任务 -> 在弹出的列表中选择 -> tsc:监视 - xx项目名/tsconfig.json
4、运行后系统会自动生成一个js目录，编译并生成一个对应的js文件，这个文件就是标准的、浏览器能识别的、能解析的js文件啦!
5、现在你修改ts文件时，系统会自动同步到对应的js文件中
* 现在做法：
* 监听单个ts文件
如：tsc xxx.ts -w
* 监听xxx目录下所有的ts文件
如：tsc
注：直接在xxx目录下执行tsc命令【前提是：xxx目录下要有tsconfig.json 配置文件才行！！！】
创建TpyeScript配置文件（初始化tsconfig.json 文件）
配置tsconfig.json是在项目开发中是必须要做的一件事情，尤其是在项目是由多人协同开发时，这将起到很好的规范作用！在tsconfig.json配置文件中，许多配置选项控制着从哪里寻找ts源文件、监测、输出等控制着语言本身的核心方面。
当然在编译时再添加关相的配置也行：(但不建议这样做)
如：tsc – onImplicitAny xxx.ts
在项目根目录中（在前端工程中，就是在src/目录，和package.js同级），打开Dos命令工具 执行如下命令：
如：tsc -init
命令执行后会自动生成一个tsconfig.json 的配置文件。
tsconfig.json 配置文件明说
{
"compilerOptions": {
/* 访问 https://aka.ms/tsconfig.json 以阅读有关此文件的更多信息 */
/* 基本选项 */
"incremental": true, /* 启用增量编译 */
"target": "ESNEXT", /* 指定 ECMAScript 目标版本：'ES3'、'ES5'（默认）、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020' 或 'ESNEXT'。 */
"module": "commonjs", /* 指定模块代码生成：“none”、“commonjs”、“amd”、“system”、“umd”、“es2015”、“es2020”或“ESNext”。 */
"lib": [], /* 指定要包含在编译中的库文件。 */
"allowJs": true, /* 允许编译 javascript 文件。 */
"checkJs": true, /* 报告 .js 文件中的错误。 */
"jsx": "preserve", /* 指定 JSX 代码生成：'preserve'、'react-native' 或 'react'。 */
"declaration": true, /* 生成相应的“.d.ts”文件。 */
"declarationMap": true, /* 为每个对应的“.d.ts”文件生成一个源映射。 */
"sourceMap": true, /* 生成相应的“.map”文件。 */
"outFile": "./", /* 连接输出到单个文件。 */
"outDir": "./", /* 将输出结构重定向到目录。 */
"rootDir": "./", /* 指定输入文件的根目录。用于通过 --outDir 控制输出目录结构。 */
"composite": true, /* 启用项目编译 */
"tsBuildInfoFile": "./", /* 指定文件存放增量编译信息 */
"removeComments": true, /* 不要向输出发出注释（删除除代码注释）。 */
"noEmit": true, /* 不发出输出（不生成编译后的文件）。 */
"noEmitOnError": true, /* 在输出js代码时，如果有错将不编译文件。 */
"importHelpers": true, /* 从 'tslib' 导入发射助手。 */
"downlevelIteration": true, /* 以“ES5”或“ES3”为目标时，为“for-of”、展开和解构中的迭代提供全面支持。 */
"isolatedModules": true, /* 将每个文件转换为一个单独的模块（类似于 'ts.transpileModule'）。 */
/* 严格的类型检查选项 */
"strict": true, /* 启用所有严格的类型检查选项。 在开发中，建议将stricet这类选项都开启。 */
"strictNullChecks": true, /* 启用严格的空（undefined、null）检查，可以防止“未定义不是对象”。 建议开启*/
"strictFunctionTypes": true, /* 启用函数类型的严格检查。 */
"strictBindCallApply": true, /* 在函数上启用严格的“绑定”、“调用”、应用”方法。 */
"strictPropertyInitialization": true, /* 启用对类中属性初始化的严格检查。 */
"noImplicitThis": true, /* 使用隐含的“any”类型在“this”表达式上引发错误。 */
"noImplicitAny": true, /* 使用隐含的“any”类型在表达式和声明上引发错误（主要用于控制变量、参数是否必须知道它们的类型【类型检查】），如果是将JavaScript迁移到TypeScript时，可以关闭此项，但不建议这样做。 */
"alwaysStrict": true, /* 以严格模式解析并为每个源文件发出“使用严格”。 */
/* 额外检查 */
"noUnusedLocals": true, /* 报告未使用的本地人的错误。 */
"noUnusedParameters": true, /* 报告未使用参数的错误。 */
"noImplicitReturns": true, /* 不是函数中的所有代码路径都返回值时报告错误。 */
"noFallthroughCasesInSwitch": true, /* 在 switch 语句中报告失败情况的错误。 */
/* 模块分辨率选项 */
"moduleResolution": "node", /* 指定模块解析策略：'node' (Node.js) 或 'classic' (TypeScript pre-1.6)。 */
"baseUrl": "./", /* 解析非绝对模块名称的基目录。 */
"paths": {}, /* 一系列将导入重新映射到相对于“baseUrl”的查找位置的条目。 */
"rootDirs": [], /* 根文件夹列表，其组合内容代表运行时项目的结构。 */
"typeRoots": [], /* 包含类型定义的文件夹列表。 */
"types": [], /* 类型声明文件要包含在编译中。 */
"allowSyntheticDefaultImports": true, /* 允许从没有默认导出的模块中默认导入。 这不会影响代码发出，只是类型检查。 */
"esModuleInterop": true, /* 通过为所有导入创建命名空间对象，在 CommonJS 和 ES 模块之间启用发射互操作性。 暗示“allowSyntheticDefaultImports”。 */
"preserveSymlinks": true, /* 不解析符号链接的真实路径。 */
"allowUmdGlobalAccess": true, /* 允许从模块访问 UMD 全局变量。 */
/* 源映射选项 */
"sourceRoot": "", /* 指定调试器应该定位 TypeScript 文件而不是源位置的位置。 */
"mapRoot": "", /* 指定调试器应该定位映射文件而不是生成位置的位置。 */
"inlineSourceMap": true, /* 发出带有源映射的单个文件而不是单独的文件。 */
"inlineSources": true, /* 在单个文件中与源映射一起发出源； 需要设置“--inlineSourceMap”或“--sourceMap”。 */
/* 实验选项 */
"experimentalDecorators": true, /* 启用对 ES7 装饰器的实验性支持。 */
"emitDecoratorMetadata": true, /* 为装饰器的发射类型元数据启用实验性支持。 */
/* 高级选项 */
"skipLibCheck": true, /* 跳过声明文件的类型检查。 */
"forceConsistentCasingInFileNames": true /* 禁止对同一文件的大小写不一致的引用。 */
}
}
TypeScript中的数据类型
在TS中为使编写的代码更加规范、更有利于维护，故增加了数据类型校验！！
| 类型 | 名称 | 实例 | 描述 |
|---|---|---|---|
| string | 字符串 | ‘xxx’，“xxx” | 任意字符 |
| number | 数字 | 1，-6，28.3 | 任意数字 |
| object | 对象 | { key: value } | js对象 |
| boolean | 布尔 | true，false | 真、假 |
| array | 数组 | [1, 2, 3] | js 数组 |
| tuple | 元组 | [123, ‘666’, false] | Tuple 它属性于 数组类型中的一种 |
| enum | 枚举 | enum { A, B=‘123’} | 从0开始，如果没有给标识符赋值时，那标识符的值为对应所以的下标！ |
| any | 任意类型 | * | 任意类型（注：如果都用any，那TS的类型系统就失去意义了） |
| unknown | 顶级类型 | * | 类型安全的any，每当想使用 any 时，应该先试着用 unknown |
| never | 没有值 | 其他类型 | 它包括 null 和 undefined 两种类型，代表从来都不会出现的值 |
| void | 空值 | undefined | 在ts中void表示没有任何类型，一般在定义方法的时候，而方法没有返回值时用 |
| null | 是一个数 | null | null值的类型可能是：null 或 number 或 undefined |
| undefined | 不明确的 | var xxx; let xx; const: xxx | 常、变量已声明，但没赋任何值 |
| not defined | 未定义 | xxx | 连常、变量都没声明 |
| 字面量 | 字面量 | 其本身 | 定义常、变量时，不加类型限制（TS会隐式的加上） |
注：当把类型看作是值的集合时，any 和 unknown 是包含所有值的集合，因为 any 和 unknown 在 TypeScript 中是所谓的“顶部类型”。
* 而：unknown 类型是 any 的类型安全版本。每当你想使用 any 时，应该先试着用 unknown。
* 在 any 允许我们做任何事的地方，unknown 的限制则大得多。
TypeScript的错误处理
在TypeScript项目开发中，遇到有报错时，不用害怕（尤其是刚接触TypeScript的小伙伴们，可能还会对使用TypeScript产生抵触心理）当逐渐上手之后，就会体会到就是因为TypeScript提前告知我们在开发时的不足而带来的好处。
所以当遇到有报错时，首先要区分是什么错，再根据不同的错误信息来做对应的处理，从大范围可分为以下3种错误形式：
- 业务逻辑错误（与代码无关）。
- TypeScript类型检查没有通过。
- TypeScript编译没有通过。