灏天阁

彻底弄懂tsconfig配置compilerOptions

· Yin灏

tsc 编译读取文件规则

定义目录解构

ts-project
├─tsconfig.json
├─src
|  ├─index.js
|  └index.ts

tsconfig.js

target: es2016;
module: commonjs;
strict: true;
esModuleInterop: true;
skipLibCheck: true;
forceConsistentCasingInFileNames: true;
  • 执行编译命令时指定了具体的文件或者文件夹，例如 tsc ./src/index.ts，则编译器只会读取当前目录下的 tsconfig.json 文件，不会一直往上遍历父级目录。
  • 如果使用默认命令 tsc / tsc -p tsconfig.json进行编译，会默认读取上层的 tsconfig 配置文件

1. target

“target”: “es5” /* target 用于指定编译之后的版本目标:

‘ES3’ (default), ‘ES5’, ‘ES2015’, ‘ES2016’, ‘ES2017’, ‘ES2018’, ‘ES2019’ or ‘ESNEXT’.

如上 index.ts

const arr = [1, 2, 3];
() => {
  console.log("打印***a", arr);
};

ES3 编译结果

image.png ES6 编译结果

image.png

2. strict alwaysStrict

会默认将结果加上 ‘use strict’

alwaysStrict 会每次加上

image.png

use strict 是 JavaScript 中的一种严格模式，它在 ECMAScript 5（简称 ES5）中被引入。通过在脚本或函数的顶部添加 use strict 声明，可以启用严格模式。严格模式会对代码执行施加一些限制，以此来避免某些常见的错误和不安全的行为。这些限制包括：

  1. 全局变量必须显式声明：在严格模式下，如果不使用 var、let 或 const 关键字来声明变量，将会抛出错误。
"use strict";
x = 10; // 抛出 ReferenceError: x is not defined
  1. 禁止删除已声明的变量：在非严格模式下，可以使用 delete 操作符删除已声明的变量。但在严格模式中，这将导致语法错误。
"use strict";
var x = 10;
delete x; // 抛出 SyntaxError
  1. 禁止重复的参数名称：在严格模式下，函数参数中不允许有重复的参数名称。
"use strict";
function myFunc(a, a) {} // 抛出 SyntaxError: Duplicate parameter name not allowed in this context
  1. 禁止八进制数字语法：在严格模式下，不允许使用八进制字面量（以 0 开头的数字）。
"use strict";
var x = 0123; // 抛出 SyntaxError: Octal literals are not allowed in strict mode
  1. 对 this 的限制：在非严格模式下，全局作用域中的 this 指向全局对象（浏览器环境中是 window）。在严格模式下，全局作用域中的 this 值为 undefined。
"use strict";
console.log(this); // 输出 undefined

  1. 禁止使用 with 语句：在严格模式下，不允许使用 with 语句，该语句会导致代码难以理解和调试。

  2. 显示错误：严格模式更容易发现潜在的错误。例如，在赋值给只读属性时，非严格模式下可能会默默失败，而严格模式下将抛出错误。

3. noImplicitThis

this 不确定报错 默认是 false

() => {
  console.log("打印***a", this);
};

设置为 true，vscode 报错

image.png

设置为 false 正常

4. noUnusedLocals

“noUnusedLocals”: true, /* 用于检查是否有定义了但是没有使用的变量，对于这一点的检测，使用 eslint 可以在你书写代码的时候做提示，你可以配合使用。它的默认值为 false */

image.png

5. lib noLib

如果 target 为 ES3,默认导入 ES3 的 lib，此时想加入其他的用处，需要在 lib 中额外加入

noLib: 不需要库文件与 lib 互斥

例如 process 是 node 的，需要安装@types/node 会

image.png

例如 console.log 是在默认的 lib.dom.d.ts 中

image.png

如果安装了@types/node 会覆盖原有的声明

image.png

6. experimentalDecorators emitDecoratorMetadata

"experimentalDecorators": true /* 用于指定是否启用实验性的装饰器特性 */
"emitDecoratorMetadata": true, /* 用于指定是否为装饰器提供元数据支持，关于元数据，也是ES6的新标准，可以通过Reflect提供的静态方法获取元数据，如果需要使用Reflect的一些方法，需要引入ES2015.Reflect这个库 */

7. module 导出方式

只有导出才用 cmd

image.png

amd

image.png

umd

image.png

esNext

image.png

8. rootDir outDir

“outDir”: “./dist”, /* outDir 用来指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹 */

“rootDir”: “./”, /* 用来指定编译文件的根目录，编译器会在根目录查找入口文件，如果编译器发现以 rootDir 的值作为根目录查找入口文件并不会把所有文件加载进去的话会报错，但是不会停止编译 */

"outDir": "./dist",
"rootDir": "./src",

dist 文件夹中只出现 src 下的编译文件。不会出现其他文件，但是其他文件也会在自身文件夹下编译

路径错误无法进行编辑,如果配置了 includes 会限制在此定义的文件下

image.png

9. moduleResolution

寻找模块的方式,，它告诉编译器如何解析模块导入语句中的模块名称，以便正确地找到相应的模块。

在使用 Node 策略时，还需要指定"baseUrl"和"path"属性来告诉编译器如何查找模块。

{
"compilerOptions": {
"moduleResolution": "node",
"baseUrl": "./src",
"paths": {
"app/*": \["template/*", "src/\*"]
    }
  }
}

“baseUrl"指定在哪里开始查找模块. 是相对路径 ./ ，而"paths"指定如何将导入语句中的模块名称映射到实际的文件路径。

import app from "app/index";
//就是映射到template下的文件，多个可以进行依次寻找

10 typeRoots types

typeRoots:[”./src/types"]

“typeRoots”: [], /* typeRoots 用来指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载 */

例如使用 process 已经安装了@types/node 重新设置 typeRoots 路径 则 process 找不到

image.png

上面重新指定 types 根路径，如果没有，可以使用 type 进行导入@types 中的声明文件

image.png

image.png

“types”: []

  • types 用来指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载进来

“allowSyntheticDefaultImports”: true

  • 用来指定允许从没有默认导出的模块中默认导入

“esModuleInterop”: true

  • 通过为导入内容创建命名空间，实现 CommonJS 和 ES 模块之间的互操作性

“preserveSymlinks”: true

  • 不把符号链接解析为其真实路径，具体可以了解下 webpack 和 nodejs 的 symlink 相关知识

11. resolveJsonModule

解析 json 文件，必须是 commonjs 设置

"resolveJsonModule": true,  /* Enable importing .json files. */

12 noResolve

noResolve: 默认会导入定义的函数，不到如 type 类型定义

比如设置为 true 则安装 jquery 式不导入声明文件

13 allowJs + checkJS

如果引入 js 文件会导致以下错误

image.png

如果没有使用 var 定义变量会报错

image.png

14 sourceMap

代码映射 方便调试

{
    "version":3,
    "file":"index.js",
    "sourceRoot":"",
    "sources":[
        "index.ts"
    ],
    "names":[

    ],
    "mappings":";;AAAA,uCAAkC;AAClC,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,gBAAK,CAAC,CAAA"
}

15 outFile outDir removeComments

outFile 输出为一个文件 只能是 amd 或者 system 才能生成

outFile: "./bundler.js"

image.png

outDir : ‘./dist’ 注意：如果设置了outFile，以outFile设置为准，因为可能设置成不同文件夹，如果需要为dist 则outFile设为 ‘./dist/bundler.js’

removeComments: 删除编译后的注释

image.png

image.png

16 noEmit

是否生成物理文件，如果设置为 true，就不会生成 js 文件

17 noImplicitAny

为隐含的 any 报错,设置为 true, x 没有定义会报错

image.png

18 strictNullChecks、strictFunctionTypes、strictBindCallApply、strictPropertyInitialization

strictNullChecks null 校验

“strictFunctionTypes”: true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */

“strictBindCallApply”: true

image.png

strictPropertyInitialization 属性初始化 strictNullChecks 防止初始化为 null 同时开启

alwaysStrict 严格模式

noUnusedLocals 存在未被使用的局部变量报错

noUnusedParameters 未被使用参数

noImplicitReturns

allowUnreachableCode 不能运行到代码报错

18 skipLibCheck

以.d.ts 声明的为库文件，不能进行赋值，设置为 true 可以直接跳过

image.png

为什么 vscode 会高亮，因为已经引入声明文件，例如 console

image.png

- Book Lists -