在 ES6 模块中使用打字稿支持扩展全局对象，如“Autodesk.Viewing.Extension”

Question

我开发了一个 forge 扩展，现在我想在 this blog post 之后添加打字稿支持。但是，我无法从全局 Autodesk 命名空间扩展原型，例如 Autodesk.Viewing.Extension、Autodesk.Viewing.ToolInterface，因为打字稿找不到对象 Cannot find name 'Autodesk'（在编译时不存在）。目前我的解决方法是通过调用一个创建扩展 class 的工厂函数来注入参数 Autodesk （参见代码示例），因为我无法从 ES6 模块内部访问全局 Autodesk 变量。此解决方法会自然地删除所有类型。

如何在自定义扩展中完全支持 typescript？

我的解决方法

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

我想要实现的目标（支持打字稿）：

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. */
  }
}

在 ES6 模块中使用打字稿支持扩展全局对象，如“Autodesk.Viewing.Extension”

Extending global object like `Autodesk.Viewing.Extension` with typescript support inside an ES6 module

typescript

autodesk-forge

autodesk-viewer

我的解决方法

我想要实现的目标（支持打字稿）：