tsconfig.json

typescript 配置文件。

• tslib 会用于 polyfill 特性
• 参考
  • https://www.typescriptlang.org/tsconfig
  • tsconfig.json
    • 中文
  • tsconfig.json.schema
  • reference
  • tsconfig/bases 配置推荐

# 使用自定义的配置文件
tsc --p tsconfig.page.json

for	compilerOptions
node16	{"lib": ["es2021"],"module": "Node16","target": "es2021",}
node18	{"lib": ["es2023"],"module": "Node16","target": "es2022",}
node20	{"lib": ["es2023"],"module": "Node16","target": "es2022",}

常用属性

• target - 默认 es3, 推荐至少 es6
  • es3, es5, es6/es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, esnext
  • es6 开始支持 模块
• module - es3,es5 -> commonjs, es6 - 影响生成的 模块 格式
  • none, commonjs, amd, umd, system, es6/es2015, es2020, es2022, esnext, node12, nodenext
• moduleResolution - 影响使用的模块解析方式
  • classic, node, node12, nodenext
  • classic - amd, umd, system, es6/es2015
  • node - CommonJS
  • node12 - ESM
  • node16 - exports
• lib - 控制使用的特性 - https://www.typescriptlang.org/tsconfig#lib
• strict
  • 启用大多数类型检查 - strict* 相关检查
• outFile - 可以用来将多个 ts 输出为一个 js
  • 如果使用了模块, 则只能使用 amd 或 system
  • 如果没有使用到模块是可以编译成单个 js 直接运行的
  • 可以使用 amdclean 将使用 amd 的 js 转换为无 amd 的
    • 不支持 es6 的一些语法
  • 可以考虑将 ts 输出为 es5, 如果使用了 es6 的库, 则直接指定 lib 即可

{
  "compilerOptions": {
    // 导入 tslib 作为工具类
    // yarn add tslib
    "importHelpers": true,

    // 单文件模块 - 确保能够支持 transpileModule
    "isolatedModules": true,

    // 添加更多检测
    "strict": true,

    // 非绝对导入模块的基础路径
    "baseUrl": ".",
    // 从新映射模块路径
    "paths": {
      // 代码
      "src/*": ["src/*"],
      // 模块
      "jquery": ["node_modules/jquery/dist/jquery"]
    },

    // 多个虚拟代码目录 - 针对导入做合并处理
    "rootDirs": ["src/views", "generated/templates/views"],

    // 生成兼容 es 模块
    // 会启用 allowSyntheticDefaultImports
    "esModuleInterop": true,

    // 生成 .map
    "sourceMap": true,
    // 线上调试时 源码 路径
    "sourceRoot": "https://apis.wener.me/debug/sources/",
    // .map 文件路径
    "mapRoot": "https://apis.wener.me/debug/maps/",

    // 源码和 map 在 js 中 - 注释形式
    "inlineSourceMap": false,
    "inlineSources": false,

    // switch 不允许连续 - 除非 // falls through
    "noFallthroughCasesInSwitch": true,

    // 生成修饰器元数据
    "emitDecoratorMetadata": true,
    // 启用修饰器
    "experimentalDecorators": true,

    // 假设变更只影响直接依赖 - 大型项目增量构建有用
    "assumeChangesOnlyAffectDirectDependencies": true,

    // 3.8 - 导入只用于类型的时候移除 import
    // 避免副作用
    "importsNotUsedAsValues": "remove",

    // jsx 生成代码的工厂 - 例如 preact 用 preact.h
    "jsxFactory": "React.createElement",
    // XXX.createElement
    "reactNamespace": "React",

    // 允许导入 JSON
    "resolveJsonModule": true,
    // 错误时不生成文件
    "noEmitOnError": true,

    // 导入文件文件名大小写一致
    "forceConsistentCasingInFileNames": true,

    // 使用 TC39 定义类字段的方式
    "useDefineForClassFields": true
  }
}

moduleResolution

• classic
• node10, node
• node16, nodenext - Typescript 4.7+
  • 要求 import 包含后缀
• bundler
  • 不需要后缀
  • 支持 package.json#typesVersions
  • 更好配合现有 bundle 流程，可以无后缀
  • 支持 package.json 的 imports, exports
    • imports 可以做到类似 paths 的效果

参考配置

google typescript style

• tsconfig-google.json

{
  "compilerOptions": {
    // 不允许不可达的代码
    "allowUnreachableCode": false,
    // 不允许未使用的标签
    "allowUnusedLabels": false,
    // 生成 .d.ts
    "declaration": true,

    "forceConsistentCasingInFileNames": true,
    // 同 target
    "lib": ["es2018"],
    "module": "commonjs",
    "noEmitOnError": true,
    "noFallthroughCasesInSwitch": true,
    // 不允许隐性返回
    "noImplicitReturns": true,
    // 异常信息等使用颜色样式
    "pretty": true,
    // 生成 .map.js
    "sourceMap": true,
    "strict": true,
    "target": "es2018"
  },
  "exclude": ["node_modules"]
}