tsconfig.json 个别参数配置介绍
请访问 https://www.typescriptlang.org/tsconfig 以阅读有关
tsconfig
的更多信息
tsconfig.json
是 TypeScript
项目的配置文件,用于指定编译器的行为和项目的设置。
顶层配置
{
"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 文件的类型检查。 */
}
}