如何在TypeScript项目中集成无类型定义的Leaflet AnimatedMarker插件

步骤1：编写扩展类型声明文件 #

在项目src目录下新建leaflet-animatedmarker.d.ts类型声明文件，写入以下内容扩展Leaflet的默认类型：

import * as L from 'leaflet';

declare module 'leaflet' {
  // 可根据插件官方文档补全所有属性和方法的类型，不需要用到的可以暂时不写
  export class AnimatedMarker extends L.Marker {
    constructor(latlng: L.LatLngExpression, options?: Record<string, any>);
    // 以下为插件常用方法示例，可按需扩展
    start(): void;
    stop(): void;
    pause(): void;
    addLatLng(latlng: L.LatLngExpression): this;
    setLine(latlngs: L.LatLngExpression[]): this;
  }

  // 导出工厂方法类型
  export function animatedMarker(
    latlng: L.LatLngExpression,
    options?: Record<string, any>
  ): AnimatedMarker;
}

如果你的tsconfig.json中配置了typeRoots参数，需要将声明文件所在目录添加到配置中，示例：

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

步骤2：导入使用 #

首先安装插件：

npm install --save leaflet.animatedmarker

在Angular组件中按以下方式导入即可：

// 导入插件本体，完成Leaflet对象挂载
import 'leaflet.animatedmarker/src/AnimatedMarker';
// 从Leaflet中直接解构使用，编译不会报错
import { AnimatedMarker, animatedMarker } from 'leaflet';

// 业务代码直接使用即可
const marker = animatedMarker([51.5, -0.09], {});

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