TypeScript 模块系统是组织代码、复用逻辑的核心机制。通过 import 和 export 关键字，可以将代码拆分为多个文件，明确暴露和引入功能。以下指南将直接演示如何在项目中使用这些语法。

导出 (Export) 语法

导出操作决定了哪些变量、函数、类或接口可以被其他文件访问。TypeScript 提供了两种主要的导出方式：命名导出和默认导出。

1. 使用命名导出

命名导出允许一个文件导出多个变量或函数，导入时需要明确指定名称。

创建 一个名为 mathUtils.ts 的文件。

输入 以下代码，定义两个函数并分别导出：

// mathUtils.ts
export const PI = 3.14;

export function add(a: number, b: number): number {
    return a + b;
}

export function multiply(a: number, b: number): number {
    return a * b;
}

或者，在文件末尾统一列出需要导出的名称：

// mathUtils.ts
const PI = 3.14;

function add(a: number, b: number): number {
    return a + b;
}

// 集中导出
export { PI, add };

重命名 导出项（如果想要导出的名称与内部变量名不同）：

// mathUtils.ts
function subtract(a: number, b: number): number {
    return a - b;
}

export { subtract as sub };

2. 使用默认导出

默认导出表示模块的主要功能，每个文件只能有一个默认导出。

创建 一个名为 Calculator.ts 的文件。

编写 类并使用 export default 导出：

// Calculator.ts
export default class Calculator {
    constructor(public value: number = 0) {}

    add(num: number) {
        this.value += num;
    }

    getResult() {
        return this.value;
    }
}

或者 直接导出一个值或函数：

// greet.ts
const defaultGreeting = "Hello World";
export default defaultGreeting;

导入 (Import) 语法

导入操作用于将其他模块导出的功能引入到当前文件中。

1. 导入命名导出

对于使用 export 导出的内容，必须使用 {} 包裹 exact 名称。

创建 一个名为 main.ts 的文件。

输入 以下代码从 mathUtils.ts 导入特定功能：

// main.ts
import { PI, add } from './mathUtils';

console.log(PI); // 输出: 3.14
console.log(add(2, 3)); // 输出: 5

重命名 导入项（解决名称冲突问题）：

// main.ts
import { add as sumNumbers } from './mathUtils';

console.log(sumNumbers(10, 20));

导入 所有导出内容到一个对象命名空间：

// main.ts
import * as MathUtils from './mathUtils';

console.log(MathUtils.PI);
console.log(MathUtils.add(5, 5));

2. 导入默认导出

导入默认导出时，不需要使用 {}，且可以自定义名称。

在 main.ts 中添加以下代码：

// main.ts
import Calculator from './Calculator';

const calc = new Calculator(10);
calc.add(5);
console.log(calc.getResult()); // 输出: 15

3. 混合导入

如果一个模块同时包含命名导出和默认导出，可以一次性导入。

假设 utils.ts 内容如下：

// utils.ts
export default function defaultFunc() {
    console.log("I am default");
}

export const helper = "I am helper";

使用 以下语法在 main.ts 中导入：

// main.ts
import defaultFunc, { helper } from './utils';

defaultFunc();
console.log(helper);

TypeScript 特有的导入与导出

TypeScript 扩展了模块语法，增加了对类型的导入导出支持。

1. 导入类型

在 TypeScript 5.0 之前，导入类型建议使用 import type 以确保编译器在生成 JavaScript 时完全移除该导入。虽然新版本已经可以自动推断，但显式声明依然是好习惯。

假设 存在类型定义文件 types.ts：

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

使用 import type 仅导入类型：

// main.ts
import type { User } from './types';

const u: User = { id: 1, name: "Alice" };

2. 导出类型

直接 导出接口或类型别名：

// types.ts
export interface Config {
    debug: boolean;
}

export type ID = string | number;

导出与导入对比表

下表总结了不同导出方式对应的导入语法。

模块路径解析

在引用模块时，路径的写法决定了查找方式。

1. 相对路径

用于 引用项目内部的其他文件。必须以 ./（当前目录）或 ../（上一级目录）开头。

import { Tool } from './utils/Tool';
import { Config } from '../config';

2. 绝对路径 (非 node_modules)

通常 需要在 tsconfig.json 中配置 baseUrl 和 paths。

打开 tsconfig.json。

配置 compilerOptions：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

使用 别名导入：

import { User } from '@/types/user';

3. 模块名

用于 引用 node_modules 中的第三方库（如 lodash, react），直接写包名。

import { cloneDeep } from 'lodash';

重新导出 (Re-export)

有时我们希望在一个“聚合文件”中统一管理多个模块的导出，以便其他地方只需引入这一个文件。

创建 一个 index.ts 文件。

使用 export ... from ... 语法：

// index.ts
// 重新导出 mathUtils 中的命名导出
export { PI, add, multiply } from './mathUtils';

// 重新导出 Calculator 的默认导出，并将其重命名
export { default as Calc } from './Calculator';

现在，其他文件可以直接从 index.ts 导入：

// main.ts
import { PI, Calc } from './index';

这层隔离允许你在不修改引用路径的情况下，调整内部文件结构。