TypeScript在带有Bluebird的ES5中使用动态导入 [英] TypeScript use dynamic import in ES5 with Bluebird

问题描述

我试图在TypeScript中使用新的动态 import（）函数，但是我收到以下错误：

I'm trying to use the new dynamic import() function in TypeScript, but I get the following error:

TS2712： ES5 / ES3中的动态导入呼叫需要Promise
构造函数。确保你有一个声明为'promise'
构造函数或包含'ES2015'在您的 - lib 选项。

TS2712: A dynamic import call in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your --lib option.

我可以在我的tsconfig中包含消息建议的 ES2015.promise lib，但这会让我失去类型安全，因为我正在使用蓝鸟的承诺。

I could include the ES2015.promise lib in my tsconfig like the message suggests, but that would make me lose type safety as I'm using Bluebird promises.

我知道可以使用Bluebird for async / await TypeScript，所以我想这也应该是一样的。

I know it is possible to use Bluebird for async/await in TypeScript, so I suppose this should also work the same way.

该消息还提到： strong>

The message also mentions this:

确保您有Promise构造函数或[...]

Make sure you have a declaration for the 'Promise' constructor or [...]

是否可以声明Bluebird构造函数作为TS中的Promise构造函数？

Is it possible to declare the Bluebird constructor to be used as the Promise constructor in TS?

示例代码：

import * as Bluebird from 'bluebird';

// This works
async function exampleAsync(): Bluebird<number> {
    const result = await Bluebird.resolve(5);
    return result;
}

// This does not
import('jquery').then($ => {
    console.log($.fn.jquery);
});

TSConfig：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "removeComments": true,
    "sourceMap": true,
    "alwaysStrict": true,
    "forceConsistentCasingInFileNames": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "allowJs": true,
    "typeRoots": ["node_modules/@types"],
    "lib": ["es5", "dom", "es2015.collection"]
  },
  "exclude": ["node_modules"]
}

推荐答案

TypeScript正在寻找一个全局 Promise 。你的代码中有一个 Promise 在一个模块中声明（bluebird），并在另一个模块中本地使用。

TypeScript is looking for a global Promise. What you have in your code is a Promise declared in a module ("bluebird") and used locally in another module.

这是一个最小的方式来解决编译错误，并具有可运行的代码：

Here's a minimal way to get the compilation errors to be resolve and to have runnable code:

test.ts ：

import * as Bluebird from 'bluebird';

declare global {
    const Promise: {
        new <R>(callback: (
            resolve: (thenableOrResult?: R | PromiseLike<R>) => void,
            reject: (error?: any) => void,
            onCancel?: (callback: () => void) => void
        ) => void): Bluebird<R>;
    };
}

import('jquery').then($ => {
    console.log($);
});

我修改了 console.log 语句刚刚输出 $ ，以便上面的代码可以轻松地在Node中运行，而不需要浏览器。 （当您在Node中加载 jquery 时，您将获得一个需要一个 Window 实例的构造函数，然后从中构建相同的当您在窗口中加载 jquery 时，您将立即获得一种 jQuery 对象，所以 $。 fn.jquery 不可访问。）

I've modified the console.log statement to just output $ so that the code above can be readily run in Node rather than require a browser. (When you load jquery in Node, you get a constructor that needs a Window instance from which you then build the same kind of jQuery object you immediately get when you load jquery in a window. So $.fn.jquery is not accessible.)

我使用以下 tsconfig.json 我从你的来源：

I'm using the following tsconfig.json which I derived from yours:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "removeComments": true,
    "sourceMap": true,
    "alwaysStrict": true,
    "forceConsistentCasingInFileNames": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "allowJs": true,
    "skipLibCheck": true,
    "lib": ["es5", "dom", "es2015.collection"]
  }
}

您有一些不必要的选项，而 skipLibCheck 是必需的ry来处理问题 @ types / jquery 。

You had a couple unnecessary options in there, and skipLibCheck is necessary to handle issues @types/jquery.

这篇关于TypeScript在带有Bluebird的ES5中使用动态导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！