模块解析是编译器查找模块的过程。TypeScript 支持两种模块解析策略：Classic 和 Node。理解模块解析机制有助于解决模块导入问题。
Classic 是 TypeScript 的默认策略，主要用于 AMD、SystemJS 等旧模块系统。
相对路径导入：
import { User } from "./user"
解析顺序：
./user.ts./user.d.ts非相对路径导入：
import { User } from "user"
解析顺序：
user.ts 或 user.d.tsNode 策略模拟 Node.js 的模块解析机制，是现代项目的推荐选择。
相对路径导入：
import { User } from "./user"
解析顺序：
./user.ts./user.tsx./user.d.ts./user/package.json 中的 types 字段./user/index.ts./user/index.tsx./user/index.d.ts非相对路径导入：
import { User } from "user"
解析顺序：
node_modules/user.tsnode_modules/user.tsxnode_modules/user.d.tsnode_modules/user/package.json 中的 types 字段node_modules/@types/user.d.tsnode_modules在 tsconfig.json 中配置模块解析策略。
{
"compilerOptions": {
"moduleResolution": "node"
}
}
Node 策略是现代项目的推荐选择。
路径映射可以简化模块导入路径。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@utils/*": ["src/utils/*"],
"@components/*": ["src/components/*"]
}
}
}
使用路径映射导入模块。
import { formatDate } from "@utils/format"
import { Button } from "@components/Button"
baseUrl 设置模块解析的基础路径。
{
"compilerOptions": {
"baseUrl": "./src"
}
}
所有非相对路径导入都从 baseUrl 开始解析。
import { User } from "models/user"
解析为 ./src/models/user.ts。
rootDirs 设置多个根目录，编译器将它们视为一个目录。
{
"compilerOptions": {
"rootDirs": ["src", "generated"]
}
}
可以从任意根目录导入模块。
import { User } from "./models/user"
编译器会在 src/models/user.ts 和 generated/models/user.ts 中查找。
使用 traceResolution 选项追踪模块解析过程。
{
"compilerOptions": {
"traceResolution": true
}
}
编译时会输出详细的模块解析日志，帮助调试导入问题。
模块解析常见问题：
@types/xxx 包paths 配置是否正确.js 文件配置合理的模块解析策略可以提高开发效率。
{
"compilerOptions": {
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"],
"@types/*": ["src/types/*"]
}
}
}
使用别名导入模块，代码更加清晰。
import { User } from "@/models/user"
import { Button } from "@components/Button"
import { formatDate } from "@utils/format"
import type { ApiResponse } from "@types/api"
模块解析是编译器查找模块的过程。TypeScript 支持 Classic 和 Node 两种解析策略，推荐使用 Node 策略。路径映射可以简化模块导入路径。baseUrl 设置基础路径，rootDirs 设置多个根目录。理解模块解析机制有助于解决模块导入问题。