正在导入Victor。TypeScript中的js?

简言之

你正试图使用 victor 就像它是es6模块一样,但它不是。我看到两种选择:

1. 允许 tsc 将模块转换为如下格式 commonjs tsc公司 将提供必要的粘合逻辑 胜利者 还有你的代码

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

详细说明

对于您显示的导入,我得到的错误是:

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

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模块提供的语法。然而 胜利者 是否导出与 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代码想要访问模块导出的内容时,就会使用它 导出默认值。。。 它所做的是检查该模块是否声称是es6模块。要导出默认值的es6模块已正确构造,因此如果该模块是es6模块,则无需执行任何操作。如果模块不是es6模块,那么助手将创建一种伪模块,其默认导出值为原始模块的值。

自从您提到“瞄准ecmascript模块”以来,有一个重要的警告。如果你使用,这个

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

那么发出的代码是:

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

注意,不再有任何辅助函数。模块加载器将为您的应用程序加载模块,以提供与提供相同的逻辑 。如果我将文件重命名为 mjs

$ node --experimental-modules test.mjs

我得到这个输出:

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

.

allowSyntheticDefaultImports 不使用 您正在告诉编译器 你的工具链中会有一些东西可以完成 。因此编译器不提供帮助程序。它允许编译继续,但是 稍后负责使用模块加载器,该模块加载器将执行与 .

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

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

当我将自己的javascript文件转换为typescript时,从es5迁移到es6(以及javascript到typescript)时,我遇到了导入问题。

导入like import * as File from "./MyFile" 在其他文件中。ts。

在MyFile中。我的ts文件 export = {funcName}

解决方案是删除 = 这样地 export {funcName} 从MyFile。ts文件。

我感到你的心痛,因为我花了大量时间调试各种错误 最后,当我陷入同样的错误时,我想到了最后一个障碍:

此模块只能由ECMAScript导入/导出引用 打开“allowSyntheticDefaultImports”标志并引用其

有问题的javascript here :

module.exports = class AthenaExpress { ...more code.. }

tsconfig.json :

{
  "compilerOptions": {
    "outDir": "dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react"
  },
  "baseUrl": "./src",
  "include": [
    "**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

“工作版本” d.ts 存在一些导入差异的文件 :

declare module 'athena-express' {
    import * as aws from "aws-sdk";
    interface ConnectionConfigInterface {
        aws: typeof aws,
        s3: string,
        getStats: boolean
    }
    interface QueryResultsInterface {
        Items: any[],
        DataScannedInMB: number,
        QueryCostInUSD: number,
        EngineExecutionTimeInMillis: number,
        Count: number,
    }

    interface QueryInterface {
        sql: string,
        db: string,
    }

    type QueryResult = QueryResultsInterface

    interface AthenaExpressInterface {
        new: (config: ConnectionConfigInterface) => any,
        query: (query: QueryInterface) => QueryResult,
    }

    class AthenaExpress {
        new: (config: ConnectionConfigInterface) => any;
        constructor(config: ConnectionConfigInterface);
        query: (query: QueryInterface) => QueryResult;
    }
}

版本 收到相同错误的文件,即使在 esModuleInterop module 和 target :

import * as aws from "aws-sdk";
interface ConnectionConfigInterface {
    aws: typeof aws,
    s3: string,
    getStats: boolean
}
interface QueryResultsInterface {
    Items: any[],
    DataScannedInMB: number,
    QueryCostInUSD: number,
    EngineExecutionTimeInMillis: number,
    Count: number,
}

interface QueryInterface {
    sql: string,
    db: string,
}

type QueryResult = QueryResultsInterface

interface AthenaExpressInterface {
    new: (config: ConnectionConfigInterface) => any,
    query: (query: QueryInterface) => QueryResult,
}

declare class AthenaExpress {
    new: (config: ConnectionConfigInterface) => any;
    constructor(config: ConnectionConfigInterface);
    query: (query: QueryInterface) => QueryResult;
}

export = AthenaExpress

笔记:

定义文件位置和我试图使用定义的文件:

 tree src/backend/js
    src/backend/js
        ├── athena-express.d.ts
        └── helloworld.ts

1. tsc 似乎毫无怨言
2. 在helloworld.ts中 import {AthenaExpress} from "athena-express";
3. 在helloworld.ts中 import * as AthenaExpress from "./athena-express";