Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Looking for documentation on how to generate a .d.ts file from a Javascript Library

Tags:

typescript

I have recently been exposed to TypeScript but am struggling a bit with documentation. Seems to be quite a bit of grass roots approach to things. Case and point.

Getting Definitions for a JS library.

First off if you get the js file from NuGet part of that nuget packages should be a d.ts file.
Secondly, I have been unable to find any specific documentation on how to create a definitions file.

I'm wanting to include the MarkerWithLabel library, which is an extension of the google.maps api library.

Does anyone have a .d.ts file they're willing to share or where can I get documentation on how to create/generate a file from JS library.

edit: The library I'm looking for this d.ts file is MarkerWithLabel.

Here is the .d.ts file I started building based on the spec doc, but this doesn't seem to work at all.

     /// <reference path="google.maps.d.ts"/>


     declare class MarkerWithLabelOptions {
         crossImage: string;
         handCursor: string;
         labelAnchor: google.maps.Point;
         labelClass: string;
         labelContent: any;
         labelInBackground: boolean;
         labelStyle: any;
         labelVisible: boolean;
         optimized: boolean;
         raiseOnDrag: boolean;

     }

     declare class MarkerWithLabel extends google.maps.Marker{
         constructor(opt?: MarkerWithLabelOptions);
     }

Implementation is as follows:

 var _mwlo =new MarkerWithLabelOptions({
 position: this.CenterPoint.toLatLng()
    , draggable: true
    , map: this._map
    , labelAnchor: new google.maps.Point(22, 0)
    , labelStyle: {opacity: 1.0}
 });

 var _mwl = new MarkerWithLabel(_mwlo);

I get an error where its saying it can't find a method that matches the provided parameters.

like image 814
BigDubb Avatar asked Feb 15 '23 15:02

BigDubb


1 Answers

I ended up resolving this and have included a working d.ts for others. It may be ideal, but it seems to work. ¯\_(ツ)_/¯

       /// <reference path="google.maps.d.ts"/>


    declare class MarkerWithLabelOptions extends MarkerWithLabel {
        constructor();
        crossImage: string;
        handCursor: string;
        labelAnchor: any;
        labelClass: string;
        labelContent: any;
        labelInBackground: boolean;
        labelStyle: any;
        labelVisible: boolean;
        optimized: boolean;
        raiseOnDrag: boolean;
        position: any;

    }

    declare class MarkerWithLabel extends google.maps.Marker {
        constructor(opts?:any);
        crossImage: string;
        handCursor: string;
        labelAnchor: any;
        labelClass: string;
        labelContent: any;
        labelInBackground: boolean;
        labelStyle: any;
        labelVisible: boolean;
        optimized: boolean;
        raiseOnDrag: boolean;
    }

You may need to update the reference path appropriately for your solution.

like image 141
BigDubb Avatar answered Feb 18 '23 10:02

BigDubb