在 ES6 模塊內使用 typescript 支持擴展全局 object，例如 `Autodesk.Viewing.Extension`

Question

我已經開發了一個 forge 擴展，現在我想在這篇博文之后添加 typescript 支持。 但是，我無法從Autodesk.Viewing.Extension 、 Autodesk.Viewing.ToolInterface等全局 Autodesk 命名空間擴展原型，因為 typescript 找不到對象Cannot find name 'Autodesk' （在編譯時不存在）。 目前我的解決方法是通過調用工廠 function 來注入參數Autodesk ，該工廠創建擴展 class（參見代碼示例），因為我無法從 ES6 模塊內部訪問全局 Autodesk 變量。 此解決方法會自然刪除所有類型。

如何在自定義擴展中完全支持 typescript？

我的解決方法

function(Autodesk: any) { // injects Autodesk by passing the global accessible Autodesk object...
  return class MyExtension extends Autodesk.Viewing.Extension {
     ...
  };
}

我想要實現的目標（支持 typescript）：

class MyAwesomeExtension extends Autodesk.Viewing.Extension {
    constructor(viewer, options) {
        super(viewer, options);
    }

    load() {
        console.log('MyAwesomeExtensions has been loaded');
        viewer.setEnvMapBackground(null); // Hide background environment if there is one
        viewer.setBackgroundColor(0, 64, 128); // Set background color
        return true;
    }

    unload() {
        console.log('MyAwesomeExtensions has been unloaded');
        return true;
    }
}

Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);

Answer 1

所以我的問題是我不知道如何從 ES6 模塊訪問全局庫。 但是，您可以使用globalThis從 ES6 模塊內部訪問全局變量。 這使您可以像往常一樣使用打字。

MyExtension.ts

const Autodesk = globalThis.Autodesk;
const THREE = globalThis.THREE;

export class MyExtension extends Autodesk.Viewing.Extension {
   //...
}

如果您將 typescript 配置為允許 umd 訪問，則不需要前兩行（例如const THREE = globalThis.THREE ）：

{ 
  "compilerOptions": {
      "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
  }
}