如何在TypeScript项目中使用leaflet-distortableimage？类型错误解决

方法一：扩展Leaflet全局类型定义 #

在项目src目录下新建types/leaflet-distortableimage.d.ts文件（无types目录则直接创建），添加以下类型声明代码：

import * as L from 'leaflet';

declare module 'leaflet' {
  interface DistortableImageOverlayOptions extends L.ImageOverlayOptions {
    corners: L.LatLng[];
    // 可按需补充插件的其他配置项
  }

  function distortableImageOverlay(
    url: string,
    options: DistortableImageOverlayOptions
  ): L.Layer;
}

declare module 'leaflet-distortableimage';

接着在tsconfig.json中确保typeRoots包含自定义类型目录（未配置则添加）：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

方法二：临时类型断言（快速绕过检查） #

若无需完整类型支持，可通过类型断言直接跳过TypeScript的类型校验：

import * as L from 'leaflet';
import 'leaflet-distortableimage';

const map = L.map('map').setView([51.505, -0.09], 13);
const img = 'link-to-your-image-file.jpg';

// 断言L包含distortableImageOverlay方法
(L as any).distortableImageOverlay(img, {
  corners: [
    L.latLng(51.52,-0.14),
    L.latLng(51.52, -0.10),
    L.latLng(51.50, -0.10),
    L.latLng(51.50, -0.14)
  ]
}).addTo(map);

方法三：完善类型定义（进阶） #

如果需要完整的类型提示，可参照插件JS API补充更多类型细节，比如插件的编辑方法、事件等：

import * as L from 'leaflet';

declare module 'leaflet' {
  interface DistortableImageOverlay extends L.ImageOverlay {
    // 补充插件提供的实例方法
    enable(): void;
    disable(): void;
  }

  interface DistortableImageOverlayOptions extends L.ImageOverlayOptions {
    corners: L.LatLng[];
    editable?: boolean;
    // 补充插件其他配置项
  }

  function distortableImageOverlay(
    url: string,
    options: DistortableImageOverlayOptions
  ): DistortableImageOverlay;
}

declare module 'leaflet-distortableimage';

完成以上操作后，重启TypeScript服务或开发服务器，类型错误即可消除。

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