如何用TypeScript正确扩展Leaflet类（如Marker）？

开发者阿泽

2026-6-22

用TypeScript正确扩展Leaflet Marker类（使用.extend方法）

问题原因

Leaflet的L.Marker.extend()是JS原生的继承语法，TypeScript的类型定义对这种方式的构造函数参数推断支持有限，默认标注为无参构造，所以会出现"Expected 0 arguments, but got 2"的错误，需要手动补充类型声明修正。

解决方案步骤

定义自定义选项类型
先继承L.MarkerOptions，添加你的自定义选项：

interface PhysicalSizeMarkerOptions extends L.MarkerOptions {
  width: number;
  height: number;
}

扩展Marker并补充构造器类型
使用L.Marker.extend()创建类后，通过类型断言指定构造函数的参数和返回类型，让TypeScript识别正确的构造签名：

const PhysicalSizeMarker = L.Marker.extend({
  // 初始化自定义默认选项
  options: {
    width: 0,
    height: 0,
    // 可继承Marker的默认选项，比如icon、draggable等
  },

  // 自定义初始化方法（可选，若需要额外逻辑）
  initialize(latlng: L.LatLngExpression, options: PhysicalSizeMarkerOptions) {
    // 调用父类的初始化逻辑
    L.Marker.prototype.initialize.call(this, latlng, options);
    // 这里添加你的自定义初始化代码
  },

  // 其他自定义方法示例
  getSize(): { width: number; height: number } {
    return { width: this.options.width, height: this.options.height };
  }
}) as {
  // 声明构造函数的类型
  new(latlng: L.LatLngExpression, options: PhysicalSizeMarkerOptions): L.Marker & {
    // 若有自定义方法/属性，在这里声明类型
    getSize(): { width: number; height: number };
  };
};

编写工厂函数
此时工厂函数的类型错误会自动消除：

export function physicalSizeMarker(
  latlng: L.LatLngExpression,
  options: PhysicalSizeMarkerOptions,
) {
  return new PhysicalSizeMarker(latlng, options);
}