如何将H5P编辑器的ColorSelector Widget示例转换为TypeScript类？

一、先拆解你困惑的JavaScript代码结构 #

这段代码是**立即执行函数表达式（IIFE, Immediately Invoked Function Expression）**结合双重命名空间赋值的写法，在ES6类语法普及前的JavaScript项目里很常见，核心作用有两个：

1. 隔离作用域：IIFE内部的变量不会污染全局作用域，只把最终的构造函数暴露到H5PEditor命名空间下，避免和其他代码冲突。
2. 双重挂载构造函数：同时把构造函数赋值给H5PEditor.widgets.colorSelector和H5PEditor.ColorSelector，是为了兼顾两种使用场景：
   • H5PEditor.widgets.colorSelector：符合H5P编辑器的widget注册规范，编辑器会从widgets命名空间里查找并加载这个组件。
   • H5PEditor.ColorSelector：方便其他业务代码直接引用这个类，不用通过widgets层级访问，简化调用逻辑。

这种写法是旧JS时代模拟“类”和模块化的常用手段，换成TypeScript后我们可以用更清晰的类语法实现完全一致的效果。

二、TypeScript转换方案 #

首先确保项目里已引入H5P的类型定义（如果没有，可以手动声明必要的全局类型），然后按以下步骤转换：

1. 声明H5PEditor全局类型（按需补充） #

如果项目没有自带H5P的TS类型，先补充基础类型让TypeScript识别全局对象：

declare namespace H5PEditor {
  // 定义Widget的接口规范，匹配原JS的方法结构
  interface Widget {
    new (
      parent: unknown,
      field: unknown,
      params: string,
      setValue: (value: unknown) => void
    ): {
      appendTo: ($wrapper: JQuery) => void;
      validate: () => boolean;
      remove: () => void;
    };
  }

  // 声明widgets命名空间下的colorSelector
  namespace widgets {
    let colorSelector: Widget;
  }

  // 声明全局可访问的ColorSelector
  let ColorSelector: Widget;
}

// 若未引入@types/jquery，可先简单声明JQuery类型
declare type JQuery = any;

2. 用TypeScript类实现核心逻辑 #

用TS类语法重构原有的构造函数和原型方法，兼顾类型安全：

class ColorSelector implements H5PEditor.Widget {
  parent: unknown;
  field: unknown;
  params: string;
  setValue: (value: unknown) => void;

  constructor(
    parent: unknown,
    field: unknown,
    params: string,
    setValue: (value: unknown) => void
  ) {
    this.parent = parent;
    this.field = field;
    this.params = params;
    this.setValue = setValue;
  }

  appendTo($wrapper: JQuery): void {
    // 在这里实现原JS中appendTo的DOM渲染逻辑
  }

  validate(): boolean {
    // 在这里实现参数校验逻辑，返回校验结果
    return true;
  }

  remove(): void {
    // 在这里实现组件销毁逻辑
  }
}

3. 挂载到H5PEditor命名空间 #

最后按照原JS的逻辑，把类同时挂载到两个命名空间下，保持和原有代码的兼容性：

// 同步挂载到widgets和全局H5PEditor，和原JS行为完全一致
H5PEditor.widgets.colorSelector = ColorSelector;
H5PEditor.ColorSelector = ColorSelector;

这样转换后，既保留了原代码的所有外部接口，又用TypeScript的类型系统保证了代码安全性，方便你调用其他TS编写的类。

额外提示 #

如果你的项目已经引入了完整的H5P TypeScript类型定义（比如@types/h5p），可以跳过第一步的手动类型声明，直接使用官方提供的类型即可。

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