Angular中GeoJSON FeatureCollection的summary属性访问报错问题

核心原因 #

1. 标准GeoJSON类型的局限性
   你使用的FeatureCollection是标准GeoJSON的TypeScript类型（一般来自@types/geojson包），其中Feature的properties字段被定义为Record<string, any> | undefined这类泛型结构，并没有显式包含OpenRouteService返回的summary属性。TypeScript作为静态类型语言，会严格校验点访问的字段是否存在于类型定义中，所以直接写.summary会触发“Unresolved variable summary”的报错。

2. 索引访问的类型检查逻辑
   当你用properties!['summary']这种索引访问方式时，TypeScript对动态键的检查会宽松很多——它默认你是在访问一个动态的键值对，不会强制要求类型提前定义这个键，因此不会触发静态检查报错，而运行时因为API返回的真实数据确实包含该字段，所以能正常获取值。

另外你用的!是非空断言，只是告诉编译器properties不为undefined，但没法解决类型中缺少summary字段的问题，所以点访问还是会报错。

可行的解决办法 #

方法一：自定义扩展类型（推荐）

直接扩展标准GeoJSON类型，把OpenRouteService的自定义属性纳入类型定义，这样既能获得TypeScript的类型校验，又能正常使用点访问：

import { FeatureCollection, Feature, Geometry } from 'geojson';

// 定义OpenRouteService返回的属性结构
interface ORSFeatureProperties {
  summary: {
    distance: number;
    // 可以添加其他需要的属性，比如duration等
  };
  // 其他OpenRouteService返回的自定义属性也可以在这里定义
}

// 扩展Feature类型
type ORSFeature = Feature<Geometry, ORSFeatureProperties>;

// 最终的响应类型
type ORSFeatureCollection = FeatureCollection<Geometry, ORSFeatureProperties>;

// 重新定义变量
routeJson: ORSFeatureCollection | undefined;

之后你就能正常用this.routeJson?.features[0].properties.summary.distance访问，同时TypeScript会帮你做类型校验。

方法二：临时类型断言（快速解决）

如果不想自定义完整类型，也可以用类型断言绕开静态检查：

// 简单粗暴的any断言（不推荐，会丢失类型校验）
(this.routeJson?.features[0].properties as any).summary.distance

// 更精确的断言（推荐，保留部分类型校验）
interface ORSSummaryProps {
  summary: { distance: number };
}
(this.routeJson?.features[0].properties as ORSSummaryProps).summary.distance

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