【问题标题】：Typescript definition d.ts for mapbox-gl-drawmapbox-gl-draw 的打字稿定义 d.ts
【发布时间】：2023-03-23 01:03:01
【问题描述】：

我试图为 mapbox-gl-draw 项目创建类型化定义。但失败了。有人能给点提示吗？

javascript文件是这样的

'use strict';

var Setup = require('./src/setup');
var Options = require('./src/options');
var API = require('./src/api');
const Constants = require('./src/constants');

var Draw = function(options) {
  options = Options(options);

  var ctx = {
    options: options
  };

  var api = API(ctx);
  ctx.api = api;

  var setup = Setup(ctx);
  api.addTo = setup.addTo;
  api.remove = setup.remove;
  api.types = Constants.types;
  api.options = options;

  return api;
};

module.exports = Draw;

window.mapboxgl = window.mapboxgl || {};
window.mapboxgl.Draw = Draw;

我的 index.d.ts 是这样的

declare namespace mapboxgl {
    export function Draw(options?:any):any

}
declare module 'mapbox-gl-draw' {
    export = mapboxgl;
}

【问题讨论】：

标签： typescript typescript-typings mapbox-gl-js typescript2.0

【解决方案1】：

对于这个javascript：

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: [40, -74.50],
  zoom: 9
});

例如，您可以创建 mapOptions：

interface MapOptions {
 container?: string;
 style?: string,
 center?: number[];
 zoom?: number;
}


declare module "mapbox-gl-draw" {

}

【讨论】：

【解决方案2】：

此扩展的最佳类型目前位于此 git 问题中：

https://github.com/mapbox/mapbox-gl-draw/issues/842

尚不清楚为什么它们没有成功提交给DefinitelyTyped。包括在下面：

declare module '@mapbox/mapbox-gl-draw' {

import {Feature, FeatureCollection} from 'geojson'
  import {IControl} from 'mapbox-gl'
  import {IMapboxDrawControls} from '@mapbox/mapbox-gl-draw'

  namespace MapboxDraw {
    export interface IMapboxDrawControls {
      point?: boolean,
      line_string?: boolean,
      polygon?: boolean
      trash?: boolean,
      combine_features?: boolean,
      uncombine_features?: boolean
    }
  }

  class MapboxDraw implements IControl {

    getDefaultPosition: () => string

    constructor(options?: {
      displayControlsDefault?: boolean,
      keybindings?: boolean,
      touchEnabled?: boolean,
      boxSelect?: boolean,
      clickBuffer?: number,
      touchBuffer?: number,
      controls?: IMapboxDrawControls,
      styles?: object[],
      modes?: object,
      defaultMode?: string,
      userProperties?: boolean
    });

    public add(geojson: object): string[]

    public get(featureId: string): Feature | undefined

    public getFeatureIdsAt(point: { x: number, y: number }): string[]

    public getSelectedIds(): string[]

    public getSelected(): FeatureCollection

    public getSelectedPoints(): FeatureCollection

    public getAll(): FeatureCollection

    public delete(ids: string | string[]): this

    public deleteAll(): this

    public set(featureCollection: FeatureCollection): string[]

    public trash(): this

    public combineFeatures(): this

    public uncombineFeatures(): this

    public getMode(): string

    public changeMode(mode: string, options?: object): this

    public setFeatureProperty(featureId: string, property: string, value: any): this

    onAdd(map: mapboxgl.Map): HTMLElement

    onRemove(map: mapboxgl.Map): any

  }

  export = MapboxDraw
}

【讨论】：

【解决方案3】：

2021 年 8 月更新

它们现在可在DefiniteTyped ??

DefinitelyTyped GitHub reference

NPM reference

使用：npm install --save-dev @types/mapbox__mapbox-gl-draw

【讨论】：