ionic + TypeScript で今風な開発フローを実現【型定義ファイル活用編】

2016年03月16日
TypeScript_Logo

この記事は ionic + TypeScriptで今風な開発フローを実現 の第2回にあたります!他の記事は↓です。

ionic + TypeScript で今風な開発フローを実現【導入編】にてTypeScriptの導入に成功したところで、次のステップに進みたいと思います。

npm run watch を叩くと↓のようなエラーが出ていると思います。

これはTypeScriptが TypeScript -> JavaScript する際に型チェックを行うのですが、その際に型エラーを報告してます。いわゆるコンパイルエラーです。 Java とか C# のような静的型付け言語なら見覚え、聞き覚えがあるはずです。 TypeScript が普通の静的型付け言語と違うところは、コンパイルエラーが出ても がんばってJavaScriptを出力する点 です。なので、前回は ionic serve を叩いてちゃんとアプリケーションが起動しました。では、今回はこのコンパイルエラーを解消しましょう!

型定義ファイル(d.ts)

はじめに

TypeScript で、自分で書いたコードには基本的には型情報があるはずなので、気をつけていればコンパイルエラーにはならないはずです。ただし、 JavaScript は様々なライブラリを一緒に使うことがほとんどです。他のライブラリが TypeScript で書かれている、なんてことはまだまだ少数です。だけど、これら外部ライブラリに型情報が無かったら TypeScript の旨味が大部分なくなってしまう!型チェック&コードの自動補完による開発効率の向上は結構侮れないです。どうにかならないの!?ってなとこで登場するのか 型定義ファイル(d.ts) です。これは、外部ライブラリのAPI群の型定義だけまとめたファイルです。 実際のJavaScriptにはコンパイルされず 、本当に型情報を使えるようにする為だけに使うファイルです。「誰がそんなもの用意してくれてるの!?」と思うでしょうけど、「誰か」が用意してくれています(笑)。というのも GitHub 上で型定義ファイルが大量に管理されており、オープンソースで世界中の人々によってメンテされているのです。今のところその中枢となるリポジトリが DefinitelyTyped です。最近になって typings という仕組みが出てきたので、 DefinitelyTyped 一択というのは近い将来に無くなるのでは無いでしょうか。(この件については深く触れません)

型定義ファイルの取得

では、型定義ファイルはどうやって取得するのか。そこで登場するのが先ほどちょっと述べた typings です。深くは知らなくていいです。とにかくこの人が GitHub 上から型定義ファイル(d.ts)を取得してきてくれるって覚えていたらOKです。

typings インストール

typingsnpm でインストールできます。

型定義ファイルの入手

何を入手しないといけないのか考えて見ましょう。今コンパイルエラーで出ている内容は↓の5種類です。

とりあえず angular は確実に必要なので、 typings に定義ファイルがあるか探してみましょう。 typings search コマンドがあるので使ってみましょう!

こんなのが出てくると思います↓

angular という型定義ファイルが存在していることが確認できます。さっそくインストールしてみましょう!

型定義ファイルも↓のような感じにインストールされているのが確認できます。

執筆時点での angular.d.tsJQuery に依存しているので、 jquery の型定義ファイルもインストールしておきましょう!

説明すると色々と長くなる(既に長くなってるけど)のですが、Nodeというよりはブラウザ用に今回の型定義ファイルを使うので、 browser.d.ts をベースとした、 browser 系の型定義を使うように tsconfig.json を編集しておきます。

ここで npm run watch を再び実行してみましょう。 angular 系のエラーがなくなったのが確認できると思います。
次に目立つのは cordova 系のコンパイルエラーなので、上と同じような手順で cordova 関連の型定義ファイルをインストールします。

ここまで来て npm run watch を実行するとコンパイルエラーが解消しているはず!

ionic serve を叩いてまだアプリケーションが正常に起動できていることを確認しましょう!

まとめ

基本的に有名なライブラリには誰かが作った型定義ファイルが既に存在しているので、まずはとにかく typings search で型定義ファイルを検索です。ようやくTypeScriptらしいワークフローが出来上がってきました。次回webpack の力も借りて transpile と同時に concat してみましょう!

  • [x] コンパイルエラーが出ている
  • [ ] コンパイル後のファイルが複数ある
  • [ ] ブラウザでデバッグしづらい
  • [ ] 型をまるで使っていない

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です