MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

TypeScript模块系统入门：导入导出的基础

2023-05-034.7k 阅读

一、TypeScript 模块系统概述

在前端开发中，随着项目规模的不断扩大，代码的组织和管理变得愈发重要。TypeScript 的模块系统提供了一种有效的方式来拆分和管理代码，让我们能够将相关的代码逻辑封装在不同的模块中，并通过导入和导出机制进行交互。

模块是 TypeScript 中代码组织的基本单元。每个 TypeScript 文件都可以看作是一个模块。模块内的代码拥有自己独立的作用域，避免了不同模块之间变量和函数的命名冲突。这使得我们可以在大型项目中，将复杂的功能拆分成多个小的、易于管理和维护的模块。

例如，我们可能有一个项目，其中包含用户登录、数据获取、页面渲染等不同功能。我们可以将用户登录相关的代码放在一个模块中，数据获取相关代码放在另一个模块中，以此类推。这样，每个模块专注于实现特定的功能，代码结构更加清晰，也便于团队协作开发。

二、导出基础

2.1 导出变量

在 TypeScript 模块中，我们可以使用 export 关键字来导出变量。例如，我们创建一个名为 mathUtils.ts 的文件，用于定义一些数学计算相关的工具函数和常量。

// mathUtils.ts
export const PI = 3.14159;

export function add(a: number, b: number): number {
    return a + b;
}

在上述代码中，我们使用 export 关键字导出了常量 PI 和函数 add。这样，其他模块就可以导入并使用这些导出的内容。

2.2 导出函数

导出函数的方式与导出变量类似。我们继续在 mathUtils.ts 中添加更多的函数示例：

// mathUtils.ts
export const PI = 3.14159;

export function add(a: number, b: number): number {
    return a + b;
}

export function subtract(a: number, b: number): number {
    return a - b;
}

这里我们又导出了 subtract 函数，它用于计算两个数的差值。

2.3 导出类

类也可以在模块中导出。假设我们有一个 User.ts 文件，用于定义用户相关的类：

// User.ts
export class User {
    constructor(public name: string, public age: number) {}

    sayHello() {
        return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
    }
}

在这个 User 类中，我们定义了构造函数和 sayHello 方法，并通过 export 将整个类导出。这样，其他模块就可以创建 User 类的实例并调用其方法。

三、默认导出

3.1 为什么需要默认导出

在某些情况下，一个模块可能主要提供一个特定的功能或对象，使用默认导出可以让导入代码更加简洁直观。例如，一个模块可能只负责导出一个主要的组件，默认导出可以让导入者不需要指定具体的导出名称，直接导入这个主要内容。

3.2 使用默认导出

我们来看一个示例，创建一个 message.ts 文件：

// message.ts
const message = "This is a default message";
export default message;

在上述代码中，我们定义了一个常量 message，然后使用 export default 将其作为默认导出。

当其他模块导入这个模块时，可以使用如下方式：

// main.ts
import msg from './message';
console.log(msg);

这里，我们使用 import... from 语法，直接将默认导出的内容导入为 msg，无需指定具体的导出名称，使得导入代码更加简洁。

3.3 导出函数作为默认导出

函数也可以作为默认导出。例如，我们创建一个 greet.ts 文件：

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

然后在另一个模块中导入并使用：

// main.ts
import greet from './greet';
console.log(greet('John'));

这样，我们就可以很方便地使用默认导出的 greet 函数。

3.4 导出类作为默认导出

同样，类也可以作为默认导出。假设我们有一个 Animal.ts 文件：

// Animal.ts
export default class Animal {
    constructor(public name: string) {}

    speak() {
        return `${this.name} makes a sound.`;
    }
}

在其他模块中导入并使用：

// main.ts
import Animal from './Animal';
const dog = new Animal('Dog');
console.log(dog.speak());

通过默认导出类，我们可以方便地在其他模块中创建该类的实例。

四、命名导出

4.1 什么是命名导出

与默认导出不同，命名导出允许我们在一个模块中导出多个不同的名称。在前面的 mathUtils.ts 示例中，我们已经使用了命名导出的方式导出了 PI、add 和 subtract。命名导出在一个模块需要提供多个相关功能时非常有用。

4.2 导入命名导出的内容

当我们需要导入命名导出的内容时，可以使用以下语法：

// main.ts
import { PI, add, subtract } from './mathUtils';
console.log(PI);
console.log(add(2, 3));
console.log(subtract(5, 2));

在上述代码中，我们使用 import {... } from 语法，将 mathUtils 模块中命名导出的 PI、add 和 subtract 导入到当前模块中，并可以直接使用它们。

4.3 别名导入

有时候，导入的名称可能与当前模块中的已有名称冲突，或者我们想给导入的内容取一个更简洁易记的别名。这时可以使用别名导入。例如：

// main.ts
import { add as sum, subtract as diff } from './mathUtils';
console.log(sum(2, 3));
console.log(diff(5, 2));

这里我们将 add 函数导入并命名为 sum，将 subtract 函数导入并命名为 diff，这样在使用时更加清晰明了，同时避免了命名冲突。

4.4 导入所有命名导出内容

如果我们想一次性导入模块中所有命名导出的内容，可以使用 * as 语法。例如：

// main.ts
import * as math from './mathUtils';
console.log(math.PI);
console.log(math.add(2, 3));
console.log(math.subtract(5, 2));

通过 import * as math from './mathUtils'，我们将 mathUtils 模块中所有命名导出的内容都导入到 math 对象中，然后可以通过 math 对象来访问这些内容。

五、重新导出

5.1 什么是重新导出

重新导出允许我们在一个模块中导出另一个模块的内容，就好像这些内容是在当前模块中直接导出的一样。这在组织代码结构和复用模块时非常有用。例如，我们有多个工具模块，我们可以创建一个统一的工具模块，将其他工具模块的内容重新导出，方便其他模块导入使用。

5.2 重新导出命名导出

假设我们有两个模块 utils1.ts 和 utils2.ts：

// utils1.ts
export function func1() {
    return "This is func1";
}

// utils2.ts
export function func2() {
    return "This is func2";
}

然后我们创建一个 allUtils.ts 模块来重新导出 utils1.ts 和 utils2.ts 的内容：

// allUtils.ts
export { func1 } from './utils1';
export { func2 } from './utils2';

在其他模块中，我们可以直接从 allUtils.ts 导入 func1 和 func2：

// main.ts
import { func1, func2 } from './allUtils';
console.log(func1());
console.log(func2());

这样，我们通过 allUtils.ts 模块将 utils1.ts 和 utils2.ts 的功能进行了整合，方便其他模块使用。

5.3 重新导出默认导出

对于默认导出，我们也可以进行重新导出。假设我们有一个 message1.ts 模块，它有一个默认导出：

// message1.ts
const msg1 = "This is message1";
export default msg1;

然后在另一个模块 messageUtils.ts 中重新导出：

// messageUtils.ts
export { default as msgFromMessage1 } from './message1';

在其他模块中导入使用：

// main.ts
import { msgFromMessage1 } from './messageUtils';
console.log(msgFromMessage1);

这里我们将 message1.ts 的默认导出重新导出并命名为 msgFromMessage1，方便在其他模块中使用。

六、模块导入路径

6.1 相对路径导入

相对路径导入是指相对于当前模块的文件路径进行导入。在前面的示例中，我们经常使用相对路径，例如 import { add } from './mathUtils';。这里的 ./ 表示当前目录，../ 表示上级目录。

例如，如果我们有如下目录结构：

src/
├── main.ts
└── utils/
    └── mathUtils.ts

在 main.ts 中导入 mathUtils.ts 中的内容，就可以使用相对路径：

// main.ts
import { add } from './utils/mathUtils';
console.log(add(2, 3));

相对路径导入在同一项目内不同模块之间的导入非常常用，它清晰地表明了模块之间的相对位置关系。

6.2 非相对路径导入

非相对路径导入通常用于导入项目外部的模块，比如通过 npm 安装的模块。例如，我们安装了 lodash 库，这是一个非常流行的 JavaScript 工具库，在 TypeScript 项目中也可以使用。假设我们的项目结构如下：

project/
├── node_modules/
│   └── lodash/
└── src/
    └── main.ts

在 main.ts 中导入 lodash 的 debounce 函数：

// main.ts
import { debounce } from 'lodash';

function expensiveOperation() {
    console.log('Performing expensive operation...');
}

const debouncedOperation = debounce(expensiveOperation, 300);

document.addEventListener('scroll', debouncedOperation);

这里我们直接使用 import { debounce } from 'lodash' 导入 lodash 模块中的 debounce 函数，不需要使用相对路径，因为 lodash 是安装在 node_modules 目录下的外部模块。

七、模块加载顺序

7.1 模块加载的基本原理

在 TypeScript 项目中，模块的加载顺序是有一定规则的。当一个模块被导入时，TypeScript 编译器会首先查找该模块的定义。如果模块依赖于其他模块，这些依赖模块会先被加载和解析。

例如，假设我们有模块 A 导入了模块 B，模块 B 又导入了模块 C。那么加载顺序是先加载 C，然后加载 B，最后加载 A。这种加载顺序确保了模块在使用之前，其所有依赖都已经被正确加载和初始化。

7.2 避免循环依赖

循环依赖是指模块之间相互依赖形成一个闭环。例如，模块 A 导入模块 B，而模块 B 又导入模块 A。这种情况会导致模块加载出现问题，因为在加载过程中，无法确定哪个模块应该先被完全初始化。

例如，我们有如下两个模块：

// moduleA.ts
import { bFunction } from './moduleB';

export function aFunction() {
    console.log('aFunction');
    bFunction();
}

// moduleB.ts
import { aFunction } from './moduleA';

export function bFunction() {
    console.log('bFunction');
    aFunction();
}

在上述代码中，moduleA.ts 和 moduleB.ts 形成了循环依赖。当尝试运行相关代码时，可能会出现错误，因为在加载 moduleA 时需要加载 moduleB，而加载 moduleB 时又需要加载 moduleA，导致加载过程陷入死循环。

为了避免循环依赖，我们需要合理设计模块结构，确保模块之间的依赖关系是单向的或者至少不会形成闭环。例如，可以将 moduleA 和 moduleB 中相互依赖的部分提取到一个独立的模块 common.ts 中，然后 moduleA 和 moduleB 都从 common.ts 中导入所需内容，从而打破循环依赖。

八、使用 ES6 模块语法与 TypeScript 模块的关系

TypeScript 完全支持 ES6 模块语法，并且在模块系统上与 ES6 模块紧密结合。实际上，TypeScript 的模块系统很大程度上是基于 ES6 模块规范进行扩展的。

在 TypeScript 中，我们使用的 export、import 等关键字与 ES6 模块中的用法基本一致。例如，ES6 模块中的导出：

// ES6 module example.js
const PI = 3.14159;
export { PI };

在 TypeScript 中可以类似地编写：

// TypeScript module example.ts
export const PI = 3.14159;

导入也是类似的，ES6 模块导入：

// main.js
import { PI } from './example.js';
console.log(PI);

TypeScript 导入：

// main.ts
import { PI } from './example.ts';
console.log(PI);

这种一致性使得我们在使用 TypeScript 进行前端开发时，可以很方便地与基于 ES6 模块的 JavaScript 代码进行交互和整合。同时，TypeScript 还通过类型检查等特性，为模块系统提供了更强大的功能，例如在导入和导出时可以明确类型，让代码更加健壮和可维护。

九、在不同构建工具中使用 TypeScript 模块

9.1 Webpack 中使用 TypeScript 模块

Webpack 是前端开发中非常流行的构建工具。在 Webpack 项目中使用 TypeScript 模块，我们首先需要安装 typescript 和 ts-loader。ts-loader 用于将 TypeScript 代码转换为 JavaScript 代码，以便 Webpack 能够处理。

假设我们有一个简单的 Webpack 项目结构：

project/
├── src/
│   ├── main.ts
│   └── utils/
│       └── mathUtils.ts
├── webpack.config.js
└── package.json

在 package.json 中安装依赖：

{
    "devDependencies": {
        "typescript": "^4.0.0",
        "ts-loader": "^8.0.0",
        "webpack": "^5.0.0",
        "webpack-cli": "^4.0.0"
    }
}

然后配置 webpack.config.js：

const path = require('path');

module.exports = {
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    }
};

在 main.ts 中导入 mathUtils.ts 的内容：

// main.ts
import { add } from './utils/mathUtils';
console.log(add(2, 3));

这样，Webpack 就可以处理 TypeScript 模块，并将其打包成可在浏览器中运行的 JavaScript 代码。

9.2 Rollup 中使用 TypeScript 模块

Rollup 也是一款优秀的 JavaScript 打包工具，同样可以很好地支持 TypeScript 模块。首先安装 typescript 和 @rollup/plugin-typescript。

假设项目结构如下：

project/
├── src/
│   ├── main.ts
│   └── utils/
│       └── mathUtils.ts
├── rollup.config.js
└── package.json

在 package.json 中安装依赖：

{
    "devDependencies": {
        "typescript": "^4.0.0",
        "@rollup/plugin-typescript": "^8.0.0",
        "rollup": "^2.0.0"
    }
}

配置 rollup.config.js：

import typescript from '@rollup/plugin-typescript';

export default {
    input:'src/main.ts',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    },
    plugins: [typescript()]
};

在 main.ts 中同样可以导入 mathUtils.ts 的内容：

// main.ts
import { add } from './utils/mathUtils';
console.log(add(2, 3));

Rollup 会通过 @rollup/plugin-typescript 将 TypeScript 代码转换并打包，生成最终的 JavaScript 文件。

9.3 Vite 中使用 TypeScript 模块

Vite 是新一代的前端构建工具，对 TypeScript 有很好的支持。创建一个 Vite 项目时，默认就可以使用 TypeScript。

假设我们创建一个 Vite + TypeScript 项目：

npm init vite@latest my - project --template typescript
cd my - project
npm install

项目结构如下：

my - project/
├── src/
│   ├── main.ts
│   └── utils/
│       └── mathUtils.ts
├── index.html
├── vite.config.ts
└── package.json

在 main.ts 中导入 mathUtils.ts 的内容：

// main.ts
import { add } from './utils/mathUtils';
console.log(add(2, 3));

Vite 会自动处理 TypeScript 模块的导入和编译，无需额外复杂的配置，即可快速开发基于 TypeScript 模块的前端应用。

通过了解在不同构建工具中使用 TypeScript 模块，我们可以根据项目的需求和特点，选择最合适的构建工具来高效开发前端应用。

十、TypeScript 模块与浏览器兼容性

虽然现代浏览器大多已经支持 ES6 模块语法，但在一些旧版本浏览器中可能不支持。由于 TypeScript 模块基于 ES6 模块，因此在处理浏览器兼容性时，我们需要采取一些措施。

一种常见的方法是使用 Babel。Babel 是一个 JavaScript 编译器，可以将 ES6+ 代码转换为旧版本浏览器支持的 JavaScript 代码。在 TypeScript 项目中，我们可以结合 Babel 和 @babel/preset - typescript 来实现这一目的。

首先安装相关依赖：

npm install --save - dev @babel/core @babel/cli @babel/preset - typescript @babel/preset - env

然后创建 .babelrc 文件并进行配置：

{
    "presets": [
        "@babel/preset - typescript",
        [
            "@babel/preset - env",
            {
                "targets": {
                    "browsers": ["ie >= 11"]
                }
            }
        ]
    ]
}

这样，Babel 会将 TypeScript 代码先转换为 ES6 代码，再根据 @babel/preset - env 的配置，将 ES6 代码转换为兼容指定浏览器（如 Internet Explorer 11）的代码。

另一种方法是使用构建工具如 Webpack 或 Rollup 的相关插件，它们可以在打包过程中进行代码转换，以确保生成的代码在目标浏览器中能够正常运行。例如，Webpack 可以通过 babel - loader 结合 Babel 配置来实现代码转换，Rollup 可以通过相关插件来达到类似的效果。通过这些方法，我们可以在使用 TypeScript 模块系统的同时，保证前端应用在不同浏览器中的兼容性。

十一、常见问题及解决方法

11.1 找不到模块错误

在导入模块时，有时会遇到 “找不到模块” 的错误。这可能是由于以下原因：

  1. 路径错误：检查导入路径是否正确，特别是相对路径。确保文件的实际位置与导入路径匹配。例如，如果在 src/utils 目录下有一个 mathUtils.ts 文件，从 src/main.ts 导入时，路径应该是 import { add } from './utils/mathUtils';。如果写成了 import { add } from 'utils/mathUtils';，就会导致找不到模块错误，因为缺少了相对路径的前缀 ./。
  2. 模块未安装或未正确导出：如果导入的是外部模块，确保该模块已经通过 npm 或其他方式正确安装。对于自己编写的模块，检查是否正确使用了 export 关键字导出了需要的内容。例如，在 mathUtils.ts 中，如果没有对 add 函数使用 export 关键字，其他模块就无法导入它。

11.2 命名冲突问题

当不同模块中导出的名称相同时，可能会出现命名冲突。解决方法如下：

  1. 使用别名导入：如前文所述，通过别名导入可以避免命名冲突。例如，如果模块 A 和模块 B 都导出了名为 func 的函数，我们可以在导入时使用别名：import { func as funcFromA } from './moduleA'; 和 import { func as funcFromB } from './moduleB';。
  2. 重新组织模块结构：将重复的功能合并到一个模块中，或者调整模块的导出内容，确保不同模块的导出名称具有唯一性。

11.3 循环依赖导致的问题

循环依赖会导致模块加载异常。解决循环依赖可以采取以下措施：

  1. 提取公共部分：将相互依赖的部分提取到一个独立的模块中，使得原来相互依赖的模块都从这个公共模块中导入所需内容，从而打破循环。例如，模块 A 和模块 B 相互依赖，我们可以将它们共同依赖的代码提取到 common.ts 模块中，然后 A 和 B 分别从 common.ts 导入。
  2. 调整依赖关系：分析模块之间的依赖逻辑，尝试调整依赖方向，避免形成闭环。例如，可以将某个模块的部分功能拆分，使得依赖关系更加合理，不再出现循环。

通过解决这些常见问题，我们可以更加顺畅地使用 TypeScript 模块系统进行前端开发，确保项目的稳定性和可维护性。