TypeScript 中的 export 和 import 的使用

介绍

TypeScript 是一种开源的编程语言，它是 JavaScript 的超集，可以编译成纯 JavaScript 代码。TypeScript 扩展了 JavaScript 的语法，增加了类型系统等特性，使得代码更加健壮和易于维护。在 TypeScript 中，export 和 import 是两个重要的关键字，它们用于模块化开发，使得代码更加可读、可维护和可复用。

Export

在 TypeScript 中，export 用于将变量、函数、类等成员导出为模块的公共 API。使用 export 时，需要注意以下几点：

1. 可以使用默认导出和命名导出两种方式导出成员。
2. 可以导出常量、变量、函数、类、接口、枚举等成员。
3. 导出的成员可以在其他模块中使用 import 关键字进行引用。

默认导出

默认导出是指一个模块只导出一个成员，这个成员可以是任意类型，例如一个函数、一个类或一个对象。默认导出使用 export default 关键字进行声明。

示例代码：

// utils.ts
export default function add(a: number, b: number): number {
  return a + b;
}

// main.ts
import add from './utils';

console.log(add(1, 2)); // 3

命名导出

命名导出是指一个模块可以导出多个成员，每个成员都有一个名称，使用 export 关键字进行声明。

示例代码：

-- -------------------- ---- -------
-- --------
------ -------- ------ ------- -- -------- ------ -
  ------ - - --
-

------ ----- -- - -----

------ ----- ------ -
  ----- -------
  ----------------- ------- -
    --------- - -----
  -
-
展开代码

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

console.log(add(1, 2)); // 3
console.log(PI); // 3.14
const person = new Person('Tom');
console.log(person.name); // Tom

重新导出

在 TypeScript 中，可以使用 export 关键字重新导出其他模块中的成员，相当于对外提供了一个新的模块接口。

示例代码：

// utils.ts
export function add(a: number, b: number): number {
  return a + b;
}

// math.ts
export { add } from './utils';

// main.ts
import { add } from './math';

console.log(add(1, 2)); // 3

Import

在 TypeScript 中，import 用于引入其他模块导出的成员。使用 import 时，需要注意以下几点：

1. 可以使用默认导入和命名导入两种方式引入成员。
2. 可以从本地文件系统或远程服务器上导入模块。
3. 可以使用 as 关键字进行重命名。

默认导入

默认导入是指从一个模块中导入默认导出的成员。默认导入使用 import 关键字进行声明。

示例代码：

// utils.ts
export default function add(a: number, b: number): number {
  return a + b;
}

// main.ts
import add from './utils';

console.log(add(1, 2)); // 3

命名导入

命名导入是指从一个模块中导入命名导出的成员。命名导入使用 import 关键字进行声明。

示例代码：

// utils.ts
export function add(a: number, b: number): number {
  return a + b;
}

export const PI = 3.14;

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

console.log(add(1, 2)); // 3
console.log(PI); // 3.14

重命名导入

重命名导入是指使用 as 关键字将导入的成员重命名。重命名导入可以防止命名冲突，使得代码更加清晰易懂。

示例代码：

// utils.ts
export function add(a: number, b: number): number {
  return a + b;
}

export const PI = 3.14;

// main.ts
import { add as sum, PI as pi } from './utils';

console.log(sum(1, 2)); // 3
console.log(pi); // 3.14

总结

在 TypeScript 中，export 和 import 是两个重要的关键字，它们用于模块化开发，使得代码更加可读、可维护和可复用。通过本文的介绍，我们了解了 export 和 import 的基本用法和注意事项，希望能够帮助读者更好地理解 TypeScript 的模块化开发。

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