TypeScript项目使用react-map-gl添加Layer层出现类型不匹配报错

两类报错均为TypeScript类型校验问题，和你使用的react-map-gl版本、类型推断逻辑相关，按以下步骤修复即可：

1. 修复type字段类型不兼容报错 #

你直接定义的skyLayer是无类型的普通JS对象，TypeScript会自动将type: 'sky'推断为宽泛的string类型，而LayerProps要求type必须是预设的字面量联合类型，两种修复方式可选：

方式A：显式指定对象类型（更规范） #

先从react-map-gl导入对应类型，直接给skyLayer绑定类型：

import type { LayerProps } from 'react-map-gl';

const skyLayer: LayerProps = {
  id: 'sky',
  type: 'sky',
  paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-sun': [0.0, 0.0],
    'sky-atmosphere-sun-intensity': 15
  }
};

方式B：添加const断言 #

不需要导入类型，直接固定对象的所有属性为字面量类型：

const skyLayer = {
  id: 'sky',
  type: 'sky',
  paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-sun': [0.0, 0.0],
    'sky-atmosphere-sun-intensity': 15
  }
} as const;

2. 修复paint属性不兼容报错 #

你参考的是6.1版本的示例，这个版本的react-map-gl官方类型定义没有包含sky图层对应的Paint类型，才会出现paint属性找不到匹配类型的报错，两种修复方式可选：

方式A：局部跳过类型校验 #

给paint属性加as any断言，临时跳过当前属性的类型校验：

const skyLayer: LayerProps = {
  id: 'sky',
  type: 'sky',
  paint: {
    'sky-type': 'atmosphere',
    'sky-atmosphere-sun': [0.0, 0.0],
    'sky-atmosphere-sun-intensity': 15
  } as any
};

方式B：升级依赖版本 #

将react-map-gl升级到7.x及以上版本，新版本已经完整覆盖了sky图层的类型定义，不需要额外断言即可正常通过校验。

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