如何使用 typescript 修复 VS Code 中的“类型‘字符串’不可分配给类型‘投影’mapbox-gl”错误

Question

我正在尝试使用打字稿设置mapbox-gl。当我尝试根据文档设置投影值时，我在 VS Code 中收到以下错误。 基本上：

 map = new mapboxgl.Map({
      container: 'mapbox',
      style: 'mapbox://styles/mapbox/outdoors-v12',
      projection: 'naturalEarth'
    })

甚至建议的默认值是“mercator”，这显然是一个字符串。 运行代码时一切正常，但我如何告诉 VS Code 接受那里的字符串是正确的？

npm list 的输出是这样的：

[email protected]

此外，这也被 VS Code 接受：

map.setProjection('globe')

它的效果与其他解决方案一样好，我仍然更喜欢一个答案，为什么我的原始版本被 vs code 标记为错误，特别是考虑到它是来自文档的逐字副本，并且在实际运行代码时工作正常。

Answer 1

我很确定这是因为mapbox-gl 的DefinitelyTyped 包并不是那么“最新”。您正在使用

[email protected]

，但在撰写本文时。 mapbox-gl 不发布自己的类型，但这些类型可以从 DefiniteTyped 项目 获得，我假设您正在从该项目获取类型。每当您从那里获取类型时，理想情况下，您都会获取具有匹配的主要版本号和次要版本号的类型包，该版本号为其提供类型（请参阅明确类型化的包版本如何与相应的版本相关）图书馆？）。前任。理想情况下，现在您会做

npm i -D '@types/mapbox-gl@~2.15'

。不幸的是，在撰写本文时，

@types/mapbox-gl

的最新版本是 2.7.11。现在，当您查看 mapbox-gl 的变更日志时，您会发现您正在使用的功能是在 v2.9.0 中添加的。这就是为什么你没有得到它的类型。欢迎向 DefinitiveTyped 项目提交 Pull 请求，为 mapbox-gl v2.9 添加类型。

Answer 2

投影应该是 ProjectionSpecification 对象的类型，而不是字符串。

请参阅代码片段和本文。

const map = new mapboxgl.Map({
    style: {
        version: 8,
        name: 'My Projected Style',
        sources: {
            // ...
        },
        layers: [
            // ...
        ],
        projection: {
            name: 'equalEarth'
        }
    }
});

Answer 3

这对我有用：

投影与投影一样未知

const mapContainer = useRef(null);
  const mapRef = useRef(null);
  const [lng, setLng] = useState(30);
  const [lat, setLat] = useState(50);
  const [zoom, setZoom] = useState(1.5);
  const [projection, setProjection] = useState("globe");

  useEffect(() => {
    if (mapRef.current) return; // initialize map only once
    const map: any = new mapboxgl.Map({
      container: mapContainer.current!,
      style: "mapbox://styles/mapbox/satellite-streets-v11",
      center: [lng, lat],
      zoom: zoom,
      projection: projection as unknown as Projection,
    });
    mapRef.current = map;
    map.on("load", function () {
      const setFog = () =>
        map.setFog({
          // range: [-1, 2],
          // "horizon-blend": 0.3,
          color: "gray",
          // "high-color": "#add8e6",
          // "space-color": "black",
          // "star-intensity": 10.0,
        });
      setFog();
    });