Mapbox-gl 输入不允许 accessToken 分配

Posted 2023-02-16

【中文标题】Mapbox-gl 输入不允许 accessToken 分配

【英文标题】：Mapbox-gl typing won't allow accessToken assignment

【发布时间】：2017-11-04 01:31:27

【问题描述】：

我正在使用带有 TypeScript 的 mapbox-gl 库，并且我已经使用 @types/mapbox-gl 安装了它的社区来源类型定义。当我尝试导入并设置 accessToken 以使用该库时，我的 TypeScript 编译器会抛出此错误： TS2540: Cannot assign to 'accessToken' because it is a constant or a read-only property.

所以我提取了 .d.ts 文件，有问题的变量看起来非常可分配（见此处：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/mapbox-gl/index.d.ts）：

declare namespace mapboxgl 
   let accessToken: string;
   ...

这是我的代码：

import * as mapbox from 'mapbox-gl';
mapbox.accessToken = 'token';

版本！

"@types/mapbox-gl": "^0.35.0",
"typescript": "^2.3.4",
"mapbox-gl": "^0.37.0",

TypeScript hackery 说我可以将 mapbox 投射到任何地方，它会起作用，但我很好奇这里的打字出了什么问题。

【参考方案1】：

这是我一直在使用的临时解决方法：

Object.getOwnPropertyDescriptor(mapboxgl, "accessToken").set('YOUR_TOKEN');

说明

由于对象被重新定义为使用自定义设置器，该设置器将令牌放置在内部闭包中 - 我们可以直接调用设置器函数，如示例所示。

再深入一点，我们可以看到 es6 模块根据定义是常量： https://github.com/Microsoft/TypeScript/issues/6751#issuecomment-177114001

然后我们可以这样做：(mapboxgl as any).accessToken = ..。这将起作用。

【讨论】：

(mapboxgl as any).accessToken = ...

【参考方案2】：

对于那些现在发现这个的人......你甚至不需要这样设置 Mapbox accessToken，它可以作为一个选项传入（从 v1.2 开始）

const map = new mapboxgl.Map(
  accessToken: '...',
  container: '...',
  style: '...',
);

可惜它不是任何示例中使用的方法（还）。

文档：https://docs.mapbox.com/mapbox-gl-js/api/#map

1.2 发行说明：https://github.com/mapbox/mapbox-gl-js/releases/tag/v1.2.0

添加它的公关：https://github.com/mapbox/mapbox-gl-js/pull/8364

【讨论】：

我正在使用基于此的辅助函数来注入默认令牌：import Map as MapboxMap, MapboxOptions from 'mapbox-gl'; export const createMap = (config: MapboxOptions): MapboxMap => new MapboxMap( accessToken: MAPBOX_ACCESS_TOKEN, ...config )

【参考方案3】：

你也可以使用这种格式：

(mapboxgl as typeof mapboxgl).accessToken = ...