如何將ES6 require（）語句移植到打字稿

Question

我們已經能夠將JS / ES6項目中的所有代碼移植到Typescript 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'); import LOG from './src/Log' 聲明。 如果我們更改源文件以使用export LOG from './src/Log'; 則在調用腳本文件中未定義Log ，就像我們在移植版本中看到的問題一樣。

對於源文件， OidcClient聲明導出的OidcClient語句定義為(property) OidcClient: typeof import("c:/.../src/OidcClient").

而OidcClient語句的移植版本定義為(property) OidcClient: typeof OidcClient 。

我們如何從TypeScript文件進行這項工作？

Answer 1

為了完整性

我們正在使用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模塊中運行！