在 ES6 模块中使用 typescript 支持扩展全局对象，如 Autodesk.Viewing.Extension

Posted 2023-03-16

【中文标题】在 ES6 模块中使用 typescript 支持扩展全局对象，如 Autodesk.Viewing.Extension

【英文标题】：Extending global object like `Autodesk.Viewing.Extension` with typescript support inside an ES6 module

【发布时间】：2021-05-06 19:33:52

【问题描述】：

我已经开发了一个 forge 扩展，现在我想在 this blog post 之后添加 typescript 支持。但是，我无法从 Autodesk.Viewing.Extension、Autodesk.Viewing.ToolInterface 等全局 Autodesk 命名空间扩展原型，因为打字稿找不到对象 Cannot find name 'Autodesk'（在转换时不存在）。目前我的解决方法是通过调用创建扩展类的工厂函数来注入参数Autodesk（参见代码示例），因为我无法从 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);

【问题讨论】：

我将问题分解为仅打字稿问题here

【参考方案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. */