在TypeScript中导入TypeScript？

Question

我正试图在一个victor.js项目(3.0.1)中使用TypeScript库，而且我很想导入和使用它。我从npm安装了它以及它的类型(victor @type/victor)。我尝试过多种方法导入它，但似乎无法让它与IDE中的类型解析一起导入。

我试过这些：

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

(该模块只能通过打开“ECMAScript”标志并引用其默认导出来引用allowSyntheticDefaultImports导入/导出)

import Victor = require('victor');  

(针对ecmascript模块时可以工作，但不兼容)

const Victor = require("victor");  

(有效地导入，我可以构造对象，但没有任何类型)

我肯定有人遇到过类似的情况。如果它帮助胜利者的index.js顶部有一行：

exports = module.exports = Victor;

Answer 1

简而言之

您试图使用victor，就像它是一个es6模块，但它不是。我认为有两种选择：

1. 让tsc将模块转换成像commonjs这样的格式，在这种情况下，tsc将在victor和代码之间提供必要的粘合逻辑。
2. 或者，您需要通过提供胶水的模块加载器加载应用程序。

详细解释

当我使用您显示的导入运行最新的tsc时，我得到的错误是：

只有打开“ECMAScript”标志并引用其默认导出，才能在esModuleInterop导入/导出中引用此模块。

当我打开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相同的工作的模块加载程序。

Answer 2

我知道已经有了很好的答案，但我想补充一下这个简短的答案。

错误消息：This module can only be referenced with ECMAScript imports/exports by turning on the 'esModuleInterop' flag and referencing its default export.ts(2497)

当我将自己的javascript文件转换为类型记录时，当从es5迁移到es6 (以及javascript到类型记录)时，我在导入时遇到了这个问题。

导入类似于import * as File from "./MyFile"的OtherFile.ts。

在MyFile.ts文件中，我最后使用了export = {funcName}。

解决方案是从=文件中删除像这样的export {funcName}。

(希望这对某人有帮助，第一次试着回答一个错误/问题)