TypeScript 中 import 和 export 的详解及用法比较

在前端开发中，模块化编程是一个非常重要的概念。TypeScript 作为一种静态类型语言，提供了更加完善的模块化支持。其中 import 和 export 是 TypeScript 中常用的模块化语法，本文将对它们进行详细的解释和比较，并提供实用的示例代码。

import

import 语句用于从其他模块中导入一个或多个导出的声明。在 TypeScript 中，import 有以下几种用法：

导入默认导出

当一个模块只有一个默认导出时，可以使用以下方式导入：

import myModule from './myModule';

这里的 myModule 就是默认导出的值。如果需要使用默认导出的成员，可以直接使用 myModule，如：

console.log(myModule);

导入命名导出

当一个模块有多个命名导出时，可以使用以下方式导入：

import { myFunction, myVariable } from './myModule';

这里的 myFunction 和 myVariable 都是命名导出的成员。如果需要使用命名导出的成员，可以直接使用它们，如：

myFunction();
console.log(myVariable);

导入所有导出

当一个模块有多个导出时，可以使用以下方式导入：

import * as myModule from './myModule';

这里的 myModule 就是一个对象，包含了模块中所有导出的成员。如果需要使用导出的成员，可以通过 myModule 来访问，如：

myModule.myFunction();
console.log(myModule.myVariable);

导入类型

除了导入值之外，还可以导入类型。例如：

import { MyType } from './myModule';

这里的 MyType 就是一个类型，可以在代码中使用它，如：

let myVariable: MyType;

export

export 语句用于从当前模块中导出一个或多个声明。在 TypeScript 中，export 有以下几种用法：

导出默认值

可以使用以下方式导出一个默认值：

export default myVariable;

这里的 myVariable 就是默认导出的值。如果需要导出一个函数或类的默认值，也可以这样写：

export default function myFunction() {
  // ...
}

export default class MyClass {
  // ...
}

导出命名值

可以使用以下方式导出一个或多个命名值：

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

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

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

这里的 myVariable、myFunction 和 MyClass 都是命名导出的成员。

导出类型

除了导出值之外，还可以导出类型。例如：

export interface MyInterface {
  // ...
}

export type MyType = string | number;

这里的 MyInterface 和 MyType 都是类型。

模块化语法比较

在实际开发中，我们可能会遇到多种模块化语法的使用情况，如 CommonJS、AMD、ES6 等。下表列出了这些模块化语法的导入和导出方式，以及它们在 TypeScript 中的对应方式。

在 TypeScript 中，我们可以使用 import 和 export 来处理这些模块化语法。例如，对于 CommonJS 模块化语法，我们可以使用以下方式导入和导出：

// 导入
import * as myModule from './myModule';
const myVariable = require('./myModule').myVariable;

// 导出
module.exports = myVariable;
export = myVariable;

总结

本文介绍了 TypeScript 中 import 和 export 的详细用法，并提供了实用的示例代码。同时，还对多种模块化语法的导入和导出方式进行了比较。希望本文对大家学习 TypeScript 有所帮助。

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