简述如何在 TypeScript 中定义和导入/导出模块？

八股文_TypeScript面试题 0 85

参考回答

在 TypeScript 中，模块系统允许我们将代码组织到独立的文件中，并通过导入和导出机制来共享功能。TypeScript 使用 ECMAScript 6（ES6）模块语法来定义和处理模块。

定义模块（导出）
在 TypeScript 中，可以通过 export 关键字将变量、函数、类或接口等导出，使它们可以在其他模块中被使用。
```
// file1.ts
export const greeting = "Hello, world!";
export function greet(name: string) {
 return `Hello, ${name}!`;
}
```

导入模块

使用 import 关键字从其他模块导入功能，可以导入单个成员或多个成员。

// file2.ts
import { greeting, greet } from "./file1";  // 导入具体的成员

console.log(greeting);  // 输出: "Hello, world!"
console.log(greet("Alice"));  // 输出: "Hello, Alice!"

默认导出与导入

一个模块可以有一个默认导出，这使得导入时不需要花括号。默认导出使用 export default。

// file1.ts
export default function greet(name: string) {
 return `Hello, ${name}!`;
}

// file2.ts
import greet from "./file1";  // 导入默认导出

console.log(greet("Bob"));  // 输出: "Hello, Bob!"

导出所有成员

使用 export * from 可以将一个模块的所有导出成员传递给另一个模块。

// file1.ts
export const x = 10;
export const y = 20;

// file2.ts
export * from "./file1";  // 导出 file1 的所有成员

详细讲解与拓展

1. 导出与导入的不同方式

命名导出（Named Exports）
使用 export 导出的成员可以是变量、函数、类或接口等。通过命名导出，可以导出多个成员。

// file1.ts
export const name = "TypeScript";
export function add(a: number, b: number): number {
return a + b;
}

导入时，使用花括号 {} 引入相应的成员：

// file2.ts
import { name, add } from "./file1";
console.log(name);  // 输出: "TypeScript"
console.log(add(2, 3));  // 输出: 5

默认导出（Default Export）
默认导出允许你为模块指定一个默认值。你可以导出一个类、函数或对象，并在导入时不使用花括号。
```
// file1.ts
export default class Person {
constructor(public name: string) {}
}
```
导入时，直接使用模块名即可：
```
// file2.ts
import Person from "./file1";
const person = new Person("Alice");
console.log(person.name);  // 输出: "Alice"
```
每个模块只能有一个默认导出。

2. 导入所有成员

有时我们可能需要导入一个模块的所有成员并赋予它一个别名。可以使用 import * as 语法来实现。

// file1.ts
export const x = 1;
export const y = 2;

// file2.ts
import * as math from "./file1";
console.log(math.x);  // 输出: 1
console.log(math.y);  // 输出: 2

这里，math 成为导入的模块的别名，所有的导出成员都可以通过 math 访问。

3. 导出与导入的顺序

在 TypeScript 中，模块的导出顺序和导入顺序是重要的。如果在一个模块中使用了另一个模块的导出，TypeScript 会确保先执行并解析依赖项。模块的加载是按需进行的，并且模块只有在首次被导入时才会被加载。

4. 使用 TypeScript 中的类型导入和导出

TypeScript 支持将类型定义作为模块的一部分进行导出和导入。可以通过 export type 和 import type 来专门导出和导入类型。

// file1.ts
export type Person = {
  name: string;
  age: number;
};

// file2.ts
import type { Person } from "./file1";  // 仅导入类型

通过这种方式，你可以避免在最终编译后的 JavaScript 中引入不必要的类型定义代码。

5. 路径别名

在大型项目中，可能会有复杂的文件路径结构。TypeScript 允许你在 tsconfig.json 中配置路径别名，以简化导入路径。

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

在代码中使用别名导入：

import { Person } from "@models/person";

这样，你就不再需要写长的相对路径，可以让代码更简洁、更易于维护。

总结

在 TypeScript 中，模块通过 export 和 import 关键字来定义和共享功能。export 用来导出模块中的变量、函数、类或接口，而 import 用来引入这些导出的成员。TypeScript 支持多种导出方式，包括命名导出、默认导出和全部导出。通过使用模块，开发者可以有效地组织代码，并确保代码的可维护性。