CODEWITHSUNDEEP
typescript
BigDubb
BigDubb

Reputation: 478

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

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.

Upvotes: 4

Views: 3654

Answers (2)

BigDubb
BigDubb

Reputation: 478

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.

Upvotes: 6

Fenton
Fenton

Reputation: 251262

I wrote an article on writing TypeScript definitions a while back that will hopefully help you to get started.

Stage one is to check to see if someone has already created the definition on Definitely Typed.

You can't auto-generate the definition from the JavaScript - although some of the types might possibly be inferred - because definitions are an additive process (i.e. adding information that doesn't exist in JavaScript), but there are quick ways to get started detailed in the article.

Upvotes: 2

Related Questions