在 ES6 中使用 ESModuleInterop 实现 TypeScript 与 JavaScript 互操作

在 ES6 中使用 ESModuleInterop 实现 TypeScript 与 JavaScript 互操作

随着 TypeScript 在前端开发中的普及，越来越多的项目开始采用 TypeScript 进行开发。但是，在实际开发中，往往会遇到需要与 JavaScript 代码进行互操作的情况。在这种情况下，我们可以使用 ESModuleInterop 实现 TypeScript 与 JavaScript 的无缝互操作。

ESModuleInterop 是 ES6 中的一个特性，它允许我们在 TypeScript 中使用 CommonJS 模块导入语法来导入 JavaScript 模块。这样，我们就可以在 TypeScript 代码中直接使用 JavaScript 模块中的变量、函数等。

下面，让我们来看一个示例代码，以更好地理解 ESModuleInterop 的使用方法：

// JavaScript 模块
export const foo = 'foo';
export function bar() {
  console.log('bar');
}

// TypeScript 模块
import { foo, bar } from './module.js';
console.log(foo); // 输出 'foo'
bar(); // 输出 'bar'

在上面的代码中，我们使用了 ESModuleInterop 来导入 JavaScript 模块。在导入时，我们使用了 CommonJS 模块导入语法，这样就可以在 TypeScript 中直接使用 JavaScript 模块中的变量、函数等。

需要注意的是，当我们使用 ESModuleInterop 进行模块导入时，需要在 tsconfig.json 中开启 allowSyntheticDefaultImports 和 esModuleInterop 选项，如下所示：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

另外，如果我们想要使用 JavaScript 模块中的默认导出，可以使用以下代码：

// JavaScript 模块
export default {
  name: 'Alice',
  age: 18
}

// TypeScript 模块
import person from './module.js';
console.log(person.name); // 输出 'Alice'
console.log(person.age); // 输出 18

在上面的代码中，我们使用了默认导出来导出了一个对象，并在 TypeScript 中使用了该对象。

总结：

ESModuleInterop 是 ES6 中的一个特性，它允许我们在 TypeScript 中使用 CommonJS 模块导入语法来导入 JavaScript 模块，从而实现 TypeScript 与 JavaScript 的无缝互操作。在使用时，需要开启 allowSyntheticDefaultImports 和 esModuleInterop 选项，并在导入时使用 CommonJS 模块导入语法。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556e419d2f5e1655d1450b2