你瞅啥呢

2024-04-18 tsconfig.json 常用的配置项作用

TypeScript 编译器的配置文件,用于指定编译 TypeScript 代码时的编译选项和编译目标等信息。

通过修改该文件,可以定制 TypeScript 编译器的行为,例如指定编译目标、启用或禁用特定的语言特性、设置代码检查规则等。以下是一些常用的配置项及其作用:

  

 

  compilerOptions:编译器选项。这里包含了众多配置,用于定制 TypeScript 的编译行为。

 

  • target:指定 ECMAScript 的目标版本。例如 "ES3"(默认)、"ES5""ES2015""ES2016""ES2017""ES2018""ES2019""ES2020""ESNEXT" 等。
  • module:指定模块系统类型。如 "commonjs""amd""system""umd""es2015""esnext" 等。
  • strict:启用所有严格类型检查选项。
  • jsx:指定 JSX 代码如何被编译。例如 "preserve""react""react-native" 等。
  • outDir:重定向结构到输出目录。
  • rootDir:使用来作为输出目录结构根的目录。
  • lib:包含要包含在编译中的库列表。
  • esModuleInterop:允许默认导入从 CommonJS 模块工作。
  • allowJs:允许编译 JavaScript 文件。
  • declaration:生成相应的 .d.ts 文件。
  • sourceMap:生成 source maps。
  • outFile:将多个文件合并成一个文件。
  • noImplicitAny:在表达式和声明上有隐含的 any 类型时报错。
  • 在tsconfig.json文件里设置 "noImplicitAny": false,就不会报错了
  •  

  • strictNullChecks:启用严格的 null 检查。
  • experimentalDecorators:启用装饰器。
  • path:允许你指定编译器在解析模块时使用的路径别名。
    • 它可以简化模块导入的路径,避免使用相对路径或长路径
    • 如你要导入../Cart/Product/ProductDetail.ts文件,可以通过给path设置一个变量@Cart,使用@Cart/ProductDetail.ts就可以缩短导入的路径,从而减少出错。
  1. include:用来指定哪些 .ts.tsx 或 .d.ts 文件需要被编译。如果不指定,则默认当前目录下除了 exclude 之外的所有 .ts.d.ts.tsx 文件都会被编译。

  2. exclude:指定不需要被编译的目录或文件。

  3. files:指定需要编译的文件的列表。只有当需要编译的文件较少时才会用到,通常直接使用 include 指定文件夹。

  4. references:用于指定项目之间的引用关系。

  5. extends:指定一个其他 tsconfig.json 文件路径,来继承这个配置文件里的配置,继承文件的配置会覆盖当前文件定义的配置。

代码示例:

复制代码
{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "esnext",
    "sourceMap": true,
    "baseUrl": ".",
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "allowJs": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "strict": true,
    "paths": {
      "@Cart/*": ["src/product/*"],
    }
  },
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "tslint:latest",
    "tslint-config-prettier"
  ]
}
复制代码

 

posted @   叶乘风  阅读(259)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
历史上的今天:
2022-04-18 2022-04-18 前端下载后端文件流
点击右上角即可分享
微信分享提示