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

文章详细介绍了TypeScript(TS)编译为JavaScript(JS)的配置选项,包括目标语法版本、classfields支持、环境API、引入JS文件、类型检查等设置,强调了代码兼容性应由Babel处理,以及如何配置模块化、JSX处理和路径映射等,以优化编译过程和确保代码质量。
摘要由CSDN通过智能技术生成
{
  // ts 编译为 js 的配置选项
  "compilerOptions": {
    // ts 编译为目标 js 的语法版本。设置为高版本或许可以提高转换速度。
    // 我们并不需要 ts 来做代码兼容。代码兼容交给 babel 来做。
    "target": "ESNext",
    // 是否启用 class fields 语法。
    // 实际上在新版 ts 里已经支持 class fields 语法。
    // 所以在新版这个配置无效,使用 class fields 语法不会报错。
    "useDefineForClassFields": false,
    // 支持环境 api。比如要运行到浏览器里,那么需要包含浏览器 document 相关的 api。
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    // 允许 js 文件被引入到 ts 文件。
    "allowJs": false,
    // 跳过对声明文件 (扩展名为 .d.ts 的文件) 的类型检查。缩短编译时间
    "skipLibCheck": true,
    // 支持合成默认导入。使 esm 里支持 cjs 模块。
    "esModuleInterop": false,
    // 允许合成默认导出。在 esm 里,支持 cjs 默认导出
    "allowSyntheticDefaultImports": true,
    // 下面七个配置的总配置。优先级低。
    "strict": true,
    // 不允许隐式 any 类型
    "noImplicitAny": true,
    // 严格检查 null 类型
    "strictNullChecks": true, 
    // 严格函数类型
    // function getCurrentYear(callback: (date: string | number) => void) {
    //   callback(Math.random() > 0.5 ? '2020' : 2020)
    // }
    // getCurrentYear((date: string) => {
    //   console.log(date.charAt(0))
    // })
    "strictFunctionTypes": true,
    // 使用 bind、call 和 apply 语法的时候,是否进行参数检查
    "strictBindCallApply": true,
    // 这个选项要和 strictNullChecks 配合使用才行。该选项用于检查类的属性是否被初始化,如果开启则必须进行初始化。
    "strictPropertyInitialization": true,
    // 不允许出现隐式any类型的this  
    "noImplicitThis": true,
    // 就是 JavaScript 中的 "use strict",肯定是要开启的
    "alwaysStrict": true,
    // 强制引入文件名的大小写一致。防止对大小写敏感的系统出错。
    "forceConsistentCasingInFileNames": true,
    // 默认值为 none。打包工具会处理成符合规范的模块化代码。
    "module": "ESNext",
    // 模块导入解析策略。node 会在 node_modules 里去找。
    "moduleResolution": "Node",
    // 是否支持引入 json 文件
    "resolveJsonModule": true,
    // 强制要求导入、导出类型都加上 type
    "isolatedModules": true,
    // 不输出转化后的 js 文件
    "noEmit": true,
    // TS具有三种JSX模式:preserve,react和react-native
    // 在preserve模式下生成代码中会保留JSX以供后续的转换操作使用
    // react模式会生成React.createElement,在使用前不需要再进行转换操作了
    // react-native相当于preserve,它也保留了所有的JSX,但是输出文件的扩展名是.js
    "jsx": "react-jsx",
    // 设置路径文件名,用于项目中路径简写
    "paths": {
      "@/*": ["./src/*"]
    },
  },
  // include 字段用于指明需要被 tsc 编译的文件或文件夹列表,例如:
  "include": ["src"],
  // “项目引用(Project References)” 功能,它允许用户为项目的不同部分使用不同的 TypeScript 配置。
  "references": [{ "path": "./tsconfig.node.json" }]
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值