likes
comments
collection
share

TypeScript 配置最佳实践：深入理解 target 与 moduleTypeScript 配置最佳实践：深入理解

作者站长头像
站长
· 阅读数 45

TypeScript 配置最佳实践：深入理解 target 与 module

大家猴啊！我是zifer，在日常工作中经常遇到团队成员对 TypeScript 配置存在疑惑，特别是关于 tsconfig.json 中的 target 和 module 应该如何设置的问题。今天，我想结合最新的浏览器市场数据，帮助大家彻底理解这个问题。

目录

市场现状分析

在讨论具体配置之前，让我们先看看当前浏览器市场的现状（数据来源：StatCounter GlobalStats，2024年3月）：

桌面端浏览器市场份额

  • Chrome: 66.12%
  • Safari: 12.54%
  • Edge: 11.89%
  • Firefox: 7.56%
  • Opera: 1.89%

移动端浏览器市场份额

  • Chrome: 65.11%
  • Safari: 24.35%
  • Samsung Internet: 4.56%
  • Opera: 2.12%
  • UC Browser: 1.24%

配置选项详解

target 选项

target 决定了 TypeScript 代码最终会编译成哪个版本的 JavaScript。以下是各个选项对应的浏览器支持情况：

版本发布年份主要特性浏览器最低支持版本当前支持率
ES31999基础 JavaScript 特性所有浏览器100%
ES52009• JSON 对象• strict mode• Array 方法(map/reduce)• Object 属性方法• IE9+• Chrome 23+• Firefox 21+• Safari 6+• Opera 15+• iOS Safari 7+• Android Browser 4.4+99.9%+
ES2015/ES62015• 类• 模块• 箭头函数• Promise• let/const• 解构赋值• Chrome 51+• Firefox 54+• Safari 10+• Edge 15+• iOS Safari 10.3+• Android Chrome 51+98%+
ES20162016• ** 操作符• Array.includes()• Chrome 52+• Firefox 52+• Safari 10.1+• Edge 14+• iOS Safari 10.3+• Android Chrome 52+97%+
ES20172017• async/await• Object.values/entries• String padding• Chrome 55+• Firefox 52+• Safari 11+• Edge 15+• iOS Safari 11+• Android Chrome 55+96%+
ES20182018• Rest/Spread• 异步迭代• Promise.finally()• RegExp 改进• Chrome 63+• Firefox 58+• Safari 12+• Edge 79+• iOS Safari 12+• Android Chrome 63+95%+
ES20192019• Array.flat()• Object.fromEntries()• String.trimStart()• Optional catch• Chrome 73+• Firefox 62+• Safari 13+• Edge 79+• iOS Safari 13+• Android Chrome 73+95%+
ES20202020• 可选链 ?.• 空值合并 ??• BigInt• Promise.allSettled()• Chrome 80+• Firefox 72+• Safari 13.1+• Edge 80+• iOS Safari 13.4+• Android Chrome 80+94%+
ES20212021• String.replaceAll()• 逻辑赋值运算符• Promise.any()• WeakRefs• Chrome 85+• Firefox 79+• Safari 14+• Edge 85+• iOS Safari 14+• Android Chrome 85+93%+
ES20222022• Class Fields• Top-level await• Array.at()• Object.hasOwn()• Chrome 94+• Firefox 93+• Safari 15.4+• Edge 94+• iOS Safari 15.4+• Android Chrome 94+92%+
ESNext-• 装饰器• 记录与元组• 管道操作符• 其他提案中特性取决于具体特性，通常需要最新版本浏览器85-90%

module 选项

module 决定了生成的代码使用什么模块系统：

选项描述使用场景
None不使用模块系统简单脚本，所有代码都在全局作用域
CommonJSNode.js 标准使用 require 和 module.exports
AMD异步模块定义浏览器环境，配合 RequireJS 使用
UMD通用模块定义同时支持 CommonJS 和 AMD
SystemSystemJS 格式使用 SystemJS 加载器的项目
ES6/ES2015ES6 模块语法使用 import/export 的现代项目
ESNext最新模块特性配合现代打包工具使用
Node16/NodeNextNode.js 模块遵循 Node.js 的模块解析规则

最佳实践建议

基于市场数据和实际需求，这里提供三种配置方案：

1. 现代应用方案（推荐，覆盖 95%+ 用户）

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ES2020"]
  }
}

适用场景：

  • SaaS 应用
  • 企业内部系统
  • 技术社区
  • 现代电商平台

2. 兼容性方案（覆盖 99%+ 用户）

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "lib": ["DOM", "ES5", "ScriptHost"]
  }
}

适用场景：

  • 政府网站
  • 教育系统
  • 银行系统

3. 平衡方案（覆盖 98%+ 用户）

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ESNext",
    "lib": ["DOM", "ES2015", "DOM.Iterable"]
  }
}

适用场景：

  • 综合性电商
  • 新闻媒体
  • 社交应用

常见问题解答

Q1: 为什么不target和module不同时使用 ESNext？

虽然 ESNext 代表着最新特性，但有以下考虑：

  1. 浏览器兼容性

    • ESNext 特性支持率为 92%，意味着可能有 8% 的用户无法正常访问
    • ES2020 支持率达到 95%+，是一个更安全的选择

  2. 打包体积

    • 某些新特性可能需要较大的 polyfill
    • 较低的 target 可能产生更小的打包体积

  3. 调试难度

    • 最新特性的调试工具支持可能不够完善
    • 出现问题时排查难度更大

Q2: 关于兼容性具体指什么？

兼容性主要涉及三个方面：

  1. 语法支持

    // ES2020 特性示例
const result = user?.profile?.settings ?? defaultSettings;

// 编译到 ES5 后
var _a, _b;
var result = (_b = (_a = user === null || user === void 0 ? 
  void 0 : user.profile) === null || _a === void 0 ? 
  void 0 : _a.settings) !== null && _b !== void 0 ? 
  _b : defaultSettings;

  2. API 支持

    • Promise
    • Fetch
    • async/await

  3. 运行环境

    • 浏览器版本
    • Node.js 版本
    • 移动端 WebView

配置决策流程

在选择配置时，建议按以下步骤进行：

  1. 分析用户群体

    • 查看统计数据
    • 考虑地域特征
    • 评估用户设备

  2. 评估项目性质

    • 项目类型
    • 访问场景
    • 性能要求

  3. 权衡开发效率

    • 团队技术栈
    • 维护成本
    • 调试需求

总结

从数据和实践来看，对于大多数现代前端项目，推荐使用：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext"
  }
}

这个配置能够：

  • 覆盖 95%+ 的用户群体
  • 保持较小的打包体积
  • 使用主流的现代特性
  • 提供良好的开发体验

记住：配置选择需要基于实际数据和项目需求，而不是主观判断。建议定期检查项目的访问数据，及时调整配置以优化开发体验和用户体验。

欢迎在评论区分享你的经验和想法！

转载自:https://juejin.cn/post/7420971044158914560
评论
请登录