tsconfig.json 配置文件,通过注释说明配置含义

官网配置表在MSBuild里使用编译选项 · TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)icon-default.png?t=N7T8https://www.tslang.cn/docs/handbook/compiler-options-in-msbuild.html

tsconfig.json 配置文件

{
  "compilerOptions": {
    // ts 编译为目标 js 的语法版本。设置为高版本或许可以提高转换速度。
    // 我们并不需要 ts 来做代码兼容。代码兼容交给 babel 来做。
    "target": "esnext",
    // 是否启用 class fields 语法。
    // 实际上在新版 ts 里已经支持 class fields 语法。
    // 所以在新版这个配置无效,使用 class fields 语法不会报错。
    "useDefineForClassFields": true,
    // 允许 js 文件被引入到 ts 文件。
      "allowJs": false,
//指定生成哪个模块系统代码: "None", "CommonJS", "AMD", "System", "UMD", "ES6"或 "ES2015"。
    //► 只有 "AMD"和 "System"能和 --outFile一起使用。
    //► "ES6"和 "ES2015"可使用在目标输出为 "ES5"或更低的情况下。
    "module": "esnext",
    //决定如何处理模块。或者是"Node"对于Node.js/io.js,或者是"Classic"(默认)。
    "moduleResolution": "node",
    //启用所有严格类型检查选项
    "strict": true,
    //	在 .tsx文件里支持JSX: "React"或 "Preserve"
    "jsx": "preserve",
    //生成相应的 .map文件
    "sourceMap": true,
    //TypeScript 将使用 Node.js 的模块解析策略来处理 JSON 模块的导入。
    "resolveJsonModule": true,
    //将每个文件作为单独的模块(与“ts.transpileModule”类似)
    "isolatedModules": true,
     //支持合成默认导入
    "esModuleInterop": true,
    // 支持环境 api。比如要运行到浏览器里,那么需要包含浏览器 document 相关的 api。
    "lib": [
      "esnext",
      "dom"
    ],
    //解析非相对模块名的基准目录
    "baseUrl": "./",
    //要包含的类型声明文件名列表
    "types": [
      "node",
      "vite/client",
      "element-plus/global"
    ],
    //模块名到基于 baseUrl的路径映射的列表
    "paths": {
      "@/*": [
        "src/*"
      ],
      "api/*": [
        "src/api/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/env.d.ts",
    "types/*.d.ts"
  ],
  "exclude": ["node_modules","public"],
  //工程引用因为 这里 引用了tsconfig.config.json, 故需要将 tsconfig.config.json 引入进来}
  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

“target”: “es5”
target用于指定编译之后的版本目录

“module”: “commonjs”
module用来指定要使用的模板标准

“lib”:[“es6”,“dom”]
lib用于指定要包含在编译中的库文件

“allowJs”: true
allowJs用来指定是否允许编译JS文件,默认false,即不编译JS文件

“checkJs”: true
checkJs用来指定是否检查和报告JS文件中的错误,默认false

“jsx”: “preserve”
指定jsx代码用于的开发环境:‘preserve’,‘react-native’,or 'react

“declaration”: true
declaration用来指定是否在编译的时候生成相应的d.ts声明文件,如果设为true,编译每个ts文件之后会生成一个js文件和一个声明文件,但是declaration和allowJs不能同时设为true

“declarationMap”: true
declarationMap用来指定编译时是否生成.map文件

“sourceMap”: true
socuceMap用来指定编译时是否生成.map文件

“outFile”: “./”
outFile用于指定输出文件合并为一个文件,只有设置module的值为amd和system模块时才支持这个配置

“outDir”: “./”
outDir用来指定输出文件夹,值为一个文件夹路径字符串,输出的文件都将放置在这个文件夹

“rootDir”: “./”
rootDir用来指定编译文件的根目录,编译器会在根目录查找入口文件

“composite”: true,
composite是否编译构建引用项目

“removeComments”: true
removeComments用于指定是否将编译后的文件注释删掉,设为true的话即删除注释,默认为false

“noEmit”: true,
noEmit不生成编译文件

“importHelpers”: true,
importHelpers指定是否引入tslib里的复制工具函数,默认为false

“downlevelIteration”: true,
当target为"ES5"或"ES3"时,为"for-of" "spread"和"destructuring"中的迭代器提供完全支持

“isolatedModules”: true,
isolatedModules指定是否将每个文件作为单独的模块,默认为true,他不可以和declaration同时设定

“strict”: true,
strict用于指定是否启动所有类型检查,如果设为true这回同时开启下面这几个严格检查,默认为false

“noImplicitAny”: true,
noImplicitAny如果我们没有一些值设置明确类型,编译器会默认认为这个值为any类型,如果将noImplicitAny设为true,则如果没有设置明确的类型会报错,默认值为false

“strictNullChecks”: true,
strictNullChecks当设为true时,null和undefined值不能赋值给非这两种类型的值,别的类型的值也不能赋给他们,除了any类型,还有个例外就是undefined可以赋值给void类型

“strictFunctionTypes”: true,
strictFunctionTypes用来指定是否使用函数参数双向协变检查

“strictBindCallApply”: true,
strictBindCallApply设为true后对bind、call和apply绑定的方法的参数的检测是严格检测

“strictPropertyInitialization”: true,
strictPropertyInitialization设为true后会检查类的非undefined属性是否已经在构造函数里初始化,如果要开启这项,需要同时开启strictNullChecks,默认为false

“noImplicitThis”: true,
当this表达式的值为any类型的时候,生成一个错误

“alwaysStrict”: true,
alwaysStrict指定始终以严格模式检查每个模块,并且在编译之后的JS文件中加入"use strict"字符串,用来告诉浏览器该JS为严格模式

“noUnusedLocals”: true,
noUnusedLocals用于检查是否有定义了但是没有使用变量,对于这一点的检测,使用ESLint可以在你书写代码的时候做提示,你可以配合使用,他的默认值为false

“noUnusedParameters”: true,
noUnusedParameters用于检测是否在函数中没有使用的参数

“noImplicitReturns”: true,
noImplicitReturns用于检查函数是否有返回值,设为true后,如果函数没有返回值则会提示,默认为false

“noFallthroughCasesInSwitch”: true,
noFallthroughCasesInSwitch用于检查switch中是否有case没有使用break跳出switch,默认为false

“moduleResolution”: “node”,
moduleResolution用于选择模块解析策略,有"node"和"classic"两种类型

“baseUrl”: “./”,
baseUrl用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响

“paths”: {
““:[”./node_modules/@types", "./typings/”]
},
paths用于设置模块名到基于baseUrl的路径映射

“rootDirs”: [],
rootDirs可以指定一个路径列表,在构建时编译器会将这个路径中的内容都放到一个文件夹中

“typeRoots”: [],
typeRoots用来指定声明文件或文件夹的路径列表,如果指定了此项,则只有在这里列出的声明文件才会被加载

“types”: [],
types用于指定需要包含的模块,只有在这里列出的模块的声明文件才会被加载

“allowSyntheticDefaultImports”: true,
allowSyntheticDefaultImports用来指定允许从没有默认导出的模块中默认导入

“esModuleInterop”: true,
esModuleInterop通过导入内容创建命名空间,实现CommonJS和ES模块之间的互操作性

“preserveSymlinks”: true,
不把符号链接解析为真实路径

“sourceRoot”: “”,
sourceRoot用于指定调试器应该找到TypeScript文件而不是源文件的位置,这个值会被写进.map文件里

“mapRoot”: “”,
mapRoot用于指定调试器找到映射文件而非生成文件的位置,指定map文件的根路径,该选项会影响.map文件中的sources属性

“inlineSourceMap”: true,
inlineSourceMap指定是否将map文件内容和js文件编译在一个同一个js文件中,如果设为true,则map的内容会以//#soureMappingURL=开头,然后接base64字符串的形式插入在js文件底部

“inlineSources”: true,
inlineSources用于指定是否进一步将ts文件的内容也包含到输出文件中

“experimentalDecorators”: true,
experimentalDecorators用于指定是否启用实验性的装饰器特性

“emitDecoratorMetadata”: true,
emitDecoratorMetadata用于指定是否为装上去提供元数据支持,关于元数据,也是ES6的新标准,可以通过Reflect提供的静态方法获取元数据,如果需要使用Reflect的一些方法,需要引用ES2015.Reflect这个库

“include”:[],
include也可以指定要编译的路径列表

“files”:[],
files可以配置一个数组列表

“exclude”:[]
exclude表示要排除的,不编译的文件,它也可以指定一个列表,规则和include一样,可以是文件可以是文件夹,可以是相对路径或绝对路径,可以使用通配符

“extends”:“”
extends可以通过指定一个其他的tsconfig.json文件路径,来继承这个配置文件里的配置,继承来的文件的配置会覆盖当前文件定义的配置

“compileOnSave”:true
compileOnSave如果设为true,在我们编辑了项目文件保存的时候,编辑器会根据tsconfig.json的配置更新重新生成文本

“references”:[]
一个对象数组,指定要引用的项目

tsconfig.json 文件的配置,由于配置项繁杂,遂逐一解析并验证,减少大家的一些疑惑,并提升工作效率!

会写 TypeScript 但你真的会 TS 编译配置吗? (qq.com)icon-default.png?t=N7T8https://mp.weixin.qq.com/s?__biz=MzUxNzk1MjQ0Ng==&mid=2247506883&idx=2&sn=e15c74fe111f6d5f1fc3779a735d219e&chksm=f992dd12cee55404e98c9100490588e3867ed0773a1fff209824e6e805794f8fd5f99a3c2b4e&scene=126&&sessionid=0

当你在TypeScript项目中遇到一些不需要在编译期间检查的问题,或者你想忽略`tsconfig.node.json`文件中的一些配置,你可以采取以下步骤来“忽略了tsconfig.node.json”: 1. **临时忽略**:在具体的ts文件中,你可以在引入或使用有问题的部分前面加上`/* @ts-ignore */`注释。这会让TypeScript编译器跳过这一行,不会报告错误。 ```typescript /* @ts-ignore */ let problematicVariable = someInvalidValue; ``` 2. **针对文件的忽略**:你也可以在tsconfig.json文件中指定`noEmitOnError`属性为`false`,但这意味着所有错误都将被忽略,不是只针对`node.js`环境。这应该作为最后的手段,因为良好的代码质量很重要。 ```json { "compilerOptions": { "noEmitOnError": false } } ``` 3. **文件级别的忽略**:如果你只想在特定的.ts或tsx文件中忽略`tsconfig.node.json`的内容,可以考虑创建一个新的tsconfig.json文件,仅包含你需要的配置,并在你的项目结构中明确引用这个新的配置文件。 4. **忽略特定配置**:若要忽略特定的配置项,可以使用`exclude`或`include`数组在`tsconfig.node.json`中排除不需要处理的模块或文件。 ```json { "compilerOptions": { "exclude": ["path/to/ignore"] } } ``` 5. **永久性忽略**:如果你确定某个问题永远不会影响你的生产代码,你可以在`tsconfig.node.json`中移除对应的配置或直接从项目中删除它,但建议在这样做之前先理解其影响。 总之,在处理这种情况时,保持代码清晰、遵循最佳实践是非常重要的。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值