简体   繁体   English

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

[英]How to port an ES6 require() statement to typescript

We have been able to ported all the code for from JS/ES6 project to typescript 3.x but we can't seem to get the following file ported correctly. 我们已经能够将JS / ES6项目中的所有代码移植到Typescript 3.x,但是似乎无法正确移植以下文件。

The short version of file looks like this: 文件的简短版本如下所示:

index.js (original): index.js(原始):

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

export default {
    Log,
    OidcClient
};

index.ts (ported): index.ts(已移植):

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

export default {
    Log,
    OidcClient
};

The problem appears to be with the import LOG from './src/Log' vs. the export const Log = require('./src/Log'); 问题似乎出在import LOG from './src/Log'export const Log = require('./src/Log'); import LOG from './src/Log' statement. 声明。 If we change the source file to use export LOG from './src/Log'; 如果我们更改源文件以使用export LOG from './src/Log'; then the Log is undefined in the calling script file, just like the problem we are seeing in the ported version. 则在调用脚本文件中未定义Log ,就像我们在移植版本中看到的问题一样。

Intellisense, for the source file, states that the exported OidcClient statement is defined as (property) OidcClient: typeof import("c:/.../src/OidcClient"). 对于源文件, OidcClient声明导出的OidcClient语句定义为(property) OidcClient: typeof import("c:/.../src/OidcClient").

Whereas the ported version of the OidcClient statement is defined as (property) OidcClient: typeof OidcClient . OidcClient语句的移植版本定义为(property) OidcClient: typeof OidcClient

How do we make this work from a TypeScript file? 我们如何从TypeScript文件进行这项工作?

For completeness 为了完整性

We are using webpack and built the output as a library, with these output settings: 我们正在使用webpack,并使用以下输出设置将输出构建为库:

libraryTarget: 'var', library:'Oidc'

Thus the JS client should use the module like: Oidc.Log.Error(message) . 因此,JS客户端应使用类似以下模块: Oidc.Log.Error(message) But the problem was Oidc.Log is undefine. 但是问题出在Oidc.Log是未定义的。

The clue 线索

In the browser's debugger we noticed that Oidc is defined as a Module , which is what we expected, but it had a mysterious property called default which had everything we wanted within it. 在浏览器的调试器中,我们注意到Oidc被定义为Module ,这是我们所期望的,但是它具有一个名为default的神秘属性,该属性具有我们想要的所有内容。 Okay, how to remove the default property and apply everything in it's part object, the Oidc module? 好的,如何删除default属性并应用其部分对象Oidc模块中的所有内容?

After 4 days of trial and error, we found the solution. 经过4天的反复试验,我们找到了解决方案。

Solution

The documentation, and everything we could find, stated we should use: 该文档以及我们可以找到的所有内容都表明我们应该使用:

export default { Log, OidcClient }

Out of desperation we finally tried removing the default keyword, as in: 出于绝望,我们终于尝试删除default关键字,如下所示:

export { Log, OidcClient }

and guess what? 你猜怎么着? It worked!! 有效!!

No more mysterious default property and all the types live off of the Oidc module as expected! 不再有神秘的default属性,所有类型都可以按预期在Oidc模块中运行!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM