TypeScript 中如何使用 export 和 import 关键字导入导出模块

在 TypeScript 中，我们可以使用 export 和 import 关键字来实现模块的导出和导入。通过模块化的组织代码，可以提高代码的可重用性和可维护性，让代码更清晰、更易于管理。

导出模块

在 TypeScript 中，我们可以使用 export 关键字将某个变量、函数或类导出为一个模块。导出的模块可以在其他文件中通过 import 关键字进行导入。

导出变量

一个变量可以通过 export 关键字导出为一个模块。例如：

export const PI = 3.14;

上面的代码将常量 PI 导出为一个模块，其他文件中可以通过 import 关键字使用 PI。

import { PI } from './math';
console.log(PI); // 3.14

导出函数

一个函数可以通过 export 关键字导出为一个模块。例如：

export function add(x: number, y: number): number {
  return x + y;
}

上面的代码将函数 add 导出为一个模块，其他文件中可以通过 import 关键字使用 add。

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

导出类

一个类可以通过 export 关键字导出为一个模块。例如：

export class Point {
  constructor(public x: number, public y: number) {}
}

上面的代码将类 Point 导出为一个模块，其他文件中可以通过 import 关键字使用 Point。

import { Point } from './math';
const p = new Point(1, 2);
console.log(p.x, p.y); // 1, 2

注意，如果一个类的构造函数是私有的或受保护的，不能直接导出这个类，但可以通过一个工厂函数导出这个类的实例。例如：

class Animal {
  private constructor(public name: string) {}
}

export function createAnimal(name: string): Animal {
  return new Animal(name);
}

导入模块

在 TypeScript 中，我们可以使用 import 关键字导入其他模块中导出的内容。通过导入模块，我们可以在当前文件中使用其他文件中导出的变量、函数和类等。

导入变量

将其他文件导出的变量导入到当前文件中可以使用以下语法：

import { PI } from './math';

可以一次导入多个变量：

import { PI, E, log } from './math';

也可以将所有导出的变量一次性导入：

import * as math from './math';
console.log(math.PI, math.E, math.log); // 3.14, 2.718, [Function: log]

导入函数和类

将其他文件导出的函数和类导入到当前文件中可以使用以下语法：

import { add } from './math';
import { Point } from './math';

给导入的模块起别名

在有些情况下，我们可能需要给导入的模块或其导出的变量起一个别名，以避免命名冲突或更易于理解。可以使用 as 关键字来给导入的模块或变量起别名。例如：

import { PI as piValue } from './math';
console.log(piValue); // 3.14

总结

在 TypeScript 中，我们可以使用 export 和 import 关键字来实现模块的导出和导入。通过模块化的组织代码，可以提高代码的可重用性和可维护性，让代码更清晰、更易于管理。在导出模块时，可以导出变量、函数和类，并可以使用一个工厂函数导出私有或受保护的类。在导入模块时，可以导入单个变量、函数和类，也可以一次性导入所有导出的变量，并可以给导入的模块或变量起别名。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518da0195b1f8cacd11c51b