chengaofeng
发布于 2024-07-15 / 15 阅读
0
0

tsconfig.json核心配置和系列相关问题

{
  "compilerOptions": {
    /* 访问 https://aka.ms/tsconfig 以了解更多关于此文件的信息 */

    /* 项目 */
    // "incremental": true,                              /* 保存 .tsbuildinfo 文件以允许项目的增量编译。 */
    // "composite": true,                                /* 启用约束,允许将TypeScript项目用于项目引用。 */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* 指定 .tsbuildinfo 增量编译文件的路径。 */
    // "disableSourceOfProjectReferenceRedirect": true,  /* 在引用复合项目时,禁用优先使用源文件而不是声明文件。 */
    // "disableSolutionSearching": true,                 /* 在编辑时选择让项目退出多项目引用检查。 */
    // "disableReferencedProjectLoad": true,             /* 减少TypeScript自动加载的项目数量。 */

    /* 语言和环境 */
    "target": "es2016",                                  /* 设置发出的JavaScript的语言版本,并包含兼容的库声明。 */
    // "lib": [],                                        /* 指定一组捆绑的库声明文件,这些文件描述目标运行时环境。 */
    // "jsx": "preserve",                                /* 指定生成的JSX代码的形式。 */
    // "experimentalDecorators": true,                   /* 启用对旧版实验性装饰器的实验性支持。 */
    // "emitDecoratorMetadata": true,                    /* 为源文件中装饰过的声明发出设计类型元数据。 */
    // "jsxFactory": "",                                 /* 指定用于目标React JSX发出时的JSX工厂函数,例如 'React.createElement' 或 'h'。 */
    // "jsxFragmentFactory": "",                         /* 指定用于目标React JSX发出时片段的JSX片段引用,例如 'React.Fragment' 或 'Fragment'。 */
    // "jsxImportSource": "",                            /* 指定在使用 'jsx: react-jsx*' 时用于导入JSX工厂函数的模块说明符。 */
    // "reactNamespace": "",                             /* 指定用于 'createElement' 的调用对象。这仅适用于目标为'react' JSX发出时。 */
    // "noLib": true,                                    /* 禁止包含任何库文件,包括默认的 lib.d.ts。 */
    // "useDefineForClassFields": true,                  /* 发出符合ECMAScript标准的类字段。 */
    // "moduleDetection": "auto",                        /* 控制用于检测模块格式JS文件的方法。 */

    /* 模块 */
    "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>' 扩展项目中应包含的文件数量。 */

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

    /* 发射 */
    // "declaration": true,                              /* 从项目中的TypeScript和JavaScript文件生成.d.ts文件。 */
    // "declarationMap": true,                           /* 为d.ts文件创建源映射。 */
    // "emitDeclarationOnly": true,                      /* 仅输出d.ts文件,不输出JavaScript文件。 */
    // "sourceMap": true,                                /* 为发出的JavaScript文件创建源映射文件。 */
    // "inlineSourceMap": true,                          /* 在发出的JavaScript中包含源映射文件。 */
    // "outFile": "./",                                  /* 指定一个文件,将所有输出捆绑到一个JavaScript文件中。如果 'declaration' 为真,也指定一个捆绑所有.d.ts输出的文件。 */
    "outDir": "./lib",                                   /* 指定所有发出文件的输出文件夹。 */
    // "removeComments": true,                           /* 禁止发出注释。 */
    // "noEmit": true,                                   /* 禁止从编译中发出文件。 */
    // "importHelpers": true,                            /* 允许从tslib中导入辅助函数一次,而不是每个文件中都包含它们。 */
    // "downlevelIteration": true,                       /* 为迭代发出更符合标准,但更冗长且性能较差的JavaScript。 */
    // "sourceRoot": "",                                 /* 指定调试器查找参考源代码的根路径。 */
    // "mapRoot": "",                                    /* 指定调试器应在哪里而不是生成的位置查找映射文件。 */
    // "inlineSources": true,                            /* 在发出的JavaScript中的源映射中包含源代码。 */
    // "emitBOM": true,                                  /* 在输出文件的开头发出UTF-8字节顺序标记(BOM)。 */
    // "newLine": "crlf",                                /* 设置发出文件的换行符。 */
    // "stripInternal": true,                            /* 禁止发出在其JSDoc注释中有 '@internal' 的声明。 */
    // "noEmitHelpers": true,                            /* 禁止在编译输出中生成自定义辅助函数,如 '__extends'。 */
    // "noEmitOnError": true,                            /* 如果报告了任何类型检查错误,则禁止发出文件。 */
    // "preserveConstEnums": true,                       /* 在生成的代码中禁止擦除 'const enum' 声明。 */
    // "declarationDir": "./",                           /* 指定生成的声明文件的输出目录。 */

    /* 互操作性约束 */
    // "isolatedModules": true,                          /* 确保每个文件可以安全地进行单独转译,而不依赖于其他导入。 */
    // "verbatimModuleSyntax": true,                     /* 不转换或省略任何未标记为仅类型的导入或导出,确保它们根据 'module' 设置以输出文件的格式写入。 */
    // "isolatedDeclarations": true,                     /* 要求在导出上有足够的注释,以便其他工具可以轻松生成声明文件。 */
    // "allowSyntheticDefaultImports": true,             /* 当模块没有默认导出时,允许 'import x from y'。 */
    "esModuleInterop": true,                             /* 发出额外的JavaScript以简化对导入CommonJS模块的支持。这为类型兼容性启用了 'allowSyntheticDefaultImports'。 */
    // "preserveSymlinks": true,                         /* 禁止将符号链接解析为它们的真实路径。这与node中的同名标志相对应。 */
    "forceConsistentCasingInFileNames": true,            /* 确保导入中的大小写正确。 */

    /* 类型检查 */
    "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,                       /* 确保在派生类中标记了覆盖成员的覆盖修饰符。 */
    // "noPropertyAccessFromIndexSignature": true,       /* 强制使用索引访问器对使用索引类型声明的键进行访问。 */
    // "allowUnusedLabels": true,                        /* 禁用未使用标签的错误报告。 */
    // "allowUnreachableCode": true,                     /* 禁用不可达代码的错误报告。 */

    /* 完整性 */
    // "skipDefaultLibCheck": true,                      /* 跳过检查TypeScript附带的.d.ts文件的类型。 */
    "skipLibCheck": true                                 /* 跳过检查所有.d.ts文件的类型。 */
  },
  // "files":[
  //   "src/index.ts"
  // ],                                                     /* 指定要包含在编译中的文件列表。 */
  // "extends":[
  //   "./tsconfig.base.json"                               /* 继承基础配置 */
  // ],
  // "include": [
  //   "src/**/*.ts"
  // ],                                                     /* 指定要包含在编译中的文件列表。 */  
  // "exclude": [
  //   "node_modules"
  // ],                                                     /* 指定要排除在编译中的文件列表。 */
  // "references":[]                                        /* 指定项目引用。 */                               
}

compilerOptions

files

files 字段在 tsconfig.json 文件中用于指定需要 TypeScript 编译器编译的文件列表。当你在项目中只有少数几个文件需要编译,并且不想使用通配符(glob)来匹配多个文件时,这个选项非常有用。通过在 files 数组中列出文件名,你可以明确告诉 TypeScript 编译器只编译这些指定的文件。如果列出的任何文件不存在,TypeScript 编译器将会报错。

{
  "compilerOptions": {},
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]
}

extends

  • extends 允许一个 TypeScript 配置文件继承另一个配置文件的设置。

  • 继承的配置可以覆盖基础配置文件中的设置。

  • filesincludeexclude 设置会被继承的配置文件中的同名设置覆盖。

  • 配置文件之间不允许有循环引用。

  • 继承中唯一不包括的顶级属性是 references

  • 配置文件中的相对路径会相对于它们所在的配置文件解析。

includet和exclude

includeexclude 字段在 tsconfig.json 文件中用于指定要包含或排除在编译程序中的文件名或模式数组。这些文件名是相对于包含 tsconfig.json 文件的目录解析的。

例如,使用以下配置:

{

  "include": ["src/**/*", "tests/**/*"]

}

将会包含:

  • src 目录下的所有文件(包括所有子目录)

  • tests 目录下的所有文件(包括所有子目录)

而不会包含:

  • scripts 目录下的任何文件

includeexclude 支持使用通配符来创建 glob 模式:

  • * 匹配零个或多个字符(不包括目录分隔符)

  • ? 匹配任何一个字符(不包括目录分隔符)

  • **/ 匹配任何级别的嵌套目录

如果模式中的最后一个路径段不包含文件扩展名或通配符,则将其视为目录,该目录内具有支持的扩展名的文件将被包含(默认为 .ts.tsx.d.ts,如果设置了 allowJstrue,则还包括 .js.jsx)。

references

项目引用是一种将 TypeScript 程序结构化为更小部分的方法。使用项目引用可以大大提高构建和编辑器交互时间,强制在组件之间进行逻辑分离,并以新的和改进的方式组织代码。

主要优点

  • 提高构建和编辑器交互时间:通过将程序分解为更小的部分,可以减少编译时间,因为 TypeScript 可以仅重新编译更改的部分,而不是整个项目。

  • 强制逻辑分离:项目引用要求明确地定义组件之间的依赖关系,有助于保持代码的清晰和组织。

  • 改进的代码组织:项目引用提供了一种新的方式来组织和管理代码,使得大型项目更易于管理。

如何工作

tsconfig.json 文件中,你可以使用 references 属性来指定项目引用。这允许你定义一个项目依赖于另一个项目的方式,从而使 TypeScript 能够更智能地处理编译过程。

例如:

{
  "references": [
    { "path": "./core" },
    { "path": "./utils" }
  ]
}

这个配置表示当前项目依赖于路径为 ./core./utils 的两个项目。

结论

项目引用是 TypeScript 中一个强大的功能,它提供了一种有效的方法来组织和构建大型和复杂的代码库。通过利用项目引用,开发者可以提高构建效率,强化代码之间的逻辑分隔,并以更结构化的方式组织项目。

配置了 "references" 之后,TypeScript 编译器会按照以下步骤进行编译:

  1. 识别项目引用:编译器首先识别 tsconfig.json 文件中的 "references" 字段,这告诉编译器当前项目依赖于其他项目(在这个例子中是 ./core./utils)。

  2. 加载依赖项目:编译器接着加载每个引用路径指向的项目。这意味着它会查找每个路径下的 tsconfig.json 文件,并根据这些文件中的配置来加载和编译这些项目。

  3. 编译顺序:编译器会首先编译依赖项(在这个例子中是 ./core./utils),确保所有依赖的代码都被编译和处理。这是因为当前项目可能依赖于这些项目中的代码,因此需要先编译它们以确保类型检查和其他编译步骤的正确性。

  4. 隔离和复用:通过项目引用,编译器可以更智能地处理代码,例如避免重复编译未更改的依赖项。这不仅提高了编译效率,还确保了项目之间的逻辑隔离。

  5. 增量编译:如果使用了 TypeScript 的增量编译特性(通过设置 "composite": true 在每个项目的 tsconfig.json 中),编译器将只重新编译自上次构建以来发生变化的项目,进一步提高编译效率。

  6. 输出:编译器将根据每个项目的 tsconfig.json 配置输出编译结果。这可能包括生成 JavaScript 文件、声明文件(.d.ts)等。

通过这种方式,TypeScript 的项目引用功能支持大型项目的模块化和高效编译,使得项目管理和维护更加方便。


评论