TypeScript - 导入导出

在 TypeScript 中，导入和导出模块是通过 import 和 export 关键字实现的。TypeScript 扩展了 ES6 (ECMAScript 2015) 模块系统，并增加了一些额外的功能，如类型导入等。以下是 TypeScript 导入导出的语法和详细说明。

导出

1. 默认导出 (export default)

• 用于导出一个模块的默认值。一个模块只能有一个默认导出。

// greet.ts
// 导出一个函数作为默认导出
export default function greet() {
  console.log('Hello, world!');
}

2. 命名导出 (export)

• 用于导出多个变量、函数、类或接口。一个模块可以有多个命名导出。

// module.ts
// 导出变量、函数和类
export const name = 'TypeScript';
export function greet() {
  console.log('Hello, world!');
}
export class Person {
  constructor(public name: string) {}
}

3. 类型导出 (export type)

• 用于导出类型别名或接口。仅在类型检查时使用，不会在运行时生成代码。

// types.ts
// 导出接口和类型别名
export interface Person {
  name: string;
  age: number;
}
export type Persons = Array<Person>;

导入

1. 导入默认导出 (import)

• 用于导入模块的默认值。

// main.ts
// 导入默认导出
import greet from './greet';
greet(); // 输出：Hello, world!

2. 导入命名导出 (import)

• 用于导入模块中的一个或多个命名导出。

// main.ts
// 导入命名导出
import { name, greet, Person } from './module';
console.log(name); // 输出：TypeScript
greet(); // 输出：Hello, world!
const person = new Person('John');
console.log(person.name); // 输出：John

3. 导入所有命名导出 (import *)

• 用于将模块中的所有命名导出导入为一个对象。

// main.ts
// 导入所有命名导出
import * as Module from './module';
console.log(Module.name); // 输出：TypeScript
Module.greet(); // 输出：Hello, world!
const person = new Module.Person('John');
console.log(person.name); // 输出：John

4. 导入类型 (import type)

• 用于显式地导入类型，仅在编译时有效，不会在运行时生成代码。TypeScript 3.8 引入的特性。
• 有两种写法：

// 第一种写法
import type { Person, Persons } from './types';

// 第二种写法
import { type Person, type Persons } from './types';

5. 混合导入 (import 与 import type)

• 可以在同一个导入语句中同时导入值和类型。

// main.ts
// 混合导入值和类型
import { Person, type Persons } from './types';

重新导出 (export from)

• 用于将导入的模块重新导出。

// reexport.ts
// 重新导出模块的默认导出
export { default } from './greet';

// 重新导出模块的命名导出
export { name, greet, Person } from './module';

// 重新导出模块中的所有命名导出
export * from './module';

导入导出总结

• 默认导出 (export default)：一个模块只能有一个默认导出。
• 命名导出 (export)：一个模块可以有多个命名导出。
• 类型导出 (export type)：仅用于类型导出，不会在运行时生成代码。
• 导入默认导出 (import)：用于导入默认导出。
• 导入命名导出 (import)：用于导入一个或多个命名导出。
• 导入所有命名导出 (import *)：用于将所有命名导出导入为一个对象。
• 导入类型 (import type)：显式导入类型，仅在编译时有效，有两种写法：
  • import type { Person, Persons } from './types';
  • import { type Person, type Persons } from './types';
• 混合导入 (import 与 import type)：在同一导入语句中同时导入值和类型。
• 重新导出 (export from)：用于将导入的模块重新导出。

通过这些语法和特性，TypeScript 提供了灵活和强大的模块管理能力，使得代码的组织和复用更加方便和高效。