読者です 読者をやめる 読者になる 読者になる

3分でTypeScriptの定義ファイルの作成方法を覚えよう

TypeScript milkcocoa Advent Calendar 2014

この記事はTypeScript Advent Calendar 2014の9日目の記事です。

TypeScriptの定義ファイル(d.ts)の作成方法について書いてみます(自分用メモを兼ねて・・)
まだTypeScript歴は浅いので、間違ったことがありましたら指摘していただければ幸いです

説明に使用するJavaScriptライブラリ:milkcocoa

JavaScript1行でバックエンドを提供します」と面白そうなので、
このライブラリを使って説明していきます

簡単!?3分で作成方法を覚えられる

リファレンスが揃えれば、簡単に変換できます(全手動ですが・・・)

  • ステップ1:クラスのレイアウト作成
  • ステップ2:メソッド(&パラメータ)をコピペ
  • ステップ3:パラメータの型を決める

ステップ1:クラスのレイアウト作成

以下はレイアウトのテンプレートです

declare module <ライブラリ名> {
    export class <クラス名> {
        // ...メンバの実装...
    }
}
// 外部アクセスのために定義、なくても可
import <クラス名> = <ライブラリ名>.<クラス名>;

milkcocoaは以下三つクラスがあります。リファレンス

  • MilkCocoa
  • DataStore
  • Query

以下はテンプレートから変換したレイアウト

declare module milkcocoa {
    export class MilkCocoa {
    }
}
declare module milkcocoa {
    export class DataStore {
    }
}
declare module milkcocoa {
    export class Query {
    }
}
import MilkCocoa = milkcocoa.MilkCocoa;
import DataStore = milkcocoa.DataStore;
import Query = milkcocoa.Query;

ステップ2:メソッド(&パラメータ)をコピペ

MilkCocoaクラスのメソッド一覧

  • new MilkCocoa()
  • dataStore()
  • addAccount()
  • login()
  • logout()
  • getCurrentUser()

そのままコピペしましょう。(見やすいように整形しましょう

export class MilkCocoa {
  constructor(host);  //new MilkCocoa()の代わりにコンストラクタを使用する
  dataStore(path);
  addAccount(email, password, options, callback);
  login(email, password, callback);
  logout(callback);
  getCurrentUser(callback);
}

ステップ3:パラメータの型を決める

リファレンスを読みながらパラメータの型を決めていきます
※リファレンスを読んでも分からなかった場合、設定しなくても問題ありません

例1:new MilkCocoa(host)

引数:MilkCocoaのデータストアのホストへのURLをString型で渡します
戻り値:通信が確立しているMilkCocoaのインスタンスを取得することができます
※コールバック関数は引数に入れても入れなくても動作します

// コールバックを提供しない場合
constructor(host: string);
// コールバックを提供する場合
constructor(host: string, cb?: () => void);

例2:dataStore(path)

引数:データストアへのパスを指定できます
戻り値:指定したパスへのDataStoreオブジェクトを返します

dataStore(path:string) : DataStore;


説明は以上です
他のメソッドも同じようにひたすら作成していきましょう。

最後に

定義ファイルを読んだことある方にも知っていますが、いろんな書き方があります。
個人的覚えやすいと思う手順を紹介しました。

今回作成した定義ファイルはGitHubにアップしています。
作成時のご参考になるようでしたら幸いです。

ではでは~