javascript - 在TypeScript中导入Victor.js吗？

我正在尝试在TypeScript项目(3.0.1)中使用victor.js库，并且在尝试导入和使用它时确实心痛。我已经从npm安装了它以及它的类型(victor @ types/victor)。我尝试了多种导入方式，但似乎无法使其与IDE中的类型解析一起导入。

我已经尝试过这些:

import { Victor} from 'victor';
import * as v from 'victor';

(只有通过打开“allowSyntheticDefaultImports”标志并引用其默认导出，才能使用ECMAScript导入/导出引用此模块)

import Victor = require('victor');

(在定位ecmascript模块时有效，但不兼容)

const Victor = require("victor");

(有效导入，我可以构造对象，但不存在任何类型)

我敢肯定外面有人遇到过类似的情况。如果有帮助，则victor的index.js顶部具有以下行:

exports = module.exports = Victor;

最佳答案

简单来说

您正在尝试使用victor，就好像它是es6模块一样，但事实并非如此。我看到两个选择:

让tsc将您的模块转换为commonjs之类的格式，在这种情况下tsc将在victor和您的代码

之间提供必要的粘合逻辑

或者您需要通过提供胶水的模块加载器加载应用程序。

详细说明

当我使用显示的导入运行最新的tsc时，出现的错误是:

当我打开esModuleInterop时，它就可以正常工作。这是我使用的测试代码:

import Victor from "victor";

const foo = new Victor(1, 2);
console.log(foo.y);

和tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

产生此问题的原因是，当您执行import Victor from "victor"时，您要求的是将通过export default...语句(这是es6模块提供的语法)导出的值。但是，victor会导出与export default...对应的任何内容。因此，必须采取一些措施弥合差距。使用上面显示的内容，在编译时，tsc会发出以下内容:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
exports.__esModule = true;
var victor_1 = __importDefault(require("victor"));
var foo = new victor_1["default"](1, 2);
console.log(foo.y);

注意__importDefault辅助函数。只要TS代码想要访问模块作为export default...导出的内容，就使用它，它的作用是检查该模块是否声称是es6模块。想要导出默认值的es6模块已经正确构建，因此如果该模块是es6模块，则无需执行任何操作。如果该模块不是es6模块，则帮助程序将创建一种假模块，其默认导出值是原始模块的值。

有一个重要的警告，因为您提到了“目标ecmascript模块”。如果使用，此tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "module": "es6"
  }
}

然后发出的代码是:

import Victor from "victor";
var foo = new Victor(1, 2);
console.log(foo.y);

请注意，不再有任何辅助功能。由模块加载器决定，模块加载器将为您的应用程序加载模块，以提供与__importDefault提供的逻辑相同的逻辑。如果我将文件重命名为具有mjs扩展名并运行:

$ node --experimental-modules test.mjs

我得到以下输出:

(node:18394) ExperimentalWarning: The ESM module loader is experimental.
2

当使用带有实验模块支持的Node时，它提供与__importDefault相同的功能。

当您只使用allowSyntheticDefaultImports而没有使用esModuleInterop时，您是在告诉编译器假定您的工具链中将有一些可以完成__importDefault的工作。因此，编译器不提供帮助器。它允许编译继续进行，但是您稍后要负责使用将执行与__importDefault相同的工作的模块加载器。

关于javascript - 在TypeScript中导入Victor.js吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54701255/