この記事は ionic + TypeScriptで今風な開発フローを実現 の第2回にあたります！他の記事は↓です。
- ionic + TypeScript で今風な開発フローを実現【導入編】
- ionic + TypeScript で今風な開発フローを実現【型定義ファイル活用編】
- ionic + TypeScript で今風な開発フローを実現【module, concat編】
- ionic + TypeScript で今風な開発フローを実現【sourcemap編】
- ionic + TypeScript で今風な開発フローを実現【TypeScript編】
ionic + TypeScript で今風な開発フローを実現【導入編】にてTypeScriptの導入に成功したところで、次のステップに進みたいと思います。
npm run watch を叩くと↓のようなエラーが出ていると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
ERROR in [default] /ionic-typescript/src/app/app.ts:8:0 Cannot find name 'angular'. ERROR in [default] /ionic-typescript/src/app/app.ts:14:15 Property 'cordova' does not exist on type 'Window'. ERROR in [default] /ionic-typescript/src/app/app.ts:14:33 Property 'cordova' does not exist on type 'Window'. ERROR in [default] /ionic-typescript/src/app/app.ts:14:59 Property 'cordova' does not exist on type 'Window'. ERROR in [default] /ionic-typescript/src/app/app.ts:15:6 Cannot find name 'cordova'. ERROR in [default] /ionic-typescript/src/app/app.ts:16:6 Cannot find name 'cordova'. ERROR in [default] /ionic-typescript/src/app/app.ts:19:15 Property 'StatusBar' does not exist on type 'Window'. ERROR in [default] /ionic-typescript/src/app/app.ts:21:6 Cannot find name 'StatusBar'. ERROR in [default] /ionic-typescript/src/app/controllers.ts:1:0 Cannot find name 'angular'. ERROR in [default] /ionic-typescript/src/app/services.ts:1:0 Cannot find name 'angular'. |
これは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 インストール
typings は npm でインストールできます。
|
1 2 3 |
# typingsコマンドをグローバルインストール npm install -g typings |
型定義ファイルの入手
何を入手しないといけないのか考えて見ましょう。今コンパイルエラーで出ている内容は↓の5種類です。
|
1 2 3 4 5 6 |
Cannot find name 'StatusBar'. Cannot find name 'angular'. Cannot find name 'cordova'. Property 'StatusBar' does not exist on type 'Window'. Property 'cordova' does not exist on type 'Window'. |
とりあえず angular は確実に必要なので、 typings に定義ファイルがあるか探してみましょう。 typings search コマンドがあるので使ってみましょう！
|
1 2 3 |
# ambientオプションはおまじないだと思って下さい typings search angular --ambient |
こんなのが出てくると思います↓
|
1 2 3 |
NAME SOURCE HOMEPAGE angular dt http://angularjs.org |
angular という型定義ファイルが存在していることが確認できます。さっそくインストールしてみましょう！
|
1 2 3 4 5 6 7 8 9 10 11 |
# typings.jsonに保存しておけるように --save を忘れずに！ typings install angular --ambient --save # typings.jsonをcatしたらちゃんとインストールされているのが確認できます cat typings.json { "ambientDependencies": { "angular": "registry:dt/angular#1.5.0+20160310153852" } } |
型定義ファイルも↓のような感じにインストールされているのが確認できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
typings ├── browser │ └── ambient │ └── angular │ └── index.d.ts ├── browser.d.ts ├── main │ └── ambient │ └── angular │ └── index.d.ts └── main.d.ts |
執筆時点での angular.d.ts は JQuery に依存しているので、 jquery の型定義ファイルもインストールしておきましょう！
|
1 2 |
typings install jquery --ambient --save |
説明すると色々と長くなる(既に長くなってるけど）のですが、Nodeというよりはブラウザ用に今回の型定義ファイルを使うので、 browser.d.ts をベースとした、 browser 系の型定義を使うように tsconfig.json を編集しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "compilerOptions": { "target": "es5", "module": "commonjs" }, "exclude": [ "node_modules", "bower_components", "www/lib", "platforms", "typings/main.d.ts", "typings/main/" ] } |
ここで npm run watch を再び実行してみましょう。 angular 系のエラーがなくなったのが確認できると思います。
次に目立つのは cordova 系のコンパイルエラーなので、上と同じような手順で cordova 関連の型定義ファイルをインストールします。
|
1 2 3 4 5 6 |
# cordova typings install cordova --ambient --save typings install cordova-ionic --ambient --save typings install cordova-ionic/plugins/keyboard --ambient --save typings install cordova/plugins/statusbar --ambient --save |
ここまで来て npm run watch を実行するとコンパイルエラーが解消しているはず！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[ionic-typescript] npm run watch 23:57:37 ☁ master ☂ ⚡ ✭ > ionic-typescript@1.1.1 prewatch /ionic-typescript > npm run clean > ionic-typescript@1.1.1 clean /ionic-typescript > rimraf ./www/js/* > ionic-typescript@1.1.1 watch /ionic-typescript > webpack --config webpack/webpack.dev.js --watch Hash: 6563c7db425d14f864ed Version: webpack 1.12.14 Time: 1908ms Asset Size Chunks Chunk Names app.js 4.05 kB 0 [emitted] app controllers.js 2.27 kB 1 [emitted] controllers services.js 2.82 kB 2 [emitted] services + 3 hidden modules |
ionic serve を叩いてまだアプリケーションが正常に起動できていることを確認しましょう！
まとめ
基本的に有名なライブラリには誰かが作った型定義ファイルが既に存在しているので、まずはとにかく typings search で型定義ファイルを検索です。ようやくTypeScriptらしいワークフローが出来上がってきました。次回は webpack の力も借りて transpile と同時に concat してみましょう！
- [x] コンパイルエラーが出ている
- [ ] コンパイル後のファイルが複数ある
- [ ] ブラウザでデバッグしづらい
- [ ] 型をまるで使っていない
