mapbox-gl- d.ts的Typescript定义绘图

Question

我试图为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;
}

Answer 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" {

}

Answer 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
}

Answer 3

更新2021年8月

它们现在可以在DefinitelyTyped上找到

DefinitelyTyped GitHub reference

NPM reference

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