TypeScript Academy · 课时

ES 模块语法：import 与 export

Q: 「ES 模块语法：import 与 export」这节课中我会学到什么？

在 TypeScript 文件中使用具名导出和默认导出 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在 TypeScript 文件中使用具名导出和默认导出

第 1 / 4 课13 个步骤

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

欢迎

TypeScript 支持 ES 模块语法，可以将代码组织到不同文件中。本课将介绍命名导出、默认导出和导入。

命名导出

使用 `export` 让其他文件可以使用某个声明。

// math.ts
export function add(a: number, b: number): number { return a + b; }
export const PI = 3.14159;
export interface Config { host: string; }

命名导入

使用花括号导入特定的命名导出。

// app.ts
import { add, PI } from './math';
console.log(add(1, 2)); // 3
console.log(PI);        // 3.14159

默认导出

一个模块只能有一个默认导出。导入时无需使用花括号，并且可以为其指定任意名称。

// greeter.ts
export default function greet(name: string): string {
  return 'Hello, ' + name;
}

// app.ts
import greet from './greeter';
console.log(greet('Alice'));

导入别名

使用 `as` 重命名导入，以避免命名冲突。

import { log as consoleLog } from './logger';
import { User as UserModel } from './models';

命名空间导入

将所有导出作为命名空间对象导入。

import * as math from './math';
console.log(math.add(1, 2));
console.log(math.PI);

重新导出

从其他模块重新导出内容，以创建公共 API 表面。

// index.ts
export { add, PI } from './math';
export { greet } from './greeter';
export * from './utils';

仅类型导出

使用 `export type` 导出类型，而不包含运行时代码。

// types.ts
export type { User, Product };
export type UserId = string;

仅类型导入

`import type` 确保导入不会包含运行时代码。它适用于导入接口和类型别名。

import type { User } from './models';
// Only the type is imported — no JavaScript
function greet(user: User): string { return user.name; }

模块解析

TypeScript 会根据 tsconfig 中的 `moduleResolution` 设置解析导入。对于现代项目，推荐使用 `bundler` 或 `node16`。

导入 JSON

在 tsconfig 中启用 `resolveJsonModule: true`，即可在导入 JSON 文件时进行类型推断。

// tsconfig.json: "resolveJsonModule": true
import config from './config.json';
console.log(config.host); // typed based on JSON structure

快速检查

哪种导入语法可以确保导入不会生成 JavaScript 输出（仅类型导入）？

在交互式课程中回答

回顾

对于多个项目，请使用命名导出和命名导入；对于模块的主要项目，请使用默认导出；对于类型，请使用 import type。在 index.ts 中重新导出，可以创建简洁的公共 API。

免费开始

用 AI 导师学习 TypeScript — 免费

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

课程: 101
课程: 352

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

常见问题解答

「ES 模块语法：import 与 export」课时是免费的吗？

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

「ES 模块语法：import 与 export」这节课中我会学到什么？

在 TypeScript 文件中使用具名导出和默认导出你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「ES 模块语法：import 与 export」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy