リーフレットプラグイン用のTypescript定義を追加するには

Question

Typescript https://github.com/CliffCloud/Leaflet.EasyButton/blob/master/src/easy-button.jsでeasy-buttonsプラグインを使用したいと思いますが、Typescriptアノテーションは付属していません。

Answer 1

ステップ1 -

最初のステップは、活字体の注釈なしでそのままのサンプルコードを使用することで、エラーを点灯し、エラーがVSコードに点灯を開始します。

// sample.ts 
L.easyBar([ 
    L.easyButton('fa-file', function(btn, map){ }), 
    L.easyButton('fa-save', function(btn, map){ }), 
    L.easyButton('fa-edit', function(btn, map){ }), 
    L.easyButton('fa-dot-circle-o', function(btn, map){ }) 
]).addTo(map); 

「easy-button.d.ts」という名前のファイルを作成し、それをTypescriptファイルで参照します。

// sample.ts 
import "./easy-button" 
L.easyBar([ 
    L.easyButton('fa-file', function(btn, map){ }), 
    L.easyButton('fa-save', function(btn, map){ }), 
    L.easyButton('fa-edit', function(btn, map){ }), 
    L.easyButton('fa-dot-circle-o', function(btn, map){ }) 
]).addTo(map); 

で簡単button.d.ts

で何もない

// easy-button.d.ts 
// empty for now 

エラーは、我々はまだこれらを定義していないので、十分に公平である

error TS2339: Property 'easyBar' does not exist on type 'typeof L'. 
error TS2339: Property 'easyButton' does not exist on type 'typeof L'. 

氏は述べています。

あなたはeasyBarとeasyButtonhereとhereの定義を参照する場合は、元のJavascript宣言で魔法occuringのビットがありますでしょう。これらの2つの関数は引数を取っていないように見えますが、現実にはそういうことがあります。

L.easyButton = function(/* args will pass automatically */){ 
    var args = Array.prototype.concat.apply([L.Control.EasyButton],arguments); 
    return new (Function.prototype.bind.apply(L.Control.EasyButton, args)); 
}; 

この関数はL.Control.EasyButtonクラスにnewを呼び出すために起こっています。パラメータはやや不可解ですが、あなたは与えthis lineからそれらを推測することができます。

initialize: function(icon, onClick, title, id) 

ステップ2 - タイピング

// easy-button.d.ts 
declare namespace L { 
    function easyBar(); 
    function easyButton(); 
} 

、今は少し近づいている追加：

error TS2346: Supplied parameters do not match any signature of call target 

それは2つのパラメータ 'fa-edit'と、easyButtonへのコールバックを提供したが、私たちの議論では何も宣言していなかったので、それはかなり明白です。 2回目の試行は次のようになります。

// easy-button.d.ts 
declare namespace L { 
    function easyBar(buttons: any[]); 
    function easyButton(icon: string, onClick: (btn: any, map: any)=>void); 
} 

今、すべてのTypescriptの警告が消えています。しかし、それ以上のことができます。 1つは、easyButtonは実際に4つの引数をとります。それは修正するのは簡単です - ?接尾辞を持っているかオプションの引数を観察：

// easy-button.d.ts 
declare namespace L { 
    function easyBar(buttons: any[]); 
    function easyButton(icon: string, onClick: (btn: any, map: any)=>void, title?: string, id?: string); 
} 

ステップ3 - 提供のリターンは

easyButton方法は、実際にL.Control.EasyButtonインスタンスを返す値。現在、Typescriptの定義は、easyButtonの戻り値タイプanyを意味します。私たちはそれを望んでいません！ Typescriptは、タイピングを提供する場合にのみ役立ちます。

declare namespace L { 
    function easyBar(buttons: Control.EasyButton[]): Control.EasyBar; 
    function easyButton(icon: string, onClick: (btn: any, map: any)=>void, title?: string, id?: string) : Control.EasyButton; 

    namespace Control { 
     class EasyButton { }; 
     class EasyBar { }; 
    } 
} 

活字体は再び有益な警告を提供開始します。

error TS2339: Property 'addTo' does not exist on type 'EasyBar'. 

をEasyBarは、我々が定義ファイルにその定義を持参する必要がL.Controlをサブクラスからです。

declare namespace L { 
    function easyBar(buttons: Control.EasyButton[]): Control.EasyBar; 
    function easyButton(icon: string, onClick: (btn: any, map: any)=>void, title?: string, id?: string) : Control.EasyButton; 

    namespace Control { 
     class EasyButton extends L.Control { } 
     class EasyBar extends L.Control { } 
    } 
} 

ステップ4 - EasyButtonとEasyBarにコンストラクタ引数を提供

新しいEasyButtonをインスタンス化しようとすると、コード補完は、あなたがこれを設定するには、L.ControlOptionsオブジェクトを渡す必要があることを示唆しています。実際には、独自のオプションを定義する必要があります。

declare namespace L { 
    function easyBar(buttons: Control.EasyButton[], options?: EasyBarOptions): Control.EasyBar; 
    function easyButton(icon: string, onClick: (btn: any, map: any)=>void, title?: string, id?: string) : Control.EasyButton; 

    interface EasyBarOptions { 
     position?: ControlPosition 
     id?: string 
     leafletClasses?: boolean 
    } 

    interface EasyButtonOptions { 
     position?: ControlPosition 
     id?: string 
     type?: 'replace'|'animate' 
     states?: any 
     leafletClasses?: boolean 
     tagName?: string 
    } 

    namespace Control { 
     class EasyButton extends L.Control { 
      constructor(options?: EasyButtonOptions) 
     } 
     class EasyBar extends L.Control { 
      constructor(options?: EasyBarOptions) 
     } 
    } 
} 

物事はコード補完に今よりよく見える：

しかし、私はstatesオプションにだまさ。私はanyと宣言しました。活字体は、このプラグインのユーザーに有益なコメントを提供します追加JSDocのヒント

- 実際にそれが

interface EasyButtonOptions { 
     position?: ControlPosition 
     id?: string 
     type?: 'replace'|'animate' 
     states?: EasyButtonState[] 
     leafletClasses?: boolean 
     tagName?: string 
    } 

    interface EasyButtonState { 
     stateName: string 
     onClick:() => void 
     title: string 
     icon: string 
    } 

ステップ5であるべきです。ここでは、easyButton

/** 
    * Creates a easyButton 
    * @param icon e.g. fa-globe 
    * @param onClick the button click handler 
    * @param label on the button 
    * @param an id to tag the button with 
    * @example 
    * var helloPopup = L.popup().setContent('Hello World!'); 
    * 
    * L.easyButton('fa-globe', function(btn, map){ 
    *  helloPopup.setLatLng(map.getCenter()).openOn(map); 
    * }).addTo(YOUR_LEAFLET_MAP); 
    */ 
    function easyButton(
     icon: string, 
     onClick: (btn: Control.EasyButton, map: L.Map) => void, 
     title?: string, 
     id?: string): Control.EasyButton; 

ステップ6のドキュメントを提供するかもしれない方法の例だリーフレットの種類を増やすために変更を加え

を定義（リーフレット1.2.0以降で）名前空間宣言削除：

declare namespace L { 

を

と交換してください：

import * as L from 'leaflet' 
declare module 'leaflet' { 

テストコードは次のように読んでください：

import * as L from 'leaflet' 
import 'easy-button' 

ステップ7までnode_modules\leaflet-easybutton\package.json元のプロジェクトのソース

オープンに統合し、styleエントリの下に次の行を追加します。

"main": "src/easy-button.js", 
    "style": "src/easy-button.css", 
    "typings": "src/easy-button.d.ts", 

easy-button.d.tsをnode_modules/leaflet-easybutton/srcに移動し、すべてが動作することをテストします。

その後、すべての人が作業の恩恵を受けるようにプルリクエストを送信してください！

Answer 2

class EasyButton extends L.Control { constructor(options?: EasyButtonOptions) }

新しいL.EasyButtonは、コンストラクタのための 'EasyButtonOptions' オブジェクトを取ります。これは「L.easyButton」の例と一致しません。

A L.easyButtonは、次のオプションがあります。 function easyButton(icon: string, onClick: (btn: any, map: any)=>void, title?: string, id?: string) : Control.EasyButton;

アンEasyButtonOptionsではなく、 'アイコン'、 'onClickの'、 'タイトル' または 'ID' を持っていない、それはとります

interface EasyButtonOptions { position?: ControlPosition id?: string type?: 'replace'|'animate' states?: EasyButtonState[] leafletClasses?: boolean tagName?: string }

をそのため、 L.easyButton（ 'fa fa-icon'、（）=> '..'、 'title）にマッチする新しいL.EasyButton（）に相当するものは何ですか？