TSConfig 配置(tsconfig.json)

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

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

  • vue3+ts开发干货笔记
  • ts相关笔记(基础必看)
  • ts相关笔记(Partial、Required、Readonly、Record、Exclude、Extract)
  • ts相关笔记(类型层级)
  • ts相关笔记(extends、infer、Pick、Omit)

根目录

{/* 指定编译文件/目录 */"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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/327508.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【十六】【动态规划】97. 交错字符串、712. 两个字符串的最小ASCII删除和、718. 最长重复子数组,三道题目深度解析

动态规划 动态规划就像是解决问题的一种策略&#xff0c;它可以帮助我们更高效地找到问题的解决方案。这个策略的核心思想就是将问题分解为一系列的小问题&#xff0c;并将每个小问题的解保存起来。这样&#xff0c;当我们需要解决原始问题的时候&#xff0c;我们就可以直接利…

Redis基础学习一

1. Redis 入门 1.1. Redis 诞生历程 1.1.1.从一个故事开始 08 年的时候有一个意大利西西里岛的小伙子&#xff0c;笔名 antirez&#xff08;http://invece.org/&#xff09;&#xff0c;创建了一个访客信息网站 LLOOGG.COM。有的时候我们需要知道网站的访问情况&#xff0c;…

软件测试/测试开发丨Vuetify框架的使用

介绍 Vuetify 是一个基于 Vue.js 精心打造 UI 组件库&#xff0c;整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。 为什么要使用Vuetify框架 所有组件遵从 Material Design 设计规范&#xff0c;UI 体验非常优秀&#xff0c…

软件测试|深入解析Docker Run命令:创建和启动容器的完全指南

简介 Docker是一种流行的容器化平台&#xff0c;用于构建、分发和运行应用程序。其中一个最基本且重要的Docker命令是docker run&#xff0c;用于创建和启动容器。本文将详细解析docker run命令的用途、参数和示例&#xff0c;帮助您全面掌握创建和启动容器的过程。 docker r…

Springboot整合MQ学习记录

Mq介绍 RabbitMQ是由erlang语言开发&#xff0c;基于AMQP&#xff08;Advanced Message Queue 高级消息队列协议&#xff09;协议实现的消息队列&#xff0c;它是一种应用程序之间的通信方法&#xff0c;消息队列在分布式系统开发中应用非常广泛。支持Windows、Linux/Unix、MA…

论文阅读_InP-Based_Generic_Foundry_Platform_for_Photonic_Integrated_Circuits

InP-Based_Generic_Foundry_Platform_for_Photonic_Integrated_Circuits 时间&#xff1a;2018年 作者&#xff1a;Luc M. Augustin, Member, IEEE, Rui Santos, Erik den Haan, Steven Kleijn, Peter J. A. Thijs, Sylwester Latkowski, Senior Member, IEEE, Dan Zhao, Wei…

计算机毕业设计 SpringBoot的一站式家装服务管理系统 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

探讨一下WebINFO 下的一些思考

在平时的开发中&#xff0c;我们经常看到一个/WEB-INF 这个目录&#xff0c;这个是web 容器初始化加载的一个标准路径。官方解释&#xff1a;WEB-INF 是 Java 的 web 应用的安全目录。所谓安全就是客户端无法访问&#xff0c;只有服务端可以访问的目录。也就是说&#xff0c;这…

拜佛行善心要诚,否则就是不敬!

佛教所主张的“善因有善果&#xff0c;恶因有恶果”&#xff0c;又叫做“善有善报&#xff0c;恶有恶报”。峰民佛学悟语&#xff1a;“善有善报&#xff0c;恶有恶报。不是不报&#xff0c;时辰未到。”这句话表达的是一种因果循环、报应不爽的善恶法则&#xff0c;它告诉我们…

Redis 键中冒号的用途是什么?可以使匹配查询更快吗?

Redis 键中冒号的用途是什么在Redis中&#xff0c;冒号&#xff08;:&#xff09;用作键的分隔符&#xff0c;它的主要作用是创建层次结构和命名空间。通过在键中使用冒号&#xff0c;可以将键分为多个部分&#xff0c;从而更好地组织和管理数据。 以下是冒号在Redis键中的用途…

uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法

目录 #内部实现 #平台差异说明 #基本使用 #设置圆环的动画时间 #API #Props 展示操作或任务的当前进度&#xff0c;比如上传文件&#xff0c;是一个圆形的进度环。 #内部实现 组件内部通过canvas实现&#xff0c;有更好的性能和通用性。 #平台差异说明 AppH5微信小程…

计算机毕业设计选题分享-SSM律师事务所业务管理系统01664(赠送源码数据库)JAVA、PHP,node.js,C++、python,大屏数据可视化等

SSM律师事务所业务管理系统 摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;律师事务所业务管理系统当然也不能排除在外。律师事务所业务管理系统是以实际运用为开发背景…