TSConfig 配置(tsconfig.json)

详细总结一下TSConfig 的相关配置项。个人笔记,仅供参考,欢迎批评指正!

另外,如果想了解更多ts相关知识,可以参考我的其他笔记:

根目录

{
  /* 指定编译文件/目录 */
   "files": [], // 指定被编译的文件
  "include": [], // 指定被编译文件所在的目录
  "exclude": [], // 指定不需要被编译的目录
  /* 指定要继承的配置文件 */
  "extends": "",
  /* 编译配置选项 */
  "compilerOptions": {},
  /* 工程模式引用 */
  "references": [],
  /* 此配置让IDE在保存文件的时候根据tsconfig.json重新生成文件 */
  "compileOnSave": true
}

指定编译文件/目录

files、include 与 exclude

这三个选项决定了将被包括到本次编译的代码文件。
使用 files 我们可以描述本次包含的所有文件,但不能使用 src 或者 src/* 这种方式,每个值都需要是完整的文件路径,适合在小型项目时使用。
我们常用 include 和 exclude 进行配置,配置方式参考

{
  "include": ["src/**/*", "generated/*.ts", "internal/*"],
  "exclude": ["src/file-excluded", "/**/*.test.ts", "/**/*.e2e.ts"]
}
  • src/**/* 表示匹配 src下所有的合法文件,而无视目录层级
  • internal/* 则只会匹配 internal 下的文件,不会匹配 internal/utils/ 下的文件
  • 在不包括文件扩展名(*.ts)的情况下只会匹配 .ts / .tsx / .d.ts / .js / .jsx 文件(js 和 jsx 文件需要启用 allowJs 配置时才会被包括)

extends— 配置继承

用extends属性从另一个配置文件里继承配置(覆盖当前),值是一个文件路径的字符串。
在原文件里的配置先被加载,然后被来自继承文件里的配置重写。 如果发现循环引用,则会报错。

来自所继承配置文件的files,include和exclude覆盖源配置文件的属性。

比如:

// configs/base.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}
// tsconfig.json
{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

// tsconfig.nostrictnull.json
{
  "extends": "./tsconfig",
  "compilerOptions": {
    "strictNullChecks": false
  }
}

在最顶层设置compileOnSave标记,可以让IDE在保存文件的时候根据tsconfig.json重新生成文件,这个配置需要编译器支持

!!!请注意,它(目前)并没有得到 Visual Studio Code 的支持。仅在 Visual Studio 2015 和安装了atom-typescript插件的Atom中得到了支持。而该插件和 Atom 均已停止维护

如下 👇

// tsconfig.nostrictnull.json
{
    "compileOnSave": true,
    "compilerOptions": {
        "noImplicitAny" : true
    }
}

references—工程引用

TypeScript 3.0的新特性,它支持将TypeScript程序的结构分割成更小的组成部分。
这样可以改善构建时间,强制在逻辑上对组件进行分离,更好地组织你的代码。

可以参考一下 element-plus 的应用

// tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.web.json" },
    { "path": "./tsconfig.play.json" },
    { "path": "./tsconfig.node.json" },
    { "path": "./tsconfig.vite-config.json" },
    { "path": "./tsconfig.vitest.json" }
  ]
}

在这里插入图片描述
在这里插入图片描述

compilerOptions—编译配置选项

可参考 typescript中文网

  • [1] 这些选项是试验性的。
  • [2] 这些选项只能在 tsconfig.json里使用,不能在命令行使用。
选项类型默认值描述
--allowJsbooleanfalse允许编译javascript文件。
--allowSyntheticDefaultImportsbooleanmodule === "system" 或设置了 --esModuleInteropmodule 不为 es2015 / esnext允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出,仅为了类型检查。
--allowUnreachableCodebooleanfalse不报告执行不到的代码错误。
--allowUnusedLabelsbooleanfalse不报告未使用的标签错误。
--alwaysStrictbooleanfalse以严格模式解析并为每个源文件生成 "use strict"语句
--baseUrlstring解析非相对模块名的基准目录。查看 模块解析文档了解详情。
--charsetstring"utf8"输入文件的字符集。
--checkJsbooleanfalse.js文件中报告错误。与 --allowJs配合使用。
--declaration -dbooleanfalse生成相应的 .d.ts文件。
--declarationDirstring生成声明文件的输出路径。
--diagnosticsbooleanfalse显示诊断信息。
--disableSizeLimitbooleanfalse禁用JavaScript工程体积大小的限制
--emitBOMbooleanfalse在输出文件的开头加入BOM头(UTF-8 Byte Order Mark)。
--emitDecoratorMetadata [1]booleanfalse给源码里的装饰器声明加上设计类型元数据。查看 issue #2577了解更多信息。
--experimentalDecorators [1]booleanfalse启用实验性的ES装饰器。
--extendedDiagnosticsbooleanfalse显示详细的诊段信息。
--forceConsistentCasingInFileNamesbooleanfalse禁止对同一个文件的不一致的引用。
--help -h打印帮助信息。
--importHelpersstringtslib 导入辅助工具函数(比如 __extends__rest等)
--inlineSourceMapbooleanfalse生成单个sourcemaps文件,而不是将每sourcemaps生成不同的文件。
--inlineSourcesbooleanfalse将代码与sourcemaps生成到一个文件中,要求同时设置了 --inlineSourceMap--sourceMap属性。
--init初始化TypeScript项目并创建一个 tsconfig.json文件。
--isolatedModulesbooleanfalse将每个文件作为单独的模块(与“ts.transpileModule”类似)。
--jsxstring"Preserve".tsx文件里支持JSX: "React""Preserve"。查看 JSX
--jsxFactorystring"React.createElement"指定生成目标为react JSX时,使用的JSX工厂函数,比如 React.createElementh
--libstring[]编译过程中需要引入的库文件的列表。 可能的值为: ► ES5ES6ES2015ES7ES2016ES2017ES2018ESNextDOMDOM.IterableWebWorkerScriptHostES2015.CoreES2015.CollectionES2015.GeneratorES2015.IterableES2015.PromiseES2015.ProxyES2015.ReflectES2015.SymbolES2015.Symbol.WellKnownES2016.Array.IncludeES2017.objectES2017.IntlES2017.SharedMemoryES2017.StringES2017.TypedArraysES2018.IntlES2018.PromiseES2018.RegExpESNext.AsyncIterableESNext.ArrayESNext.IntlESNext.Symbol 注意:如果--lib没有指定默认注入的库的列表。默认注入的库为: ► 针对于--target ES5DOM,ES5,ScriptHost ► 针对于--target ES6DOM,ES6,DOM.Iterable,ScriptHost
--listEmittedFilesbooleanfalse打印出编译后生成文件的名字。
--listFilesbooleanfalse编译过程中打印文件名。
--localestring(platform specific)显示错误信息时使用的语言,比如:en-us。
--mapRootstring为调试器指定指定sourcemap文件的路径,而不是使用生成时的路径。当 .map文件是在运行时指定的,并不同于 js文件的地址时使用这个标记。指定的路径会嵌入到 sourceMap里告诉调试器到哪里去找它们。
--maxNodeModuleJsDepthnumber0node_modules依赖的最大搜索深度并加载JavaScript文件。仅适用于 --allowJs
--module -mstringtarget === "ES6" ? "ES6" : "commonjs"指定生成哪个模块系统代码: "None""CommonJS""AMD""System""UMD""ES6""ES2015"。 ► 只有 "AMD""System"能和 --outFile一起使用。 ► "ES6""ES2015"可使用在目标输出为 "ES5"或更低的情况下。
--moduleResolutionstringmodule === "AMD" or "System" or "ES6" ? "Classic" : "Node"决定如何处理模块。或者是"Node"对于Node.js/io.js,或者是"Classic"(默认)。查看模块解析了解详情。
--newLinestring(platform specific)当生成文件时指定行结束符: "crlf"(windows)或 "lf"(unix)。
--noEmitbooleanfalse不生成输出文件。
--noEmitHelpersbooleanfalse不在输出文件中生成用户自定义的帮助函数代码,如 __extends
--noEmitOnErrorbooleanfalse报错时不生成输出文件。
--noErrorTruncationbooleanfalse不截短错误消息。
--noFallthroughCasesInSwitchbooleanfalse报告switch语句的fallthrough错误。(即,不允许switch的case语句贯穿)
--noImplicitAnybooleanfalse在表达式和声明上有隐含的 any类型时报错。
--noImplicitReturnsbooleanfalse不是函数的所有返回路径都有返回值时报错。
--noImplicitThisbooleanfalsethis表达式的值为 any类型的时候,生成一个错误。
--noImplicitUseStrictbooleanfalse模块输出中不包含 "use strict"指令。
--noLibbooleanfalse不包含默认的库文件( lib.d.ts)。
--noResolvebooleanfalse不把 /// <reference``>或模块导入的文件加到编译文件列表。
--noStrictGenericChecksbooleanfalse禁用在函数类型里对泛型签名进行严格检查。
--noUnusedLocalsbooleanfalse若有未使用的局部变量则抛错。
--noUnusedParametersbooleanfalse若有未使用的参数则抛错。
--outstring弃用。使用 --outFile 代替。
--outDirstring重定向输出目录。
--outFilestring将输出文件合并为一个文件。合并的顺序是根据传入编译器的文件顺序和 ///<reference``>import的文件顺序决定的。查看输出文件顺序文件了解详情。
paths [2]Object模块名到基于 baseUrl的路径映射的列表。查看 模块解析文档了解详情。
--preserveConstEnumsbooleanfalse保留 constenum声明。查看 const enums documentation了解详情。
--preserveSymlinksbooleanfalse不把符号链接解析为其真实路径;将符号链接文件视为真正的文件。
--preserveWatchOutputbooleanfalse保留watch模式下过时的控制台输出。
--pretty [1]booleanfalse给错误和消息设置样式,使用颜色和上下文。
--project -pstring编译指定目录下的项目。这个目录应该包含一个 tsconfig.json文件来管理编译。查看 tsconfig.json文档了解更多信息。
--reactNamespacestring"React"当目标为生成 "react" JSX时,指定 createElement__spread的调用对象
--removeCommentsbooleanfalse删除所有注释,除了以 /!*开头的版权信息。
--rootDirstring(common root directory is computed from the list of input files)仅用来控制输出的目录结构 --outDir
rootDirs [2]string[]*根(root)*文件夹列表,表示运行时组合工程结构的内容。查看 模块解析文档了解详情。
--skipDefaultLibCheckbooleanfalse忽略 库的默认声明文件的类型检查。
--skipLibCheckbooleanfalse忽略所有的声明文件( *.d.ts)的类型检查。
--sourceMapbooleanfalse生成相应的 .map文件。
--sourceRootstring指定TypeScript源文件的路径,以便调试器定位。当TypeScript文件的位置是在运行时指定时使用此标记。路径信息会被加到 sourceMap里。
--strictbooleanfalse启用所有严格类型检查选项。 启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict--strictNullChecks--strictFunctionTypes--strictPropertyInitialization
--strictFunctionTypesbooleanfalse禁用函数参数双向协变检查。
--strictPropertyInitializationbooleanfalse确保类的非undefined属性已经在构造函数里初始化。若要令此选项生效,需要同时启用--strictNullChecks
--strictNullChecksbooleanfalse在严格的 null检查模式下, nullundefined值不包含在任何类型里,只允许用它们自己和 any来赋值(有个例外, undefined可以赋值到 void)。
--stripInternal [1]booleanfalse不对具有 /** @internal */ JSDoc注解的代码生成代码。
--suppressExcessPropertyErrors [1]booleanfalse阻止对对象字面量的额外属性检查。
--suppressImplicitAnyIndexErrorsbooleanfalse阻止 --noImplicitAny对缺少索引签名的索引对象报错。查看 issue #1232了解详情。
--target -tstring"ES3"指定ECMAScript目标版本 "ES3"(默认), "ES5""ES6"/ "ES2015""ES2016""ES2017""ESNext"。 注意: "ESNext"最新的生成目标列表为 ES proposed features
--traceResolutionbooleanfalse生成模块解析日志信息
--typesstring[]要包含的类型声明文件名列表。查看 @types,–typeRoots和–types章节了解详细信息。
--typeRootsstring[]要包含的类型声明文件路径列表。查看 @types,–typeRoots和–types章节了解详细信息。
--version -v打印编译器版本号。
--watch -w在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。监视文件和目录的具体实现可以通过环境变量进行配置。详情请看配置 Watch
  • 25
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值