在Angular中使用Leaflet Routing Machine出现属性缺失报错如何解决？

原生JavaScript是动态类型语言，仅在运行时做逻辑校验，只要Leaflet Routing Machine库本身支持对应配置，代码就能正常运行。
Angular基于TypeScript开发，你安装的@types/leaflet-routing-machine是社区维护的类型声明文件，存在两处定义和实际库能力不匹配的问题，因此触发编译报错：

• LineOptions类型错误将extendToWaypoints、missingRouteTolerance两个可选参数标记为必填
• RoutingControlOptions类型未收录createMarker这个合法配置项

方案1：类型断言绕开校验（最快实现） #

直接给控制配置对象加上as any类型断言，告诉TypeScript跳过当前配置的类型检查，完全不影响运行时的功能：

L.Routing.control({
    waypoints: [
      L.latLng(latitude, longitude),
      L.latLng(latitude, longitude),
    ],
    show: false,
    lineOptions: {styles: [{color: randomColor, opacity: 1, weight: 5}],},
    createMarker: function () {
      return null;
    },
} as any).addTo(this.map);

方案2：扩展全局类型声明（一劳永逸） #

在项目的全局类型定义文件（通常为src/types.d.ts，如果没有可以新建）中补充Leaflet Routing Machine的缺失类型定义，后续所有用到该库的地方都不会再出现同类报错：

import * as L from 'leaflet';

declare module 'leaflet-routing-machine' {
  interface RoutingControlOptions {
    createMarker?: (waypointIndex: number, waypoint: L.Routing.Waypoint, numberOfWaypoints: number) => L.Marker | null;
  }

  interface LineOptions {
    extendToWaypoints?: boolean;
    missingRouteTolerance?: number;
  }
}

方案3：按类型提示补全参数 #

如果不想修改类型配置，也可以直接补全lineOptions里缺失的两个参数，填入库的默认值即可，不会对功能产生影响：

lineOptions: {
  styles: [{color: randomColor, opacity: 1, weight: 5}],
  extendToWaypoints: true,
  missingRouteTolerance: 10
},

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