在TypeScript中导入Victor.js吗? [英] Importing Victor.js in TypeScript?

问题描述

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

I'm trying to use the victor.js library in a TypeScript project (3.0.1) and I'm having real heartache trying to import and use it. I've installed it from npm along with it's typings (victor @types/victor). I've tried to import it a myriad of ways but can't seem to get it to import along with type resolution in my IDE.

我已经尝试过这些:

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

(此模块只能通过打开"allowSyntheticDefaultImports"标志并引用其默认导出来与ECMAScript导入/导出一起引用)

import Victor = require('victor');  

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

const Victor = require("victor");  

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

我确定外面有人遇到过类似的情况.如果有帮助，victor的index.js顶部会显示以下行:

I'm sure someone out there has run into a similar situation to this before. If it helps the top of the index.js of victor has the line:

exports = module.exports = Victor;

推荐答案

简介

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

In Brief

You're trying to use victor as if it were an es6 module, but it is not. I see two options:

1. 让tsc将您的模块转换为类似commonjs的格式，在这种情况下，tsc将在victor和您的代码之间提供必要的粘合逻辑

1. Let tsc convert your modules to a format like commonjs, in which case tsc will provide necessary glue logic between victor and your code

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

Or you need to load your application through a module loader that provides the glue.

详细说明

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

Detailed Explanation

When I run the latest tsc with the import that you show, the error I get is:

只有通过打开'esModuleInterop'标志并引用其默认导出，才能使用ECMAScript导入/导出引用此模块.

This module can only be referenced with ECMAScript imports/exports by turning on the 'esModuleInterop' flag and referencing its default export.

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

When I turn on esModuleInterop, then it works just fine. Here is the test code I've used:

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会发出以下信息:

The issue originates due to the fact that when you do import Victor from "victor" you are asking for the value that would be exported through an export default... statement, which is a syntax provided by es6 modules. However, victor does export anything that corresponds to export default.... So something has to bridge the gap. With what I've shown above, when you compile, tsc emits this:

"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模块，则帮助程序将创建一种假模块，其默认导出值是原始模块的值.

Note the __importDefault helper function. It is used whenever the TS code wants to access what a module exports as export default... What it does is check whether the module claims to be an es6 module. An es6 module that wants to export a default value is already correctly structured so there's nothing to do if the module is an es6 module. If the module is not an es6 module, then the helper creates a kind of fake module whose default exported value is the value of the original module.

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

There's an important caveat since you mention "targeting ecmascript modules". If you use, this tsconfig.json:

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

然后发出的代码是:

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

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

Note that there is no longer any helper function. It is up to the module loader which will load the modules for your application to provide the same logic as provided by __importDefault. If I rename the file to have the mjs extension and run:

$ node --experimental-modules test.mjs

我得到以下输出:

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

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

When using Node with the experimental module support, it provides the same functionality as __importDefault.

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

When you just use allowSyntheticDefaultImports without using esModuleInterop you are telling the compiler to assume that there will be something in your toolchain that will do the work of __importDefault. So the compiler does not provide a helper. It allows the compilation to proceed, but you are responsible later to use a module loader that will perform the same work as __importDefault.

这篇关于在TypeScript中导入Victor.js吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！