如何将 ES6 require() 语句移植到打字稿

How to port an ES6 require() statement to typescript

我们已经能够将 JS/ES6 项目的所有代码移植到打字稿 3.x 但我们似乎无法正确移植以下文件。

文件的简短版本如下所示:

index.js(原文):

export const Log = require('./src/Log');
export const OidcClient = require('./src/OidcClient');

export default {
    Log,
    OidcClient
};

index.ts(移植):

import Log from './src/Log';
import { OidcClient } from './src/OidcClient';

export default {
    Log,
    OidcClient
};

问题似乎出在 import LOG from './src/Log'export const Log = require('./src/Log'); 语句之间。如果我们将源文件更改为使用 export LOG from './src/Log';,那么调用脚本文件中的 Log 是未定义的,就像我们在移植版本中看到的问题一样。

Intellisense,对于源文件,指出导出的 OidcClient 语句定义为 (property) OidcClient: typeof import("c:/.../src/OidcClient").

OidcClient 语句的移植版本定义为 (property) OidcClient: typeof OidcClient.

我们如何通过 TypeScript 文件完成这项工作?

完整性

我们使用 webpack 并将输出构建为一个库,输出设置如下:

libraryTarget: 'var', library:'Oidc'

因此JS客户端应该使用像这样的模块:Oidc.Log.Error(message)。但问题是 Oidc.Log 未定义。

线索

在浏览器的调试器中,我们注意到 Oidc 被定义为一个 Module,这是我们所期望的,但它有一个神秘的 属性 称为 default里面有我们想要的一切。好的,如何删除 default 属性 并应用其部分对象中的所有内容,即 Oidc 模块?

经过 4 天的反复试验,我们找到了解决方案。

解决方案

文档以及我们能找到的所有内容都声明我们应该使用:

export default { Log, OidcClient }

无奈之下,我们最终尝试删除 default 关键字,如:

export { Log, OidcClient }

你猜怎么着?成功了!!

不再神秘 default 属性 并且所有类型都如预期的那样依赖于 Oidc 模块!