JavaScript中TS模块化配置compilerOptions详解-js教程-PHP中文网

typescript模块化配置核心是module、moduleresolution、esmoduleinterop和baseurl/paths：module决定输出模块格式（推荐es2020），moduleresolution控制路径解析（推荐node16），esmoduleinterop解决默认导入兼容性，baseurl+paths支持路径别名。

javascript中ts模块化配置compileroptions详解

在 TypeScript 项目中，compilerOptions 是 tsconfig.json 的核心配置块，直接决定模块如何解析、输出、类型检查及兼容性行为。模块化相关配置尤其关键——它影响 import/export 是否能正确工作、能否生成符合目标环境（如 Node.js 或浏览器）的代码、是否启用动态导入、是否支持路径别名等。

module：指定输出的模块系统格式

该选项控制 TypeScript 编译后生成的 JavaScript 使用哪种模块语法（如 CommonJS、ES2015、UMD 等），**不改变源码中的 import/export 写法**，只影响编译结果。

开发时推荐设为 "ES2020" 或 "ESNext"：保留原生 ES 模块语义（如 import.meta、动态 import()），便于现代打包工具（Vite、Webpack 5+）处理，也利于 tree-shaking。
若目标环境是旧版 Node.js（如 v12 以下）或需直接运行 .js 文件，可选 "CommonJS"：生成 require() / module.exports，但会丢失 ES 模块的静态分析能力。
"UMD" 和 "AMD" 已较少使用，仅在特定 CDN 或遗留前端场景下考虑。
注意：module 必须与 target 协调。例如 target: "ES5" 时不能设 module: "ES2020"（TS 会报错），因为 ES5 不支持 import 语法；此时应设 module: "CommonJS" 或 "AMD"。

moduleResolution：决定 import 路径如何被查找和解析

它定义 TypeScript 编译器如何定位 import 语句所引用的模块文件（.ts/.d.ts/.js），直接影响路径别名、node_modules 包解析、扩展名补全等行为。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

"node"（推荐，默认值）：模拟 Node.js 的模块解析逻辑，支持 package.json#exports、package.json#types、自动补全 .ts/.d.ts 扩展名、识别 node_modules 中的类型声明。
"node16" 或 "nodenext"：适配 Node.js v12.20+/v14.13+ 的 ESM 支持，严格遵循 package.json#type 和 #exports 字段，区分 import 与 require 的解析规则。若项目已启用 Node.js 原生 ESM（type: "module"），必须用此选项。
"classic" 已弃用，不建议使用。

allowSyntheticDefaultImports 与 esModuleInterop：解决默认导入兼容性问题

当从非 ES 模块（如 CommonJS 包）中使用 import React from 'react' 时，TypeScript 默认会报错（因 CJS 没有真正 default export）。这两个选项协同解决该问题：

esModuleInterop: true（推荐开启）：自动生成兼容 wrapper，允许对 CJS 模块使用默认导入；同时要求 allowSyntheticDefaultImports: true（TS 自动启用，无需手动写）。
开启后，编译器会把 import foo from 'foo' 编译为 const foo = require('foo').default || require('foo')，并确保类型检查通过。
若关闭 esModuleInterop，则需显式写 import * as React from 'react' 或 import React = require('react')（后者需 allowSyntheticDefaultImports: true）。

baseUrl + paths：启用模块路径别名（如 @/utils）

用于替代冗长相对路径（../../../utils），提升可读性与重构安全性。

baseUrl: "./"：设定所有非相对路径导入的基准目录（通常设为项目根目录）。
paths：定义路径映射，例如：
```
"paths": {
  "@/*": ["src/*"],
  "@api": ["src/services/api.ts"]
}
```
这样就能写 import { api } from '@/api' 或 import utils from '@/utils/helper'。
注意：paths 仅影响 TypeScript 类型检查和路径解析，**不影响运行时**。若要让 JS 运行时不报错，还需构建工具（如 Webpack 的 resolve.alias、Vite 的 resolve.alias）做对应配置。

模块化配置不是孤立的，需与 target、lib、outDir、rootDir 等协同设置。实际项目中建议优先采用 module: "ES2020" + moduleResolution: "node16" + esModuleInterop: true + baseUrl + paths 组合，兼顾现代性、兼容性与开发体验。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南