TypeScript 中的 import 与 require 方法的使用比较

在前端开发中，我们经常需要引入外部的 JavaScript 模块。在 JavaScript 中，我们使用 require 方法来引入模块。而在 TypeScript 中，我们可以使用 import 语句来引入模块。本文将会比较这两种方法的使用，以及它们的优缺点。

require 方法

在 JavaScript 中，我们使用 require 方法来引入模块。例如，我们可以通过以下方式引入 lodash 模块：

const _ = require('lodash');

require 方法是同步的，它会在引入模块时阻塞代码的执行。这意味着，如果我们在代码中多次使用 require 引入同一个模块，每次引入都会重新执行一遍模块代码。这可能会导致性能问题。

import 语句

在 TypeScript 中，我们可以使用 import 语句来引入模块。例如，我们可以通过以下方式引入 lodash 模块：

import * as _ from 'lodash';

import 语句是异步的，它不会阻塞代码的执行。这意味着，如果我们在代码中多次使用 import 引入同一个模块，模块代码只会被执行一次。这可以提高性能。

此外，import 语句还支持按需引入模块中的部分内容。例如，我们可以只引入 lodash 模块中的 map 函数：

import { map } from 'lodash';

这样可以减少代码的大小，提高加载速度。

比较

import 语句相对于 require 方法有以下优点：

1. import 语句是异步的，不会阻塞代码的执行，可以提高性能。
2. import 语句支持按需引入模块中的部分内容，可以减少代码的大小，提高加载速度。

import 语句相对于 require 方法有以下缺点：

1. import 语句需要使用 TypeScript 或者 Babel 等工具进行转译，不能直接在浏览器中运行。
2. import 语句的语法相对于 require 方法更加复杂，需要学习一定的语法规则。

示例代码

以下是一个使用 import 语句引入 lodash 模块的示例代码：

import * as _ from 'lodash';

const array = [1, 2, 3];
const result = _.map(array, n => n * 2);

console.log(result); // [2, 4, 6]

以下是一个使用 require 方法引入 lodash 模块的示例代码：

const _ = require('lodash');

const array = [1, 2, 3];
const result = _.map(array, n => n * 2);

console.log(result); // [2, 4, 6]

结论

在 TypeScript 中，我们推荐使用 import 语句来引入模块。它可以提高性能，减少代码的大小。如果你需要在浏览器中运行代码，可以考虑使用打包工具将 import 语句转译成 require 方法，或者直接使用 require 方法。

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