ionic + TypeScript で今風な開発フローを実現【TypeScript編】

2016年03月28日
TypeScript_Logo

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

前回までの記事でデバッグまでの開発フローが完成しました。それではやっとこさ TypeScript の力を体感できるところまで来たので、今回はがっつり TypeScript を触っていきましょう!

構文解析とLinter

まず、現状ではコードの何が悪いのかわかりづらいので、 tslint という Linter を使いたいと思います。 Linter は、設定ファイルに基づいた構文解析をしてくれて、設定に違反したコードを書いている場合に「ここ間違ってるよ!」みたいなことを教えてくれる超親切な人(ツール)です。 tslint 用の preloaderwebpack にはあるので、それをまずインストールしましょう!

tslint-loaderインストール

tslintwebpack.ts -> .jstranspile する度に Lint してくれるように、webpackpre-loader として設定します。

この時点で一度 transpile してみましょう!

特にエラーが出ていなければOKです。

tslint.json

さて、この時点ではまだ Lint は何もやっていません!というのも、上に述べた 設定ファイル をまだ作っていないからです。やり方はいくつかあるのですが、今回は無難に tslint.json という設定ファイルを作成します!プロジェクトのディレクトリ直下に↓の内容で作成しましょう。

細かい中身については特に解説しませんが、とにかく↑の内容のルールを守ってコードを書かないと、 tslint に怒られるという仕組みです。これはチームでコーディングする時などにすごく便利で、ある一定のルールに則ったコードをチームで作ることが可能になるんです。(これが無いとチーム内でコードの書き方がバラバラになって、他人のコードを見た時にげんなりしてしまう、なんてことも起きたりしかねません)。

Lint!

それでは tslint さんに Lint してもらいましょう!

WARNING がたくさん出たと思います!(環境によって違いますが)黄色でわかりやすく、現在のコードでルールを守ってない箇所が列挙されています!ざっくりみた感じだと、 expected parameter: '<パラメータ名>' to have a typedef というエラーが多いと思います。これは、先ほどの tslint.json に、「 function の引数には必ず型情報が必要」、というルールを入れているからです。
では、さっそく注意されている箇所を修正していきましょう!

と、言いたいところですが、この 注意 をいちいちConsoleで確認するのって面倒くさいですよね?プログラミングしながら、ルール破ったらすぐ教えてくれる方が絶対効率良いですよね?しかもそんなことが無料でできたら良いですよね???

できるんです!

色々なエディタでできますが、元々 .NET 育ちな私としてはやっぱり Microsoft 製の Visual Studio Code が目につきます。しかも割りと好評(なはず)。

Visual Studio Code

インストール

Visual Studio Code はこちらからインストール可能です。

Extensionのインストール

Visual Studio Codeがインストールできたら tslint 用のExtensionをインストールしましょう! Command Paletteを開いて(ショートカットは Command + Shift + P) install と入力すれば Extensions:Install Extension という項目が出てくると思います!

01_vscode

決定後、ちょっと待っているとインストール可能な Extension のリストが出てくると思います。ここでさらに tslint と入力しましょう。そうすると TSLint for Visual Studio Code が出てくるので、これをインストールします!

02_vscode

インストール後に再起動を促されるので、 Visual Studio Code を再起動します。

エディタ上でLint!

↑の手順まで完了すると、 Visual Studio Code を起動し、ルールを破っているファイルを開くと、目印がエディタ上に出ているのが確認できるはずです!

03_chats_service_ts_-_ionic-typescript

そうなんです、 tslint Extensionを入れたことで、リアルタイムに tslint がコードの誤りを指摘してくれるんです。これ、本当に便利なんですよ。

いざ、リファクタ!

それでは、道具が揃ったところでTypeScriptらしくリファクタをしていきましょう!結構がっつり色々やらないといけないので、スクリーンキャストで録りました↓(2倍速くらいで見ることをおすすめします)

ionic + TypeScriptで今風な開発フロー【TypeScript編】1/4

ionic + TypeScriptで今風な開発フロー【TypeScript編】2/4

ionic + TypeScriptで今風な開発フロー【TypeScript編】3/4

ionic + TypeScriptで今風な開発フロー【TypeScript編】4/4

いかがでしたか!?これで TypeScriptionic を組み合わせたちょっぴり今風な開発フローが完成しました!まだまだ改善点はありますが、それはまたの機会にまた触れていけたらと思います!

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

コメントを残す

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