TS四-tsconfig.json个别配置参数说明

tsconfig.json 个别参数配置介绍

请访问 https://www.typescriptlang.org/tsconfig 以阅读有关 tsconfig 的更多信息

tsconfig.jsonTypeScript 项目的配置文件,用于指定编译器的行为和项目的设置。

顶层配置

{
  "compilerOptions": {},
  "include": [],
  "exclude": [],
  "references": [],
  "extends": "",
  "files": [],
}

compilerOptions

compilerOptions 这是一个包含编译器选项的对象,用于配置 TypeScript 编译器的行为,常用选项:

  • target: 指定目标 JavaScript 版本。示例:"target": "es2016"
  • module: 指定模块系统的类型。示例:"module": "commonjs"
  • outDir: 指定编译后的 JavaScript 文件输出目录。示例:"outDir": "dist"
  • strict: 启用严格的类型检查。示例:"strict": true
  • sourceMap: 生成相应的 source map 文件,用于调试。示例:"sourceMap": true
  • resolveJsonModule 启用对 JSON 模块的支持。示例:"resolveJsonModule": true

include

指定要包含在编译中的文件或文件夹的模式,示例:"include": ["src/**/*.ts", "src/**/*.vue"]

exclude

指定要从编译中排除的文件或文件夹的模式。示例:"exclude": ["node_modules", "dist", "**/*.js"]

references

允许配置项目之间的引用关系,并允许 TypeScript 在更智能的方式下进行构建。示例:

"references": [
  { "path": "../utils" },
  { "path": "../common", "prepend": true }
]

extends

允许继承另一个 tsconfig.json 文件的配置。示例:"extends": "./base-tsconfig.json"

files

列出要直接包含在编译中的文件。(指定哪些文件使用该配置,属于手动一个个指定文件)。示例:"files": ["main.ts", "helper.ts"]

常见的配置

{
  "compilerOptions": {
    "allowJs": true,    //允许编译器编译JS,JSX文件
    "target": "ES2015", //指定ECMAScript目标版本
    "useDefineForClassFields": true,
    "module": "ESNext", //设置程序的模块系统
    "moduleResolution": "Node", //模块解析策略。默认使用node的模块解析策略
    "strict": true, //启用所有严格类型检查选项
    "jsx": "preserve", //preserve模式,在preserve模式下生成代码中会保留JSX以供后续的转换操作使用
    "sourceMap": true, //生成目标文件的sourceMap文件
    "resolveJsonModule": true, //允许导入扩展名为“.json”的模块
    "esModuleInterop": false, //允许module.exports=xxx 导出,由import from 导入.因为很多老的js库使用了commonjs的导出方式,并且没有导出default属性
    "lib": [ //TS需要引用的库
      "ESNext",
      "DOM"
    ],
    "forceConsistentCasingInFileNames": true, //禁止对同一个文件的不一致的引用
    "allowSyntheticDefaultImports": true, //允许从没有设置默认导出的模块中默认导入
    "skipLibCheck": true, //忽略所有的声明文件( *.d.ts)的类型检查
    "baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录
    "paths": {      //模块名到基于 baseUrl的路径映射的列表
      "/@/*": [
        "src/*"
      ],
    },
    "types": [ //要包含的类型声明文件名列表
      "vite/client",
      "element-plus/global",
    ]
  },
  "include": [ //包含的文件
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx",
    "src/**/*.vue",
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

TSConfig compilerOptions

TSConfig compilerOptions 编译选项, 部分配置说明笔记

{
  "compilerOptions": {
    /* Projects(项目设置) */
    "incremental": true,    /* 保存.tsbuildinfo文件以允许对项目进行增量编译。(TS编译器在第一次编译之后会生成一个存储编译信息的文件,第二次编译会在第一次的基础上进行增量编译,可以提高编译的速度)*/
    "composite": true,      /* 当此设置开启时:如果没有明确指定 rootDir,则默认为包含 tsconfig.json 文件的目录;所有实现的文件必须由 include 来匹配,或在 files 数组中指定。如果违反了这一约束,tsc 将告诉你哪些文件没有被指定;declaration 默认为 true。 */
    "tsBuildInfoFile": "/.tsbuildinfo",     /* 指定 .tsbuildinfo 文件的路径 */
    "disableSourceOfProjectReferenceRedirect": true,  /* 禁用在引用复合项目时优先使用源文件而不是声明文件。 */
    "disableSolutionSearching": true,                 /* 在编辑时将一个项目从多项目引用检查中排除。 */
    "disableReferencedProjectLoad": true,             /* 减少 TypeScript 自动加载的项目数量。 */
        
    /* Language and Environment(语言和环境设置)*/
    "target": "es2016",     /* 设置生成的 JavaScript 代码的目标版本 */
    "lib": [],              /* 指定一组捆绑的库声明文件,描述目标运行环境 */
    "jsx": "preserve",      /* 指定生成的 JSX 代码样式 */
    "experimentalDecorators": true,     /* 启用实验性的装饰器语法支持 */
    "emitDecoratorMetadata": true,      /* 在源文件中为带装饰器的声明生成设计类型元数据 */
    "jsxFactory": "",       /* 指定用于生成 React JSX 代码的 JSX 工厂函数,例如 ‘React.createElement’ */
    "jsxFragmentFactory": "",           /* 指定在生成 React JSX 代码时的 JSX Fragment 引用,例如 ‘React.Fragment’ */
    "jsxImportSource": "",              /* 指定使用 ‘jsx: react-jsx*’ 时导入 JSX 工厂函数的模块规范符 */
    "reactNamespace": "",   /* 指定 ‘createElement’ 被调用时的对象,仅在使用 ‘react’ JSX 时生效 */
    "noLib": true,          /* 禁用包含任何库文件,包括默认的 lib.d.ts */
    "useDefineForClassFields": true,    /* 使用 ECMAScript 标准规范的类字段定义语法 */
    "moduleDetection": "auto",          /* 控制用于检测模块格式 JS 文件的方法 */

    /* Modules(模块) */
    "module": "commonjs",                             /* 指定生成的模块代码类型。 */
    "rootDir": "./",                                  /* 指定源文件的根文件夹。 */
    "moduleResolution": "node10",                     /* 指定 TypeScript 如何根据给定的模块说明符查找文件。 */
    "baseUrl": "./",                                  /* 指定用于解析非相对模块名称的基础目录。 */
    "paths": {},                                      /* 指定一组条目,将导入信息重新映射到其他查找位置。 */
    "rootDirs": [],                                   /* 在解析模块时将多个文件夹视为一个文件夹。 */
    "typeRoots": [],                                  /* 指定多个模拟 ‘./node_modules/@types’ 的文件夹。 */
    "types": [],                                      /* 指定要包含但在源文件中不引用的类型包名称。 */
    "allowUmdGlobalAccess": true,                     /* 允许从模块中访问 UMD 全局变量。 */
    "moduleSuffixes": [],                             /* 解析模块时搜索的文件名后缀列表。 */
    "allowImportingTsExtensions": true,               /* 允许导入包括 TypeScript 文件扩展名。需要设置 ‘–moduleResolution bundler’ 并且 ‘–noEmit’ 或 ‘–emitDeclarationOnly’。 */
    "resolvePackageJsonExports": true,                /* 在解析包导入时使用 package.json 的 ‘exports’ 字段。 */
    "resolvePackageJsonImports": true,                /* 在解析导入时使用 package.json 的 ‘imports’ 字段。 */
    "customConditions": [],                           /* 解析导入时设置的条件,除了解析器特定的默认条件。 */
    "resolveJsonModule": true,                        /* 启用导入 .json 文件。 */
    "allowArbitraryExtensions": true,                 /* 启用导入任何扩展名的文件,前提是存在声明文件。 */
    "noResolve": true,                                /* 禁止 ‘import’、‘require’ 或 ‘<reference>’ 扩大 TypeScript 应该添加到项目中的文件数。 */

    /* JavaScript Support (JavaScript支持) */
    "allowJs": true,                                  /* 允许 JavaScript 文件成为程序的一部分。使用 ‘checkJS’ 选项来检查这些文件中的错误。*/
    "checkJs": true,                                  /* 在经过类型检查的 JavaScript 文件中启用错误报告。*/
    "maxNodeModuleJsDepth": 1,                        /* 指定用于检查 ‘node_modules’ 中的 JavaScript 文件的最大文件夹深度。仅适用于 ‘allowJs’。*/

    /* Emit */
    "declaration": true,                              /* 从项目中的 TypeScript 和 JavaScript 文件生成 .d.ts 文件。*/
    "declarationMap": true,                           /* 为 d.ts 文件创建 sourcemaps。*/
    "emitDeclarationOnly": true,                      /* 仅输出 .d.ts 文件,不输出 JavaScript 文件。*/
    "sourceMap": true,                                /* 为生成的 JavaScript 文件创建 sourcemap 文件。*/
    "inlineSourceMap": true,                          /* 将 sourcemap 文件包含在生成的 JavaScript 内部。*/
    "outFile": "./",                                  /* 指定一个文件,将所有输出内容捆绑到一个 JavaScript 文件中。如果 ‘declaration’ 为 true,还指定一个用于捆绑所有 .d.ts 输出的文件。*/
    "outDir": "./",                                   /* 为所有生成的文件指定输出目录。*/
    "removeComments": true,                           /* 禁用注释输出。*/
    "noEmit": true,                                   /* 禁用从编译中生成文件。*/
    "importHelpers": true,                            /* 允许从 tslib 中导入帮助函数,一个项目中只导入一次,而不是每个文件都包含。*/
    "importsNotUsedAsValues": "remove",               /* 指定仅用于类型的导入的输出/检查行为。*/
    "downlevelIteration": true,                       /* 为迭代生成更符合规范但冗长且性能较差的 JavaScript 代码。*/
    "sourceRoot": "",                                 /* 指定调试器查找引用源代码的根路径。*/
    "mapRoot": "",                                    /* 指定调试器应该定位 map 文件的位置,而不是生成的位置。*/
    "inlineSources": true,                            /* 在生成的 JavaScript 内部的 sourcemaps 中包含源代码。*/
    "emitBOM": true,                                  /* 在输出文件开头输出一个UTF-8字节顺序标记(BOM)。*/
    "newLine": "crlf",                                /* 设置输出文件的换行符。*/
    "stripInternal": true,                            /* 禁用生成具有 JSDoc 注释中的 ‘@internal’ 的声明。*/
    "noEmitHelpers": true,                            /* 禁用在编译输出中生成自定义 helper 函数,如 ‘__extends’。*/
    "noEmitOnError": true,                            /* 如果报告了任何类型检查错误,则禁用生成文件。*/
    "preserveConstEnums": true,                       /* 禁用在生成的代码中消除 ‘const enum’ 声明。*/
    "declarationDir": "./",                           /* 为生成的声明文件指定输出目录。*/
    "preserveValueImports": true,                     /* 在 JavaScript 输出中保留没有使用的导入值,否则会将其删除。*/


    /* Interop Constraints (交互约束)*/
    "isolatedModules": true,                          /* 确保每个文件都可以安全地转译,而无需依赖其他导入项。*/
    "verbatimModuleSyntax": true,                     /* 不要转换或省略任何未标记为仅类型的导入或导出项,确保它们按照输出文件的格式编写,基于 ‘module’ 设置。*/
    "allowSyntheticDefaultImports": true,             /* 允许在一个模块没有默认导出时使用 ‘import x from y’。*/
    "esModuleInterop": true,                          /* 生成额外的 JavaScript 以便更容易支持导入 CommonJS 模块。这也启用了 ‘allowSyntheticDefaultImports’ 以确保类型兼容性。*/
    "preserveSymlinks": true,                         /* 禁用解析符号链接为其实际路径。与 node 中的相同标志相关联。*/
    "forceConsistentCasingInFileNames": true,         /* 确保导入项的大小写正确。*/

    /* Type Checking(类型检查) */
    "strict": true,                                   /* 启用所有严格的类型检查选项。*/
    "noImplicitAny": true,                            /* 对具有隐含的 ‘any’ 类型的表达式和声明启用错误报告。*/
    "strictNullChecks": true,                         /* 在类型检查时,考虑 ‘null’ 和 ‘undefined’。*/
    "strictFunctionTypes": true,                      /* 在分配函数时,检查参数和返回值是否是子类型兼容的。*/
    "strictBindCallApply": true,                      /* 检查 ‘bind’、‘call’ 和 ‘apply’ 方法的参数是否与原始函数匹配。*/
    "strictPropertyInitialization": true,             /* 检查在构造函数中声明但未设置的类属性。*/
    "noImplicitThis": true,                           /* 当 ‘this’ 被赋予类型 ‘any’ 时,启用错误报告。*/
    "useUnknownInCatchVariables": true,               /* 将默认的 catch 子句变量设为 ‘unknown’ 而不是 ‘any’。*/
    "alwaysStrict": true,                             /* 确保始终发出 ‘use strict’。*/
    "noUnusedLocals": true,                           /* 在本地变量未被读取时启用错误报告。*/
    "noUnusedParameters": true,                       /* 在函数参数未被读取时引发错误。*/
    "exactOptionalPropertyTypes": true,               /* 将可选属性类型按原样解释,而不添加 ‘undefined’。*/
    "noImplicitReturns": true,                        /* 在函数中显式返回的代码路径启用错误报告。*/
    "noFallthroughCasesInSwitch": true,               /* 在 switch 语句中的穿透案例启用错误报告。*/
    "noUncheckedIndexedAccess": true,                 /* 在通过索引访问时将 ‘undefined’ 添加到类型中。*/
    "noImplicitOverride": true,                       /* 确保在派生类中重写的成员标记为 override 修饰符。*/
    "noPropertyAccessFromIndexSignature": true,       /* 强制使用索引访问器来声明使用索引类型的键。*/
    "allowUnusedLabels": true,                        /* 禁用对未使用的标签的错误报告。*/
    "allowUnreachableCode": true,                     /* 禁用对无法访问的代码的错误报告。*/

    /* Completeness */
    "skipDefaultLibCheck": true,                      /* 跳过对 TypeScript 中包含的 .d.ts 文件的类型检查。 */
    "skipLibCheck": true                              /* 跳过对所有 .d.ts 文件的类型检查。 */
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值