如何为Magento 2/RequireJS生成匹配参数的TypeScript类型定义

在为Magento 2的RequireJS编写TypeScript类型定义时，核心问题是define函数的trueCallback（实际执行的回调）和pseudoCallback（用于类型推断的占位回调）的参数类型无法对齐，导致类型检查失效。

解决方案 #

核心思路是通过元组类型提取依赖的类型信息，让两个回调共享同一组参数类型定义，从根源上消除类型不匹配问题。以下是修正后的类型定义：

type RequireDependency = string | { [key: string]: string };

// 工具类型：根据依赖数组生成对应的回调参数类型
type CallbackParams<T extends RequireDependency[]> = {
  [K in keyof T]: 
    T[K] extends string 
      ? (T[K] extends keyof Window ? Window[T[K]] : unknown)
      : T[K] extends { [key: string]: string } 
        ? { [P in keyof T[K]]: T[K][P] extends keyof Window ? Window[T[K][P]] : unknown }
        : unknown;
};

interface RequireDefine {
  <T extends RequireDependency[]>(
    dependencies: T,
    pseudoCallback: (...args: CallbackParams<T>) => void,
    trueCallback: (...args: CallbackParams<T>) => void
  ): void;
}

declare const define: RequireDefine;

关键修改说明 #

• CallbackParams<T>工具类型：遍历依赖数组T，根据依赖的类型（字符串或映射对象）自动推导对应的参数类型，确保参数与依赖一一对应。
• 统一回调参数类型：让pseudoCallback和trueCallback都使用CallbackParams<T>作为参数类型，强制两个回调的参数类型完全一致。

使用示例 #

// 依赖jQuery和Magento UI抽象组件的示例
define(
  ['jquery', 'Magento_Ui/js/form/element/abstract'],
  ($, AbstractElement) => {
    // 此处$和AbstractElement的类型会被正确推断
  },
  ($, AbstractElement) => {
    // 该回调的参数类型与上方完全一致，类型检查正常生效
    return {
      defaults: {},
      initialize: function() {
        this._super();
        $(this.element).on('click', () => console.log('clicked'));
        return this;
      }
    };
  }
);

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