React+TypeScript中Autodesk Forge Viewer类扩展转函数式可行吗？

能不能改成TypeScript函数形式？ #

当然可以。Autodesk.Viewing.Extension本质是一套构造函数规范，我们完全可以用函数的方式实现符合要求的扩展，不用局限于类的写法。

这么做有实际意义吗？ #

有几个实用的场景：

• 适配React+TypeScript的函数式编程风格，和项目里的函数式组件、工具函数风格统一，代码整体更协调
• 避免类中常见的this指向问题，用闭包可以更安全地管理扩展内部的状态和逻辑
• 方便复用通用逻辑，比如可以写高阶函数封装多个扩展都需要的功能（比如监听Viewer事件、添加通用UI按钮），不用在每个类里重复编写

你的示例代码改写版本 #

这里提供两种实用的改写方式：

方式1：函数封装扩展类（兼容原有机制，最推荐） #

这种方式用函数返回一个类，既保留了Forge扩展要求的构造函数形式，又用函数的方式封装了创建逻辑：

import type { Extension } from 'forge-viewer';

export function createMyExtension() {
  return class MyExtension implements Extension {
    viewer: Autodesk.Viewing.Viewer3D;

    constructor(viewer: Autodesk.Viewing.Viewer3D) {
      this.viewer = viewer;
    }

    load(): boolean {
      console.log('MyExtension has been loaded');
      return true;
    }

    unload(): boolean {
      console.log('MyExtension has been unloaded');
      return true;
    }
  };
}

// 注册扩展
const MyExtension = createMyExtension();
Autodesk.Viewing.theExtensionManager.registerExtension('MyExtension', MyExtension);

方式2：工厂函数创建扩展实例（纯函数式风格） #

如果想更偏向纯函数写法，可以用工厂函数直接返回符合Extension接口的对象，注册时包装成构造函数即可：

import type { Extension } from 'forge-viewer';

// 工厂函数生成扩展实例
function makeMyExtension(viewer: Autodesk.Viewing.Viewer3D): Extension {
  return {
    viewer,
    load(): boolean {
      console.log('MyExtension has been loaded');
      return true;
    },
    unload(): boolean {
      console.log('MyExtension has been unloaded');
      return true;
    }
  };
}

// 注册时把工厂函数包装成构造函数
Autodesk.Viewing.theExtensionManager.registerExtension('MyExtension', function(viewer) {
  return makeMyExtension(viewer);
} as typeof Extension);

小提示 #

• 第一种方式最稳妥，完全兼容Forge Viewer的扩展注册机制，不容易出问题
• 在TypeScript里一定要引入Extension类型做校验，确保你的实现符合官方要求，减少运行时bug

内容的提问来源于stack exchange，提问作者Manriss