Angular从4.2（TypeScript ~2.3.3）迁移至12（TypeScript ~4.3.2）中this[layerVar]语法类型错误问题咨询

从旧版Angular/TypeScript升级后，类型检查确实变得更严格了——直接用any虽然能快速消错，但等于放弃了TS的类型保护，咱们来用更规范的方式处理这个动态属性访问的类型问题：

核心问题原因 #

TypeScript 4.3对对象的索引访问做了更严格的校验：当layerVar没有指定明确类型时，TS会默认它是string类型，但你的类上并不是所有字符串对应的属性都存在，所以TS会抛出类型错误，防止你访问不存在的属性。

解决方案步骤 #

1. 定义合法的属性键类型
   首先明确你的类中允许通过layerVar访问的属性名称，比如默认的'myLayer'，如果还有其他可能的layer名称，也一起加进去：

   // 在类外部或内部定义类型别名
   type LayerKey = 'myLayer' | 'anotherLayer' | 'thirdLayer'; // 替换成你实际的属性名
   

2. 给layerVar参数指定类型并优化默认值
   原来的代码里layerVar = null然后又赋值为'myLayer'，可以直接把默认值设为'myLayer'，同时指定类型为LayerKey：

   drawOnMap(feature, radius, isArray, layerVar: LayerKey = 'myLayer', style = null) {
     // 移除原来的 layerVar = layerVar || 'myLayer'，因为已经有默认值了
     style = style || this.myStyle;
     // ... 后续逻辑不变
   }
   

3. 给类中的layer属性声明类型
   在你的组件/服务类中，明确声明这些layer属性的类型，让TS知道它们的存在和类型：

   export class YourMapComponent {
     map: L.Map;
     myStyle: L.PathOptions; // 假设你的myStyle是Leaflet的样式类型
     // 声明所有LayerKey对应的属性类型
     myLayer: L.GeoJSON | null = null;
     anotherLayer: L.GeoJSON | null = null;
     thirdLayer: L.GeoJSON | null = null;
   
     // ... 其他代码和drawOnMap函数
   }
   

优化后的完整代码示例 #

// 先定义类型别名
type LayerKey = 'myLayer'; // 如果有其他layer名称，在这里添加

export class YourMapComponent {
  map: L.Map;
  myStyle: L.PathOptions;
  myLayer: L.GeoJSON | null = null;

  drawOnMap(
    feature: GeoJSON.Feature | GeoJSON.Feature[], // 给feature也加上类型（需要安装@types/geojson）
    radius?: number,
    isArray: boolean = false,
    layerVar: LayerKey = 'myLayer',
    style: L.PathOptions = this.myStyle
  ) {
    if (!isArray && feature.geometry.type.includes("Multi")) {
      feature.properties = { gid: 123 };
      const features = [feature];
      this[layerVar] = new L.geoJson(features, { style })
        .addTo(this.map);
    } else if (!isArray && feature.geometry.type === "Point" && radius) {
      this[layerVar] = new L.geoJson(feature, {
        pointToLayer: (feature2, latlng) => new L.Circle(latlng, radius),
      })
        .addTo(this.map);
    } else if ( (!isArray && feature.geometry.type === "Point") || (Array.isArray(feature) && feature[0]?.type === "Point") ) {
      this[layerVar] = new L.geoJson(feature, {
        pointToLayer: (feature2, latlng) => new L.Marker(latlng, { draggable: false }),
      })
        .addTo(this.map);
    } else {
      this[layerVar] = new L.geoJson(feature, { style })
        .addTo(this.map);
    }
  }
}

额外优化建议 #

• 如果你的layer名称较多，可以用枚举来管理LayerKey，比如：

  enum LayerKey {
    MyLayer = 'myLayer',
    AnotherLayer = 'anotherLayer'
  }
  

  然后参数类型设为LayerKey，使用的时候用LayerKey.MyLayer，更规范不易出错。
• 给所有参数都加上明确的类型，比如radius?: number、isArray: boolean，进一步提升代码的类型安全性。

内容的提问来源于stack exchange，提问作者Корвин Кори