导入导出 #

一、导出方式 #

1.1 命名导出 #

typescript
// 导出声明
export const name = "Deno";
export const version = 2.0;

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

export class User {
  constructor(public name: string) {}
}

export interface Config {
  host: string;
  port: number;
}

export type ID = string | number;

export enum Status {
  Active = "active",
  Inactive = "inactive"
}

1.2 导出语句 #

typescript
const name = "Deno";
const version = 2.0;

function greet(name: string): string {
  return `Hello, ${name}!`;
}

// 统一导出
export { name, version, greet };

// 重命名导出
export { name as moduleName, version as moduleVersion };

1.3 默认导出 #

typescript
// 默认导出函数
export default function greet(name: string): string {
  return `Hello, ${name}!`;
}

// 默认导出类
export default class User {
  constructor(public name: string) {}
}

// 默认导出对象
export default {
  name: "Deno",
  version: 2.0
};

// 默认导出值
export default "Hello World";

1.4 混合导出 #

typescript
export default class User {
  constructor(public name: string) {}
}

export const defaultUser = new User("Guest");
export function createUser(name: string): User {
  return new User(name);
}

1.5 类型导出 #

typescript
// 导出类型
export type { User, Config };

// 导出接口
export interface User {
  id: number;
  name: string;
}

// 类型与值同时导出
export type { User };
export { User as UserModel };

二、导入方式 #

2.1 命名导入 #

typescript
import { name, version, greet } from "./module.ts";

console.log(name);    // Deno
console.log(version); // 2.0
console.log(greet("World")); // Hello, World!

2.2 重命名导入 #

typescript
import { name as moduleName, version as moduleVersion } from "./module.ts";

console.log(moduleName);    // Deno
console.log(moduleVersion); // 2.0

2.3 默认导入 #

typescript
import User from "./user.ts";
import greet from "./greet.ts";

const user = new User("Alice");
console.log(greet("World"));

2.4 混合导入 #

typescript
import User, { defaultUser, createUser } from "./user.ts";

const user = new User("Alice");
console.log(defaultUser);
const newUser = createUser("Bob");

2.5 命名空间导入 #

typescript
import * as Module from "./module.ts";

console.log(Module.name);    // Deno
console.log(Module.version); // 2.0
console.log(Module.greet("World")); // Hello, World!

2.6 仅执行导入 #

typescript
// 执行模块但不导入
import "./setup.ts";
import "./polyfills.ts";

2.7 类型导入 #

typescript
// 仅导入类型
import type { User, Config } from "./types.ts";

// 类型导入在编译后会被移除
function process(user: User): void {
  console.log(user.name);
}

2.8 动态导入 #

typescript
async function loadModule() {
  const module = await import("./module.ts");
  console.log(module.name);
  console.log(module.default);
}

// 条件导入
if (condition) {
  const module = await import("./optional.ts");
}

三、重导出 #

3.1 重导出所有 #

typescript
// 重导出整个模块
export * from "./utils.ts";
export * from "./types.ts";

3.2 选择性重导出 #

typescript
// 重导出特定成员
export { name, version } from "./module.ts";

// 重命名后重导出
export { name as moduleName } from "./module.ts";

3.3 重导出默认 #

typescript
// 重导出默认导出
export { default } from "./user.ts";

// 重导出默认并重命名
export { default as User } from "./user.ts";

// 将命名导出重导出为默认
export { User as default } from "./user.ts";

3.4 命名空间重导出 #

typescript
// 重导出为命名空间
export * as Utils from "./utils.ts";
export * as Types from "./types.ts";

// 使用时
import { Utils, Types } from "./index.ts";

四、导入映射 #

4.1 基本配置 #

json
// import_map.json
{
  "imports": {
    "@/": "./src/",
    "@utils/": "./src/utils/",
    "@types/": "./src/types/",
    "lodash": "https://cdn.skypack.dev/lodash"
  }
}

4.2 使用映射 #

typescript
import { add } from "@utils/math.ts";
import { User } from "@types/user.ts";
import _ from "lodash";

4.3 deno.json配置 #

json
{
  "imports": {
    "@std/http": "jsr:@std/http@^1.0.0",
    "@/": "./src/"
  }
}

五、模块解析规则 #

5.1 文件扩展名 #

typescript
// Deno要求完整的文件扩展名
import { add } from "./math.ts";  // 正确
// import { add } from "./math";  // 错误

5.2 相对路径 #

typescript
import { add } from "./math.ts";        // 当前目录
import { User } from "../types.ts";     // 上级目录
import { config } from "./config.ts";   // 子目录

5.3 远程模块 #

typescript
// 标准库
import { serve } from "https://deno.land/std@0.208.0/http/server.ts";

// 第三方模块
import lodash from "https://cdn.skypack.dev/lodash@4.17.21";

// npm包
import express from "npm:express@4.18.2";

// jsr包
import { encodeBase64 } from "jsr:@std/encoding/base64";

六、实际应用 #

6.1 项目结构 #

text
src/
├── mod.ts           # 主入口
├── index.ts         # 导出所有
├── utils/
│   ├── mod.ts       # utils入口
│   ├── math.ts
│   └── string.ts
├── types/
│   ├── mod.ts       # types入口
│   └── user.ts
└── services/
    ├── mod.ts       # services入口
    └── api.ts

6.2 入口文件 #

typescript
// src/mod.ts
export * from "./utils/mod.ts";
export * from "./types/mod.ts";
export * from "./services/mod.ts";

// src/utils/mod.ts
export * from "./math.ts";
export * from "./string.ts";

// src/types/mod.ts
export * from "./user.ts";

6.3 使用示例 #

typescript
// main.ts
import { add, capitalize, User, fetchAPI } from "./src/mod.ts";

const result = add(1, 2);
const name = capitalize("hello");
const user: User = { id: 1, name: "Alice" };
const data = await fetchAPI("/users");

七、最佳实践 #

7.1 使用mod.ts #

typescript
// 推荐:每个目录使用mod.ts作为入口
// src/utils/mod.ts
export { add, subtract } from "./math.ts";
export { capitalize, reverse } from "./string.ts";

7.2 类型与实现分离 #

typescript
// types.ts
export interface User {
  id: number;
  name: string;
}

// user.ts
import type { User } from "./types.ts";

export function createUser(name: string): User {
  return { id: Date.now(), name };
}

7.3 避免循环依赖 #

typescript
// 不推荐:循环依赖
// a.ts
import { b } from "./b.ts";
export const a = 1;

// b.ts
import { a } from "./a.ts";
export const b = a + 1;

// 推荐:重构代码结构

八、总结 #

本章学习了:

  • 各种导出方式
  • 各种导入方式
  • 重导出语法
  • 导入映射配置
  • 模块解析规则
  • 项目结构组织
  • 最佳实践

下一章,我们将学习URL导入。

最后更新:2026-03-28