1,023 views
3

javascriptもコンパイルの時代。typescriptを使ってみた

どうも!nodejsの勉強がおろそかになってきている古賀です。
前回はwebpackを使って簡単な構成とサンプルについて記載しましたが、
今回はtypescriptを使用した内容についてまとめました。

typescriptとは?

typescriptで検索すると早速いいものが見つかりました!

TypeScript はマイクロソフトによって開発されたフリーでオープンソースのプログラミング言語である。

※wikipediaより
マイクロソフトが開発しているのはとても安心できますよね。
2015年にECMAScript6が策定され、各ブラウザのjavascriptでの新機能の実装が進んでいます。

各ブラウザの実装状況はこちらで確認できます。

typescriptについて詳しくは、公式サイトを参考にしてみてください。

typescriptのインストール

typescriptのインストールはnpmコマンドで簡単にインストールできます。
※macを使用しているのでwindowsの方はごめんなさいm(_ _)m macでのインストール方法を記載しています。
インストールは全てターミナルから行います。

※npmをインストールしていない場合は前回の記事を参考にインストールしてください。

コンパイルツールのインストール

typescriptのまま使用できればいいのですが、ブラウザで使用できるようにするためには、javascriptのコードに変換しなければいけません。
そこでwebpackの出番です!!
typescriptをjavascriptのコードに変換してくれるパッケージがあるのでインストールしていきます。

コンパイルツールの設定

インストールしたts-loaderは設定ファイルが必要なため、tsconfig.jsonを作成します。

tsconfig.json

wabpack.config.jsonの設定

wabpack.config.jsonのloadersに下記を追加します。
これを記載することで「.tsファイル」をコンパイルする際にts−loaderを使用します。
ということをwebpackに伝えています。

また、コンパイル対象のファイルも変更します。
entryのmain.jsをmain.tsへ変更します。

対象ファイルの変更

前回作成したmain.jsをmain.tsに変更します。
また、ファイル内の書き方もjavascriptからtypescriptへ変更します。

型定義管理ツールのインストール

typescriptのコードでjqueryなどのプラグインを使用できるようにしてくれるパッケージもインストールします。これらは、型定義ファイルと呼ばれています。
javascriptのプラグインであるjQuereyで例えると、「$」と言う変数をグローバル変数として定義してjQuery独自のメソッドなどを使用できるようにしています。
しかし、typescriptでは「$」と言う変数が何なのか?が定義されていないため、そのまま使用することができません。
独自で型定義ファイルを作成する方もいるかもしれませんが、最初からは難しいため、配信されているツールを使用した方が早い(笑)
と言うことで、それら型定義ファイルを管理してくれるtypingsをインストールします。

※グローバルにインストールせず、ローカルインストールをしています。

インストール確認として、typescript、ts-loader、tyingsをインストールしたpackage.jsonを確認します。

型定義ファイルのインストール

ローカルインストールしているので、下記のコードでインストールする事になります。実行する場合は、package.jsonがある同じ階層で実行してください。

初期化

※typings.jsonを作成してくれます。
※typings.jsonがある場合は、そこに記載しているファイルをインストールします。

インストール

※–saveオプションは、npmと同じで、インストールしたものをtypings.jsonに保存してくれます。
※–globalオプションは、モジュールのインストール時に必要なようです。

詳しくは、こちらを確認してみてください。

インストール後のtypings.json

コンパイルの実行と確認

実行は、npm-scriptsを使用します。

確認は前回作成したhtmlをブラウザで開いて確認します。
前回同様にクリックするとアラート画面が表示されればOKです!

次回予告

次回はfacebook製のreactを使ってみたいと思います!

angular.jsやaurelia.jsなども検討していたんですが、
angular.jsは2出るらしい!ということで、それが落ち着いてから。。。
aurelia.jsはフレームワーク的なもので覚えるのが大変そう。。。
ということで、nodejsやtypescriptの経験がない自分にはハードルが高いなーということもあり、プラグイン的な感じで使えるものを検討していました。
vue.jsが良さそうだなーと思っていたんですが、babelとの相性が良い作りになっているようで、今回はtypescriptとの相性の良いreactを使うことにしました。
facebookが作って実際使っているというので安心感はありますよね

シェアする

プロフィール

T K Lv 30

エンジニアに憧れる街人

HP : 10 /10

SP : 0 /0

最近、splatoonを買いました!(笑)

▼ おすすめ記事

  • 開発の謎

    PARTITIONでDBのデータをまるっと消しちゃおう

  • 開発の謎

    ゲームプランナーのお仕事

  • クリエイティブ・オブ・ゴッド

    【第五回】21歳ぴちぴち新社会人が語る★アニメ映画の本気を見た「”傷”物語②」

  • 開発の謎

    北京の体験談(インターネット・ビジネスの違い編)