Mapbox-gl 键入不允许 accessToken 分配

Question

我将 mapbox-gl 库与 TypeScript 一起使用，并且我已使用

@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 转换为任何内容并且它会起作用，但我很好奇这里的打字出了什么问题。

Answer 1

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

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

说明

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

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

然后我们可以做类似的事情：

(mapboxgl as any).accessToken = ..

。这会起作用。

Answer 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

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

Answer 3

您也可以使用此格式：

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

Answer 4

避免这两种错误。

1. 在编译阶段直接将其设置为时，导入是不可变错误

   mapboxgl.accessToken = 'YOUR_TOKEN';

当您使用静态方法托管已编译的工件时，

2. set 不是浏览器上的函数错误

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

您需要直接在

ACCESS_TOKEN

上的

mapboxgl.config

属性上进行设置

import * as mapboxgl from 'mapbox-gl';

mapboxgl.config.ACCESS_TOKEN = 'YOUR_TOKEN';