typescriptの定義ファイルd-tsを実際にdefinitelytypedにpullrequestしてみた

元記事は[こちら](http://kenev.net/ja/2014/12/19/typescriptの定義ファイルd-tsを実際にdefinitelytypedにpullrequestしてみた/#more-180)

これから定義ファイルを作成してみたい！という人は必ず[こちら](http://qiita.com/vvakame/items/1980d4b6cc222e03fdcb)の記事を読みましょう。ここから下はあくまで実際に実践してみた過程を備忘録代わりに載せているだけです。

**ツッコミや修正すべき点はコメント等いただけるととてもうれしいです**

今回Typescriptで欲しかった定義ファイルは「angular-local-storage」というlocalStorageをいい感じに使わせてくれるangularjsのモジュールです。

## 1. 本家からFork
まずはGithubのDefinitelyTypedに行き、右上の「Fork」を押してForkしましょう
![スクリーンショット 2014-12-18 21.24.50.png](https://qiita-image-store.s3.amazonaws.com/0/38528/48fb9538-f58c-793b-7999-6f75f656d909.png)

## 2. git clone → branch作成
ForkしたリポジトリをローカルにGit Cloneしてきてまずはライブラリ名のbranchを作成しましょう（今回ならangular-local-storageブランチ）。次にライブラリ名（angular-local-storage）と一致するフォルダを作成します。
![スクリーンショット 2014-12-18 21.25.45.png](https://qiita-image-store.s3.amazonaws.com/0/38528/04de6194-781a-135c-14c6-6a277bdb22f3.png)

## 3. 定義ファイルの作成
作成したフォルダに定義ファイルを作成します（angular-local-storage.d.ts）
![スクリーンショット 2014-12-18 21.26.19.png](https://qiita-image-store.s3.amazonaws.com/0/38528/3d1eeb4c-4890-cf03-1b7b-554e052eb45a.png)

## 4. ヘッダ情報の設定
DefinitelyTypedに投稿する定義ファイルには以下のようにヘッダ情報を入力

```shell-session
// Type definitions for [ライブラリ名（バージョンがわかればバージョンも）]
// Project: [ライブラリのURL] 
// Definitions by: [作った人（自分）] <[自分のURL]> 
// Definitions: https://github.com/borisyankov/DefinitelyTyped
```
![スクリーンショット 2014-12-18 21.34.34.png](https://qiita-image-store.s3.amazonaws.com/0/38528/4b264514-4527-6706-4bd6-9629a8cb42f5.png)
今回はv0.1.5が対象だったのでヘッダ情報にも書いておきました。
![スクリーンショット 2014-12-18 21.26.55.png](https://qiita-image-store.s3.amazonaws.com/0/38528/0c7bb570-ac03-ec79-a9f8-838e527059ee.png)

## 5. 定義ファイルの中身作成
さて、次のキャプチャではもう定義ファイルは概ね完成しています。作り方とかはTypeScriptの仕様とかが絡んでくる話なので割愛。これはとにかく対象となるライブラリのAPIを読みながら作っていくしかないと思います。コメントとかも概ね流用したものをそのまま定義ファイルに使っています。
![スクリーンショット 2014-12-18 22.53.45.png](https://qiita-image-store.s3.amazonaws.com/0/38528/08213112-7a69-78ef-ee61-2b6b1958bf85.png)

## 6. テストコード作成
定義ファイルが完成したところで次に必ず作らないといけないのが、その定義ファイルを使ったテストコードです。「ライブラリ名-tests.ts」を作りましょう（今回ならangular-local-storage-tests.ts）
![スクリーンショット 2014-12-18 22.54.48.png](https://qiita-image-store.s3.amazonaws.com/0/38528/020a24f6-3e14-c190-36dc-1d3654dda768.png)

## 7. テストコードのコンパイル
本家の「Contribution guide」にもテストコードは対象のライブラリのサンプルコードとかを書いとけばいいよみたいなことが書いてあるので、とりあえずGithubのReadmeに載っているサンプルコードをTypescriptで書きました。以下でコンパイルが通れば多分OK。
`tsc --noImplicitAny angular-local-storage/angular-local-storage-tests.ts`
サンプルコードはこんな感じ↓
![スクリーンショット 2014-12-18 23.35.32.png](https://qiita-image-store.s3.amazonaws.com/0/38528/dc096b9b-f3b4-14c7-f1c8-4eae647eeb47.png)

## 8. テスト実行(npm test)
ひと通り完成したところで「npm test」を走らせてテストがちゃんと通ることを確認します。

```shell-session
mbp:DefinitelyTyped hoge$ npm test
> DefinitelyTyped@0.0.1 test /Users/hoge/Projects/Fork/DefinitelyTyped
> node ./_infrastructure/runner.js --changes
 
=============================================================================
DefinitelyTyped Diff Detector 0.1.0
=============================================================================
All changes
-----------------------------------------------------------------------------
angular-local-storage/angular-local-storage-tests.ts
angular-local-storage/angular-local-storage.d.ts
rest/rest-tests.ts
rest/rest.d.ts
-----------------------------------------------------------------------------
Removed files
-----------------------------------------------------------------------------
no files listed here
-----------------------------------------------------------------------------
Interesting files
-----------------------------------------------------------------------------
angular-local-storage/angular-local-storage-tests.ts
angular-local-storage/angular-local-storage.d.ts
rest/rest-tests.ts
rest/rest.d.ts
not mapped? -> /Users/hoge/Projects/Fork/DefinitelyTyped/when/when
-----------------------------------------------------------------------------
Queued for testing
-----------------------------------------------------------------------------
angular-local-storage/angular-local-storage-tests.ts
angular-local-storage/angular-local-storage.d.ts
rest/rest-tests.ts
rest/rest.d.ts
=============================================================================
DefinitelyTyped Test Runner 0.5.0
=============================================================================
Typescript version: 1.3.0
Typings : 2
Tests : 2
TypeScript files : 4
Total Memory : 16384 mb
Free Memory : 3650 mb
Cores : 4
Concurrent : 3
============================== Syntax checking ==============================
..
-----------------------------------------------------------------------------
Elapsed time : ~0.827 seconds (0.827s)
Successful : 100.00% (2/2)
Failure : 0.00% (0/2)
=============================== Typing tests ================================
..
-----------------------------------------------------------------------------
Elapsed time : ~0.862 seconds (0.862s)
Successful : 100.00% (2/2)
Failure : 0.00% (0/2)
=============================== Header format ===============================
..
-----------------------------------------------------------------------------
Elapsed time : ~0.002 seconds (0.002s)
Successful : 100.00% (2/2)
Failure : 0.00% (0/2)
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
Total
-----------------------------------------------------------------------------
Elapsed time : ~2.452 seconds (2.452s)
Syntax error : 0.00% (0/2)
Failed tests : 0.00% (0/2)
Invalid header : 0.00% (0/2)
Without tests : 0.00% (0/2)
-----------------------------------------------------------------------------
```
## 9. Commit & Push
とりあえずなんとなくテストが通ってそうな予感がしたところで、Forkしたリポジトリにコミット＆プッシュしちゃいます。
![スクリーンショット 2014-12-18 23.41.00.png](https://qiita-image-store.s3.amazonaws.com/0/38528/c3a20780-bdb8-d0f8-e5fe-d3144a90b3ff.png)

## 10. Push結果確認
Pushが完了したところでGithubの自分のForkしたリポジトリを見ると以下のように「Compare & pull request」という項目が増えているのがわかります。
![スクリーンショット 2014-12-18 23.42.17.png](https://qiita-image-store.s3.amazonaws.com/0/38528/a438f38c-5f47-229e-b1be-43858aca6bae.png)

## 11. Pull Requestの作成
迷わず「Compare & pull request」をクリックしてタイトルを「add ライブラリ名 definition file」みたいな感じでpull requestを作成しましょう。
![スクリーンショット 2014-12-18 23.42.31.png](https://qiita-image-store.s3.amazonaws.com/0/38528/0e267e79-ff0f-563e-8089-6142850c8fb5.png)

## 12. Pull Requestの確認
pull requestが完了したところで本家の「pull request」一覧を観に行くと、ちゃんとpull requestが作成されていることがわかります。右側の印はTravis CIにてビルドがちゃんと通ったかどうかを教えてくれます。アクセスするのが早過ぎると下の画面みたいに「ビルド中…」のマークがつきます。
![スクリーンショット 2014-12-18 23.43.19.png](https://qiita-image-store.s3.amazonaws.com/0/38528/b9c6debe-40d7-a20a-c23b-eb98b77985a2.png)

ちょっとしてからリロードするとちゃんとビルドが通っていることが確認できて一安心。後は本家にマージするのを待つだけです。
![スクリーンショット 2014-12-18 23.43.26.png](https://qiita-image-store.s3.amazonaws.com/0/38528/48cf0ff2-fa64-af8e-c863-e73416942b29.png)

## 13. マージ完了メールの確認
何日かしたらvvakameさんからマージ完了のメールと共に「@kenfdev（私のユーザ名） thanks mate!」 みたいなメールを受け取ることができます。

## 14. TSDで定義ファイルのインストール確認
上記全て完了するとTSDというTypescript Definition Managerで自分の作ったライブラリがインストールできるようになります。例えば以下のコマンドで今回の定義ファイルはインストールできます。

```shell-session
tsd query angular-local-storage --action install
```