TypeScript(十六)配置相关(tsconfig配置)

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: TypeScript(十六)配置相关(tsconfig配置)

前言

本文收录于TypeScript知识总结系列文章,欢迎指正!

上篇文章,我们对TS配置中的命令行配置做了介绍,本文将对tsconfig.json配置做个解析

tsconfig.json是TypeScript中用于配置编译器选项的配置文件。该文件通常位于TypeScript项目的根目录下,并告诉TypeScript编译器如何处理项目中的TypeScript文件。

下面我将分享一些常用的配置,以及官方提供的配置供参考

常用配置

下面的配置只是一个字段的展示,如果直接使用在ts项目中可能会造成冲突报错

{
    "compilerOptions": {
        /* 基本选项 */
        "target": "es5", // 指定 ECMAScript 目标版本,如:"es3", "es5", "es6", "es2015", "es2016", "esnext" 等
        "module": "commonjs", // 指定生成代码的模块系统,如:"none", "commonjs", "amd", "system", "umd", "es2015", "es2020" 等
        "lib": [], // 指定要包含在编译中的库文件列表,例如:["dom", "dom.iterable", "esnext"]
        "allowJs": true, // 允许编译 JavaScript 文件
        "checkJs": true, // 启用在 .js 文件中的 JSDoc 类型检查
        "jsx": "preserve", // 指定 JSX 代码的生成:"preserve", "react-native", 或 "react"
        "declaration": true, // 生成对应的 ".d.ts" 文件
        "declarationMap": true, // 生成对应的 ".d.ts.map" 文件以支持编辑器中的跳转
        "sourceMap": true, // 生成对应的 ".map" 文件
        "outFile": "./out.js", // 将输出文件合并为一个文件,需要指定输出文件的路径
        "outDir": "./out", // 指定输出目录,所有的输出文件将被放置在此目录下
        "rootDir": "./", // 指定输入文件的根目录,用于控制输出目录结构
        "composite": true, // 启用项目编译,用于构建项目间的依赖关系
        "tsBuildInfoFile": "./", // 指定文件以存储增量编译信息,需要指定对应的文件路径
        "removeComments": false, // 删除编译后的所有注释
        "noEmit": true, // 不生成输出文件,只进行类型检查
        "importHelpers": true, // 从 tslib 导入辅助工具函数,如 "__extends", "__rest", 等辅助函数
        "downlevelIteration": true, // 当目标为 "ES5" 或 "ES3" 时,为迭代器提供完全支持
        "isolatedModules": true, // 将每个文件作为单独的模块进行转换
        /* 严格的类型检查选项 */
        "strict": true, // 启用所有严格的类型检查选项
        "noImplicitAny": false, // 在表达式和声明上有隐含的 any 类型时报错
        "strictNullChecks": true, // 严格的 null 检查
        "strictFunctionTypes": true, // 函数类型的严格检查
        "strictBindCallApply": true, // 严格的 bind/call/apply 检查
        "strictPropertyInitialization": true, // 严格的属性初始化检查
        "noImplicitThis": true, // 当 'this' 表达式值为 'any' 类型时报错
        "alwaysStrict": true, // 以严格模式解析并为每个源文件写入 "use strict"
        /* 额外的检查 */
        "noUnusedLocals": true, // 报告未使用的局部变量错误
        "noUnusedParameters": true, // 报告未使用的参数错误
        "noImplicitReturns": true, // 不是所有代码路径都返回值时报错
        "noFallthroughCasesInSwitch": true, // 报告 switch 语句的 case 无故贯穿
        /* 模块解析选项 */
        "moduleResolution": "node", // 选择模块解析策略,可能的值:"node" 或 "classic"
        "baseUrl": "./", // 用于相对模块名的基目录,指定解析非相对模块名的基准目录
        "paths": {}, // 模块名到基于 'baseUrl' 的路径映射的列表,例如:{ "module": ["path/to/module"] }
        "rootDirs": [], // 根文件夹列表,其组合内容表示运行时项目结构
        "typeRoots": [], // 包含类型声明的文件夹列表,可以是例如 ["./typings", "./node_modules/@types"]
        "types": [], // 需要包含的类型声明文件,例如:["node", "jest"]
        "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块中默认导入
        "esModuleInterop": true, // 启用esModule风格的导入支持
        "preserveSymlinks": true, // 不解析符号链接的实际路径
        /* Source Map 选项 */
        "sourceRoot": "./", // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
        "mapRoot": "./", // 指定调试器应找到映射文件而不是生成文件的位置
        "inlineSourceMap": true, // 生成单个文件内的 source maps
        "inlineSources": true, // 将代码和 source maps 生成到一个文件中
        /* 其它选项 */
        "experimentalDecorators": true, // 启用实验性的装饰器支持
        "emitDecoratorMetadata": true, // 为装饰器提供的类型元数据添加设计类型元数据支持
        "skipLibCheck": false, // 跳过声明文件的类型检查,对声明文件 (.d.ts) 跳过类型检查
        "forceConsistentCasingInFileNames": true, // 确保在引用文件时使用一致的大小写
        "resolveJsonModule": true, // 允许 TypeScript 解析 JSON 模块
        /* 插件选项 */
        "plugins": [] // 插件的配置项,提供一个数组来配置插件
    },
    "include": [
        "src/**/*.ts"
    ], // 指定要编译的文件夹和模式,例如:["src/**/*.ts"]
    "exclude": [
        "node_modules"
    ], // 指定编译过程中需要跳过的文件夹和模式,例如:["node_modules", "**/*.spec.ts"]
    "extends": "./base.json", // 指定要继承的另一个配置文件的路径
    "files": [
        "core.ts",
        "sys.ts",
        "types.ts"
    ], // 指定要包含在编译中的单个文件列表
    "references": [] // 用于配置项目引用,管理 TypeScript 项目之间的依赖关系
}

全部配置

了解上面的代码可以提升解决问题的下限,一些常用的问题基本可以涵盖到,接下来要分享的是截止v4.x版本的完整的tsconfig文件,对提升TS知识上限或许有所帮助

Compiler Options (编译器选项)

编译器的配置选项,控制TypeScript编译过程

Type Checking(类型检查)

类型检查配置,确保代码的类型安全性。

  1. allowUnreachableCode:此选项用于控制是否允许代码中出现无法到达的代码块。在ts文件中,如果设置为true,TypeScript编译器会忽略那些永远不会执行到的代码,例如在return语句后面的代码。如果设置为false(默认值),则编译器会对这样的代码抛出警告。
  2. allowUnusedLabels:设定是否允许在代码中出现未使用的标签。在ts文件中,将此设为true,您可以定义标签(例如在循环前使用标签)而不使用它们,编译器不会给出警告。如果设为false(默认值),未使用的标签会导致编译器警告。
  3. alwaysStrict:该选项强制所有ts文件以严格模式运行,相当于在所有ts文件顶部自动加上了 "use strict"; 指令。这将使解析器在更严格的条件下运行,诸如不允许未声明的变量等。
  4. exactOptionalPropertyTypes:此选项要求可选属性类型必须明确指定其类型。在ts文件中使用时,例如,你不能将一个可能是undefined的属性赋值给仅声明了特定类型的可选属性。如果设置为true,这将强制要求额外的类型准确性。
  5. noFallthroughCasesInSwitch:当此选项设置为true时,它会防止switch语句中的case无意间"贯穿"到下一个case。它要求每个case后面都必须有一个break,return或throw语句,否则编译器会抛出错误。
  6. noImplicitAny:这个选项设置为true时会防止将变量隐式地设为any类型。这意味着你必须为每个变量、参数和函数返回值明确指定类型,否则TypeScript编译器会抛出错误。
  7. noImplicitOverride:开启这个选项要求在子类中重写父类方法时必须明确使用override关键字,这有利于提高代码的可读性和减少误写的错误。
  8. noImplicitReturns:当该选项设置为true时,它确保函数的所有代码分支都有返回值。这意味着如果你的函数声明返回了一个类型,那么所有分支都必须遵守这一点,否则会报错。
  9. noImplicitThis:启用这个选项后,this关键词在不明确类型的上下文中将会被认为是错误的。换句话说,你需要明确this的类型以防止编译器错误。
  10. noPropertyAccessFromIndexSignature:设置此项为true将禁止通过索引签名以点(.)方式访问属性。这意味着如果你有一个带索引签名的对象,你必须使用括号访问法来访问那些属性。
  11. noUncheckedIndexedAccess:此选项开启后,对索引类型的访问将被认为是不确定的,即可能是undefined。这确保了在访问像数组一类的索引类型时,必须考虑到未定义值的可能性。
  12. noUnusedLocals:开启这个选项会在本地作用域中声明了变量但未使用时给出错误。这有助于保持代码的清洁,避免冗余。
  13. noUnusedParameters:类似地,如果你在函数中定义了参数但在函数体内没有使用,开启此选项会导致编译器错误。
  14. strict:这是一个开关型选项,将其设置为true将同时启用多个严格检查的模式,包括上面提到的noImplicitAny、noImplicitThis、strictNullChecks等等,基本上是强类型检查的严格模式。
  15. strictBindCallApply:设置此选项后,bind、call和apply方法必须传递正确类型的参数,否则会导致编译错误。
  16. strictFunctionTypes:开启此选项会对函数类型赋值进行更严格的检查,特别是在处理函数参数类型与返回类型的兼容性时。
  17. strictNullChecks:该选项开启时,null和undefined每个类型都会被视为不同。这要求你在可能出现null或undefined的情况下进行显式检查。
  18. strictPropertyInitialization:此选项确保每个类的属性都必须声明时就初始化,或者在构造函数中初始化,否则编译器会抛出错误。
  19. useUnknownInCatchVariables:如果开启这个选项,那么catch块中的异常变量将使用unknown类型而不是any,这意味着你必须在对其进行任何操作之前对它进行类型检查。这有利于减少运行时错误。

Modules(模块)

模块系统的配置,管理代码的组织结构

  1. allowUmdGlobalAccess:这个设置允许你在模块中访问UMD全局。也就是说,即使你处于一个模块环境中(例如使用了import或者export),你仍然能够访问那些用UMD格式定义的全局变量。
  2. baseUrl:baseUrl是用来设置非相对模块的基准路径。例如,如果你设置了"baseUrl": "./src",那么当你使用像import * as utils from "utils"这样的导入语句时,TypeScript编译器会从src文件夹开始查找utils。
  3. customConditions:该配置项用于定义在import或export时解析模块路径的自定义条件,通常与条件性导出相关。
  4. module:此选项用于指定要使用的模块代码生成方式。比如"module": "commonjs"将生成适用于Node.js的CommonJS模块,而"module": "esnext"将会输出ES6模块,以适配更现代的JavaScript环境。
  5. moduleResolution:这个配置项决定了TypeScript如何解析模块。你可以设置它为"node"以使用Node.js的模块解析策略,或是"classic"来使用TypeScript旧的模块解析方式。
  6. moduleSuffixes:这个选项可以让你指定在解析模块时要附加到模块名称上的字符串数组,以此来控制模块的解析策略。
  7. noResolve:设置为true时,TypeScript编译器将不会尝试解析或加载外部模块和声明文件的import声明。这通常用于调试模块解析问题。
  8. paths:此选项用于设置一个路径映射,用于导入时的重定向。例如,你可以映射"components/*": ["./src/components/*"],这样在你的ts文件中通过import { Button } from "components/button"会被重定向到src / components / button。
  9. resolveJsonModule:当此选项开启时,TypeScript允许你导入JSON文件作为模块。这意味着你可以通过标准模块导入语句来获取JSON文件中的数据。
  10. resolvePackageJsonExports:与上述customConditions类似,该配置允许解析符合package.json中exports字段的模块路径。
  11. resolvePackageJsonImports:此设置在解析import语句时允许对package.json文件中的imports字段进行解析。
  12. rootDir:该选项指定输入文件的根目录。这通常用于控制输出目录结构,编译器会以此目录为基础生成输出文件的结构。
  13. rootDirs:类似于rootDir,rootDirs是一个路径的列表,TypeScript编译器会将这些目录虚拟地合并在一起,就好像它们是在一个文件夹中一样。
  14. typeRoots:这个选项允许你指定用于声明文件的文件夹列表。TypeScript将只会包含这些路径中的 *.d.ts文件,这允许你有更细粒度的控制哪些类型声明文件被包含进来。
  15. types:此设置用于指定需要包含的类型声明文件。它允许你列出所有期望加载的 @types包的名称数组。如果这个列表是空的,所有可见的 @types包将被包含进来。

Emit(发出)

控制TypeScript的输出、生成文件

  1. declaration:当这个选项设置为true时,TypeScript编译器会为每个ts文件生成.d.ts文件。这些声明文件作为TypeScript代码暴露给其他项目的类型定义,它们不包含具体的实现。
  2. declarationDir:此选项用于指定声明文件(.d.ts)的输出目录。你可以指定一个专门的文件夹来存放这些生成的类型声明文件。
  3. declarationMap:如果启用,编译器会为每个生成的声明文件(.d.ts)同时生成对应的源码映射文件(.map)。这些文件有助于调试器根据声明文件映射回原始源码。
  4. downlevelIteration:当这个选项为true时,TypeScript将会使用兼容旧版本JavaScript的方式来编译for:of循环、展开操作符等迭代器相关语法。
  5. emitBOM:设置这个值为true时,会在输出文件的开始处加入一个字节顺序标记(Byte Order Mark)。这可以影响文件在某些编辑器或者操作系统中的显示。
  6. emitDeclarationOnly:如果这个选项为true,编译器只会生成声明文件(.d.ts),而不会生成JavaScript代码文件。
  7. importHelpers:该选项为true时,编译器会从TypeScript的tslib库中导入辅助函数,例如__extends,__rest等,而不是在每个文件中重复它们,以减小输出文件的大小。
  8. importsNotUsedAsValues:这个选项用于控制那些只为了类型而导入,但在运行时不会用到的import语句。这可以是"remove",表示完全移除这些导入,或者是"preserve",表示保留这些导入不变。
  9. inlineSourceMap:当设置为true时,源代码映射将被直接嵌入到输出的JavaScript文件中,而不是生成一个单独的.map文件。
  10. inlineSources:这个选项一同启用时,源代码本身也会被嵌入到内联的source map中。
  11. mapRoot:这个选项允许你指定放置source map文件的根目录。
  12. newLine:用于指定输出文件中的换行符类型。"CRLF"用于Windows,而"LF"用于Unix / Linux。
  13. noEmit:设置为true时,编译器不会输出文件。这仅用于在编译过程中检查错误。
  14. noEmitHelpers:如果这个选项设置为true,编译器不会生成在文件顶部的辅助函数代码。这通常与importHelpers配合使用。
  15. noEmitOnError:该选项为true时,则只有当没有任何错误时,编译器才会输出文件。
  16. outDir:指定编译器输出文件的目录。所有产出的JavaScript文件都会放在这个目录下。
  17. outFile:如果设置了此选项,所有的全局(非模块)文件会被合并并输出到一个单一的文件中。
  18. preserveConstEnums:当设置为true时,编译器会保留const enum声明,而不是将它们替换成对应的内联代码。
  19. preserveValueImports:与importsNotUsedAsValues类似,该选项的确定是为了指导TypeScript如何处理只被使用其类型的导入。
  20. removeComments:设为true则在输出文件中移除所有注释,通常用于生产环境的代码清理。
  21. sourceMap:启用此选项,编译器将为每个文件生成一个相应的.map文件。这些文件有助于开发者在代码调试时映射回原始的TypeScript代码。
  22. sourceRoot:这个选项指定了源映射中的源文件位置,用于调试器定位原始源文件。
  23. stripInternal:这个选项为true时,那些在声明文件中用/** @internal */注释的代码会在输出的.d.ts文件中被省略。

JavaScript Support(JS支持)

配置TypeScript对现有JavaScript代码的支持

  1. allowJs:这个选项设置为true时,TypeScript编译器会允许JavaScript文件(.js扩展名)作为输入文件进行编译。这允许你在TypeScript项目中混合使用JavaScript和TypeScript文件。
  2. checkJs:当你开启这个配置项时,TypeScript编译器同样会检查JavaScript文件中的错误。这就像在你的JavaScript文件上运行了TypeScript的类型检查器。
  3. maxNodeModuleJsDepth:该选项允许你设置在node_modules文件夹中,编译器应该深入检查JavaScript文件的最大深度。

Editor Support(编辑器支持)

提供编辑器相关的配置,使得编辑TypeScript更加高效

  1. disableSizeLimit:这个配置项用于禁用TypeScript编译器对项目大小的限制。TypeScript默认对项目大小有限制,如果项目过大,编译器可能会拒绝处理。
  2. plugins:plugins 配置项允许你指定一个插件数组,这些插件可以在编译过程中提供额外的功能。这些插件通常用来扩展或增强TypeScript的标准功能,例如进行代码格式化、添加更丰富的类型检查,或者集成其他工具。

Interop Constraints(互操作的约束)

确保TypeScript与其他JavaScript代码的互操作性

  1. allowSyntheticDefaultImports:这个选项设置为true时,可以允许你对不是默认导出(default export )的模块使用默认导入语法。
  2. esModuleInterop:类似于allowSyntheticDefaultImports,这个选项提供了对ES模块和CommonJS模块之间更全面的互操作性。当设置为true时,它启用了allowSyntheticDefaultImports和其他一些互操作性行为。
  3. forceConsistentCasingInFileNames:当这个配置开启时,确保你不能在导入时非一致地引用相同的文件。这可以避免在对大小写敏感和不敏感的文件系统之间移动代码时出现问题。
  4. isolatedModules:开启该选项后,每个文件都被作为独立模块进行类型检查。这通常用于确保每个文件可以安全地隔离,适用于Babel这样的转译工具,它们只能处理单个文件。
  5. preserveSymlinks:如果你使用符号链接指向模块,启用这个选项可以让TypeScript遵照符号链接的真实路径进行模块解析,而不是解析到符号链接的路径。

Backwards Compatibility(向后兼容性)

处理TypeScript向后兼容性的配置选项

  1. charset:这个选项用于指定在读取文件时使用的字符编码,确保TypeScript编译器正确解码源文件。只有当你的项目有特定编码需求时才需要改变默认值。
  2. keyofStringsOnly:在启用时,keyof操作符将仅返回string类型的键,这会忽略那些number或symbol类型的键。这是为了保持与旧版本TypeScript的兼容性。
  3. noImplicitUseStrict:TypeScript文件的顶部默认会插入"use strict"; 来采用严格模式。如果你的代码库需要避免这种注入,可以设置这个选项为true。
  4. noStrictGenericChecks:此选项设置为true时,TypeScript在处理泛型时将使用较少的约束性检查,使其在某些场景下与旧版本兼容。
  5. out:该选项用于指定合并所有输出到单个文件。现代的TypeScript项目推荐使用outFile或outDir代替。
  6. suppressExcessPropertyErrors:当对象字面量存在任何“目标类型”里没有定义的属性时,通常TypeScript会报错。开启此选项会忽略这些额外的属性错误。
  7. suppressImplicitAnyIndexErrors:默认情况下,TypeScript不允许索引器隐式返回any类型,此选项开启后,会抑制这类错误。

Language and Environment(语言与环境)

配置TypeScript语言和运行环境的相关设置

  1. emitDecoratorMetadata:当使用装饰器时,这个选项会增加设计时类型元数据的发出,这用于某些反射场景,如Angular的依赖注入。
  2. experimentalDecorators:启用实验性的装饰器支持,装饰器是TypeScript为类和类成员提供额外元数据的一种声明方式。
  3. jsx:用于指定生成哪种类型的JSX代码,例如"react","preserve","react-native"等。
  4. jsxFactory:当使用jsx时,指定生成JSX元素时使用的工厂函数名称。例如,React应用通常使用React.createElement。
  5. jsxFragmentFactory:用于当创建Fragment类jsx元素时,指定要使用的工厂函数。
  6. jsxImportSource:用于指定jsx转译时引入jsx工厂函数的模块。
  7. lib:指定编译过程中需要包含的库文件列表,这可以让你根据目标环境选择正确的内置类型定义,如DOM、ES2015 + 等。
  8. moduleDetection:此选项不是TypeScript官方配置文档中的一部分,可能是已废弃的或特定工具的配置选项。
  9. noLib:设置为true时,将不包括默认库文件(比如lib.d.ts,包含标准JavaScript运行环境的类型等)。
  10. reactNamespace:指定React.createElement由哪个对象提供。这在使用拥有不同命名空间的React克隆时很有用。
  11. target:指定ECMAScript目标版本,例如ES5、ES2015(ES6)、ES2017等,决定了编译后代码的语法级别。
  12. useDefineForClassFields:决定是否使用defineProperty来定义类字段,这与类字段的提案兼容。

Compiler Diagnostics(编译器诊断)

配置编译器产生的诊断信息。

  1. diagnostics:当此选项开启时,编译器会输出诊断信息,如编译过程中的时间和内存使用统计。
  2. explainFiles:通过开启这个选项,你可以让编译器输出包含在编译中的文件及它们被包含的原因。
  3. extendedDiagnostics:启用这个选项后,编译器将提供更为详尽的诊断信息,比如更多的时间消耗细节和内存使用情况。
  4. generateCpuProfile:这个配置允许编译器生成一个CPU profile,通常在“.cpuprofile”文件格式中,这有助于分析编译性能问题。
  5. listEmittedFiles:开启后,编译器在编译过程结束后会列出所有生成的文件。
  6. listFiles:开启此选项,编译器会在编译开始前输出所有将要编译的文件列表。
  7. traceResolution:当这个选项开启时,会追踪模块解析的细节,并输出信息到控制台,有助于调试模块解析相关的问题。

Projects(项目)

关于TypeScript项目配置的内容

  1. composite:设定为true时,允许该项目作为其他项目的依赖项编译。这个选项主要用于构建大型项目,提升构建效率。
  2. disableReferencedProjectLoad:如果设置为true,在解析项目引用时, TypeScript将不会加载引用的项目。这在有大量项目引用时可以改善编译速度。
  3. disableSolutionSearching:此选项关闭了TypeScript的解决方案搜索功能,阻止它自动搜索基于项目引用的解决方案。
  4. disableSourceOfProjectReferenceRedirect:如果开启此选项,TypeScript编译器在构建项目时将不会使用源项目的输出文件,而是直接使用其源文件。
  5. incremental:配置项设为true时,TypeScript编译器将会生成增量编译信息,并在之后的编译中使用这些信息以缩短编译时间。
  6. tsBuildInfoFile:用于指定存储增量编译信息的文件的位置,默认是.tsbuildinfo。

Output Formatting(输出格式)

控制编译输出的格式

  1. noErrorTruncation:此配置项设置为true时,TypeScript编译器在报告错误时不会截断消息。这可以帮助你获得完整的错误信息,尤其是在错误信息非常长的时候。
  2. preserveWatchOutput:当这个选项开启时,在监视模式下重新编译时,TypeScript编译器不会清屏。这意味着你可以看到历史编译结果。
  3. pretty:默认为true,这个选项开启时,TypeScript编译器会使用样式化和彩色的输出来展示错误信息等,使其更易于阅读。

Completeness(完整性)

保证TypeScript配置的完整性,以及相关设置

  1. skipDefaultLibCheck:如果设置为true,编译器将跳过默认库(比如lib.d.ts)的类型检查。当你确定默认库不会出问题时,这个选项可以减少编译时间。
  2. skipLibCheck:与skipDefaultLibCheck类似,但这个选项会跳过所有声明文件(.d.ts files)的类型检查。这在你信任你的声明文件或者需要加快编译速度时非常有用。

Command Line Watch Options(命令行监视选项)

配置在命令行中启用监视模式的选项

  1. assumeChangesOnlyAffectDirectDependencies:设置为true时,TypeScript编译器将假设文件改动仅影响到直接依赖的文件。在大型项目中,这可以显著加速编译过程,尤其是在你做的改动只影响少数文件时。

Watch Options(监视选项)

与tsc --watch命令效果一样

  1. watchFile:这个选项用于确定TypeScript如何监视单个文件的改动。你可以指定多种策略,比如使用文件系统的通知事件或者轮询等。
  2. watchDirectory:类似于watchFile,这个选项用来确定TypeScript如何监视文件夹的改动。它同样支持多种监视策略。
  3. fallbackPolling:如果默认的文件监视机制不可用,这个选项指定了TypeScript应该如何使用轮询来监视文件和目录。在一些环境中,文件系统事件可能不够可靠,此时轮询可以作为后备选项。
  4. synchronousWatchDirectory:设置为true时,监视目录的操作将同步执行。默认情况下,目录监视是异步的。这个选项对于性能和正确性的影响因操作系统和项目大小而异。
  5. excludeDirectories:这个选项允许你指定一个目录列表,这些目录将被监视过程中排除。这在你的项目中有非代码相关目录或者很大的目录时特别有用,可以提升监视性能。
  6. excludeFiles:类似于excludeDirectories,但这是用来指定不需要监视的文件列表。通过排除特定的文件,你可以避免不必要的编译,节省时间。

Type Acquisition(类型获取)

typeAcquisition是一个专门针对自动类型获取配置的选项。

  1. enable:当设置为true时,开启自动的类型获取。这允许TypeScript尝试自动下载和包含 @types包,这些包包含了对应JavaScript库的类型定义。这对使用JavaScript的现有项目转向TypeScript非常有帮助,因为你不需要手动安装类型声明文件。
  2. include:这个数组允许你指定要包含在类型获取过程中的库。即使你没有明确安装这些库的类型定义,TypeScript也将尝试获取它们的类型声明。
  3. exclude:如果某些库的类型声明会导致问题,或者你不希望TypeScript自动包含它们,可以在这个数组里指定这些库,以排除它们的自动类型获取。
  4. disableFilenameBasedTypeAcquisition:设置为true时,TypeScript将不会根据在代码中使用的模块名或路径尝试自动获取类型信息。默认情况下,如果项目中使用了某个JavaScript库,TypeScript会尝试根据文件名识别库的类型定义。如果你关闭这个选项,TypeScript将不执行这一行为。

Top Level(顶层配置)

与Compiler Options在同一级

  1. files:这个选项允许你显式列出需要包含在项目中的文件列表。如果你有一些特定的文件是项目的一部分,并且你想要确保它们被TypeScript编译器考虑在内,那么就应该将它们添加到这个列表中。
  2. extends:通过这个选项,你的tsconfig.json可以继承另一个配置文件中的设置。这允许你创建一个共享的基础配置文件,并且在多个项目之间复用。继承的配置文件路径是相对于当前tsconfig.json的。
  3. include:类似于files,这个选项允许你指定一个文件模式的列表,用于匹配需要包括在编译上下文中的文件。这些模式支持通配符,因此提供了更弹性的文件选择方式。
  4. exclude:这个选项用于指定编译过程中应该被排除的文件或文件夹。任何与提供的文件模式匹配的文件都将不被包括在编译中。如果include选项也被指定了,exclude选项将对其结果进行过滤。
  5. references:这是用于设置项目引用的一个数组。项目引用允许你将TypeScript项目分解成较小的项目,这些小项目可以单独编译,并且可以被其他TypeScript项目引用。每个引用需指定一个path属性,该属性是对另一个tsconfig.json文件的引用。

总结

本文详细介绍了许多关于TypeScript配置tsconfig的内容,整体涵盖了TypeScript配置的方方面面,从编译器选项到项目配置,以及与JavaScript的互操作性等,希望对你有帮助

以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!

相关文章
|
4月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
237 0
|
23天前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
1月前
|
JavaScript IDE 开发工具
|
2月前
|
JSON JavaScript 前端开发
TypeScript(十五)配置相关(命令行配置)
TypeScript(十五)配置相关(命令行配置)
31 4
|
2月前
【Vue3+TypeScript】CRM系统项目搭建之 — 路由配置
【Vue3+TypeScript】CRM系统项目搭建之 — 路由配置
21 0
|
3月前
|
JavaScript
TypeScript编译(tsconfig.json配置)
TypeScript编译(tsconfig.json配置)
|
4月前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
102 0
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
3月前
|
JavaScript 编译器 IDE
36.【TypeScript 教程】tsconfig.json 配置
36.【TypeScript 教程】tsconfig.json 配置
21 0
|
4月前
|
JavaScript IDE 编译器
TypeScript中模块路径解析与配置:深入剖析与最佳实践
【4月更文挑战第23天】本文深入探讨了TypeScript中模块路径解析的原理与配置优化,包括相对路径、Node.js模块解析和路径别名。通过配置`baseUrl`、`paths`、`rootDirs`以及避免裸模块名,可以提升开发效率和代码质量。建议使用路径别名增强代码可读性,保持路径结构一致性,并利用IDE插件辅助开发。正确配置能有效降低维护成本,构建高效可维护的代码库。
|
4月前
|
资源调度 JavaScript API
配置Typescript+Node环境
配置Typescript+Node环境
64 0