TypeScript Academy · 课时

路径映射与模块解析

Q: 「路径映射与模块解析」这节课中我会学到什么？

使用 baseUrl/paths 配置路径别名，理解 TS 如何解析模块，并避免常见问题。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 baseUrl/paths 配置路径别名，理解 TS 如何解析模块，并避免常见问题。

第 3 / 3 课8 个步骤

路径映射与模块解析 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 3 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 3 节课。

简介

目标：使用路径别名替代冗长的相对导入，并理解 TypeScript 的模块解析规则，让导入保持简洁。

tsconfig 路径

设置 baseUrl（非相对导入所使用的项目根目录），并在路径中映射别名。键可以使用 * 通配符。

// file: tsconfig.json (excerpt)
{
  "compilerOptions": {
    "baseUrl": "./src",
			 "paths": {
      "@utils/*": ["utils/*"],
			 "@components/*": ["components/*"]
				 }
  }
}

使用别名

请按照声明时的方式原样使用别名进行导入（例如 @utils/date）。TypeScript 会将其解析到 src/ 中的映射路径。

// file: src/app.ts
import { formatDate } from "@utils/date";
		import Button from "@components/Button";

		console.log(formatDate(new Date()));
		const btn = new Button();

解析策略

解析方式取决于模块（Node、NodeNext、Bundler）。TS 会检查文件扩展名、package.json 中的导出/类型，然后回退到 node_modules。

// Resolution order sketch (NodeNext/Node):
// 1) Exact file: .ts/.tsx/.d.ts/.js
// 2) Index files: index.ts / index.js
// 3) package.json exports / types
// 4) paths & baseUrl fallbacks
// 5) node_modules lookup (upwards)

export const note = "Resolution depends on module setting (Node, NodeNext, Bundler).";

与打包器保持一致

重要：TS 知道用于类型检查的别名，但您的打包器/运行时也必须映射这些别名（例如 Vite、Webpack，或用于 ts-node 的 tsconfig-paths）。

// Example: vite.config.ts (alias for runtime)
		import { defineConfig } from "vite";
		import path from "path";

		export default defineConfig({
			resolve: {
			alias: {
			"@utils": path.resolve(__dirname, "src/utils"),
			"@components": path.resolve(__dirname, "src/components")
			}
			}
			});

提示与常见问题

提示：

保持 baseUrl 稳定（例如 src/）。
在打包器/运行时中同步配置别名。
避免使用层层嵌套的 ../.. 路径；优先使用简洁的别名。

路径别名检查

快速检查：哪些 tsconfig 选项可以启用类似 @utils/* 的路径别名？

在交互式课程中回答

回顾

回顾：配置 baseUrl 和 paths 来设置别名，了解 TS 的解析顺序，并让打包器/运行时保持一致，以避免导入失效。

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 101
课程: 352

免费开始学习查看完整课程

常见问题解答

「路径映射与模块解析」课时是免费的吗？

是的 — 「路径映射与模块解析」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 3 节课。

「路径映射与模块解析」这节课中我会学到什么？

使用 baseUrl/paths 配置路径别名，理解 TS 如何解析模块，并避免常见问题。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 3 节。

「路径映射与模块解析」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy