面试题：TypeScript tsconfig.json中针对不同构建目标的配置优化

Question

假设你要开发一个既可以在浏览器环境运行，又可以在Node.js环境运行的TypeScript项目，在tsconfig.json文件中，你需要如何配置来优化不同构建目标下的代码生成、模块加载以及类型检查等方面？请列举关键配置项并阐述配置思路。

Answer 1

关键配置项及思路

1. target
   • 配置思路：根据不同环境选择合适的 ECMAScript 版本。对于浏览器环境，通常可以选择 es5 或 es6，以兼容更多浏览器。在 Node.js 环境，可选择较高版本如 es2020 或 es2021，利用 Node.js 对新特性的支持。
   • 示例：在 tsconfig.json 中设置 "target": "es6"。
2. module
   • 配置思路：浏览器环境常使用 es2015 模块系统（esm）以支持原生模块化，而 Node.js 目前使用 commonjs 模块系统。为了兼顾两者，可以先使用 es2015，然后在构建过程中根据目标环境转换为相应模块系统。例如在浏览器端构建时用工具（如 webpack）将 esm 转换为 iife 或 umd 格式，在 Node.js 端构建时将 esm 转换为 commonjs。
   • 示例：设置 "module": "es2015"。
3. moduleResolution
   • 配置思路：在 Node.js 环境下，node 模式可以让 TypeScript 按照 Node.js 的模块解析规则查找模块。在浏览器环境，同样使用 node 模式，配合构建工具可以实现正确的模块查找。
   • 示例：设置 "moduleResolution": "node"。
4. lib
   • 配置思路：针对浏览器环境，需要包含 DOM 相关的库，如 dom、dom.iterable 等。对于 Node.js 环境，需要包含 esnext 及 node 相关库，以支持 Node.js 特定的全局变量和类型声明。
   • 示例：针对浏览器 "lib": ["dom", "dom.iterable", "esnext"]；针对 Node.js "lib": ["esnext", "node"]。可通过条件编译，在不同环境加载不同配置。
5. skipLibCheck
   • 配置思路：设置为 true 可以跳过对声明文件的类型检查，加快编译速度。特别是在使用一些第三方库时，其声明文件可能存在不规范的情况，跳过检查可避免编译报错。
   • 示例：设置 "skipLibCheck": true。
6. esModuleInterop
   • 配置思路：设置为 true 可以在 commonjs 模块系统中更好地导入 esm 模块，使 TypeScript 能正确处理不同模块系统之间的交互，这在兼顾浏览器与 Node.js 环境时很重要。
   • 示例：设置 "esModuleInterop": true。
7. allowSyntheticDefaultImports
   • 配置思路：对于一些没有默认导出，但希望能以默认导入方式使用的模块，设置为 true 可以允许这种写法，提高代码的兼容性和灵活性，尤其是在不同模块系统交互的场景下。
   • 示例：设置 "allowSyntheticDefaultImports": true。