tsconfig.json 常用字段解析

curryBand
514 阅读5分钟

tsconfig.json 大部分字段都在 compilerOptions 对象中配置, 少数重要字段在顶层配置，常用字段如下

类型检查相关

allowUnreachableCode： 是否开启代码运行时 无法到达检查 默认undefined 三个配置选项： "false" | "true" | "undefined"

allowUnusedLabels： 是否报告没有使用到的标签错误 默认undefined 三个配置选项： "false" | "true" | "undefined" false 不报告 true 报告

alwaysStrict： 是否使用严格模式 编译生成的js文件包含 “use strict”

noImplicitAny： 使用any 时是否报错 false 不报错 true 报错

noImplicitReturns： 当函数的所有路径不是都有返回值时报错 true | false

noUnusedLocals： 不允许存在没有使用的变量 默认false

noUnusedParameters: 不允许存在没有使用的参数 默认false

strict: 是否采用严格模式

strictFunctionTypes：严格函数类型 默认fasle

strictNullChecks： null 和 undefined 检查 false 不检查 true 检查

strictPropertyInitialization： class 中使用 检是否有字段在class 中没有被初始化 并且在constructor 中没有被设置初始值

useUnknownInCatchVariables: try catch 中捕获 error 时 默认错误类型为unknow 默认 false

noImplicitOverride： 用于子类覆盖父类方法可用 若子类使用了 override 修饰符 但父类没有相关的同名方法会报错

noImplicitThis： 具有隐含“any”类型的“this”表达式上引发错误。也就是说当“this”的类型为“any”时启用错误报告

noFallthroughCasesInSwitch: 设置是否对没有break语句（或者return和throw语句）的 switch 分支报错，即case代码里面必须有终结语句（比如break） true 是 false 否

模块相关

allowImportingTsExtensions： 允许导入的ts 拓展名 此标志仅在启用--noEmit或--emitDeclarationOnly时才允许

allowUmdGlobalAccess： 允许全局访问UMD 模块导出的模块

baseUrl： tsconfig.json 配置文件查找编译的起始位置

customConditions： 和package.json 配置中的exports字段有关 具体可查看 ts详细配置

module：指定生成哪个系统模块的代码 commonjs amd umd systemes6/es2015es2020es2022esnextnode16nodenextpreserve等配置

moduleResolution: 模块解析字段 即如何定位和加载模块。支持 node10 Classic Bundler(typescript 5支持) nodenext node16

    • node10 支持 nodejs 10之前的版本 同时只支持cjs 现在大多数情况下已经不再需要
    • node 16 nodenext 支持现代的nodejs版本 支持esm 和 cjs 的导入导出 使用不同的解析算法 同时和module 字段相关联 支持packaga.json的 imports 和exports 字段
    • bundler 用于库打包 此模式支持packaga.json的 imports 和exports 字段 不需在导入的相对路径上使用拓展名 这是和node16 nodenext 的区别所在
    • classic 不再使用

checkJs: 设置对 JS 文件同样进行类型检查

composite: 与 TypeScript 项目可以进行增量构建有关

declaration：设置编译时是否为每个脚本生成类型声明文件.d.ts。

declarationDir： 设置生成的.d.ts文件所在的目录。

declarationMap： declarationMap设置生成.d.ts类型声明文件的同时，还会生成对应的 Source Map 文件。

esModuleInterop: esm 和 cjs 包互相引用的兼容性问题检查 如果module属性为node16或nodenext，则esModuleInterop默认为true，其他情况默认为false 在esm 和 cjs 互相的包互相引用的情况下使用

noEmit： 设置是否产生编译结果

lib: 描述项目需要加载的 TypeScript 内置类型描述文件 eg： ["dom","es2021"]

outDir: 指定编译产物的存放目录。如果不指定，编译出来的.js文件存放在对应的.ts文件的相同位置。

outFile： 设置将所有非模块的全局文件，编译在同一个文件里面。它只有在module属性为None、System、AMD时才生效，并且不能用来打包 CommonJS 或 ES6 模块 适用于 将多个输入文件的内容合并到一个输出文件中。

paths: paths设置模块名和模块路径的映射，也就是 TypeScript 如何导入require或imports语句加载的模块。paths基于baseUrl进行加载，所以必须同时设置后者。

    "paths": {
      "src/*": ["./src/*"]
      "*": ["./@mf-types/*"] //加载mf远程文件类型
    }

preserveConstEnums: 是否将 const enum结构保留下来 不编译替换成常量值

removeComments ： 移除 TypeScript 脚本里面的注释，默认为false

target: 指定编译出来的 JavaScript 代码的 ECMAScript 版本，比如es2021，默认是es3

typeRoots: 查找类型声明文件的目录 列表包含了所有声明文件的位置 告诉 ts 编译器去哪里找类型声明文件

types：设置typeRoots目录下需要包括在编译之中的类型模块

incremental: 用于记录增量编译的信息 让 TypeScript 项目构建时产生文件tsbuildinfo，从而完成增量构建。

isolatedModules： 强制每个文件独立编译，确保没有跨文件的依赖。主要便于非官方的编译工具（比如 Babel）正确编译单个脚本。

jsx: 用于项目中如何处理tsx文件 默认不填

    • preserve 保持 jsx 语法不变，输出的文件名为 jsx
    • react 将<div />编译成React.createElement("div")，输出的文件名为.js tsx 文件中需要导入样板代码
    • react-jsx 和 react-jsxdev 对 React 17 及以上版本的优化，省去导入样板代码 同时支持树摇 利用新的 JSX 转换方法。react-jsx 用于生产环境的优化转换。react-jsxde 用于开发环境，包含额外的开发时检查和调试信息。

顶层配置

  • references: 多项目 ts 增量构建 适合一个大项目由许多小项目构成的情况，用来设置需要引用的底层项目。 其余子项目tsconfig.json 需要设置 composite： true 属性
{
  "references": [
    { "path": "../pkg1" },
    { "path": "../pkg2/tsconfig.json" }
  ]
}
  • include : 指定所要编译的文件列表，既支持逐一列出文件，也支持通配符。文件位置相对于当前配置文件而定。
  • exclude: 必须与include属性一起使用，用来从编译列表中去除指定的文件。它也支持使用与include属性相同的通配符。
  • extends : 可以继承另一个tsconfig.json文件的配置。如果一个项目有多个配置，可以把共同的配置写成tsconfig.base.json，其他的配置文件继承该文件，这样便于维护和修改。
  • files: 属性指定编译的文件列表，如果其中有一个文件不存在，就会报错。

总结

持续更新 如有不足 欢迎指正~

avatar
文章
阅读
粉丝