tsconfig.json

typescript 配置文件。

tslib 会用于 polyfill 特性
参考

# 使用自定义的配置文件
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 的效果

bundle

experimentalDecorators
emitDecoratorMetadata
- 大多情况不支持
target, useDefineForClassFields
baseUrl, paths
jsx, jsxFactory, jsxFragmentFactory, jsxImportSource
alwaysStrict, strict
verbatimModuleSyntax, ~~importsNotUsedAsValues~~, ~~preserveValueImports~~

参考配置

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"]
}

tsconfig.json

常用属性​

moduleResolution​

bundle​

参考配置​

google typescript style​

常用属性

moduleResolution

bundle

参考配置

google typescript style