AngularJS も採用しているTypeScriptをはじめよう！

はじめに

エンジニアの方なら、一度はAngularJSの名前を聞いたことがあるでしょう。非常に人気のあるJavaScriptフレームワークのひとつで、Googleが開発をしています。

AngularJSは当初JavaScriptで開発されていましたが、次期バージョンである2.0からコードベースをTypeScriptに変更しました。2016年時点では、コードベースの96.5％がTypeScriptで占められています。最終的にJavaScriptで提供されるとはいえ、コードベースで採用しているTypeScriptを知っておくと何かと役に立ちます。

この記事では、TypeScriptをはじめてみようと思っているエンジニアの方のために、TypeScriptの概要とメリット・デメリット、はじめかたについてお伝えしていきます。AngularJS 2.0も正式リリースされました。これからTypeScriptをはじめてましょう。

TypeScriptはどんな言語なのか？

公式サイト：https://www.typescriptlang.org/
GitHubリポジトリ：https://github.com/Microsoft/TypeScript

TypeScriptは、マイクロソフトが開発しているオープンソースのAltJS言語（JavaScript代替言語）です。AltJS言語とは、JavaScriptの欠点を補うために開発された言語の総称で、通常はAltJS言語で書かれたコードをJavaScriptにコンパイルして使います。類似の言語には、DartやCoffeeScriptがあります。JavaScriptのスーパーセットとして定義されているTypeScriptでは、すべてのJavaScriptコードはTypeScriptとしても有効です。JavaScriptにはない、クラス定義や静的型付けを備えています。他にもECMAScript標準や独自に拡張された部分があり、そういった部分についてはコンパイル時に一般的なJavaScriptコードに変換される仕組みです。

TypeScriptのメリット

既存のJavaScriptコードを活用できる

長らくJavaScriptの時代が続いてきたこともあり、既存のJavaScript資産を活用したいと思うのは当然のことです。その辺りもTypeScriptでは考慮されており、「型定義ファイル」という特殊なファイルを用意することで既存のJavaScriptを扱えるようになります。jQueryをはじめとする有名なライブラリであれば、自分で型定義ファイルを作成する必要はありません。「DefinitelyTyped」というリポジトリから、既存の型定義ファイルを入手することができます。通常は、Nugetなどのパッケージマネージャーで入手して管理したほうがよいでしょう。

ECMAScript標準を先取りできる

ECMAScript 2015（ES6）が標準化されてからも、JavaScriptの進化は続いています。しかしながら、すぐには対応ブラウザが普及することはなく、標準化されても活用できるまでには時間がかかります。TypeScriptでは、ECMAScript標準を先行して取り入れており、先進的な機能を使うことができます。コンパイルすると一般的なJavaScriptに変換されるため、互換性の心配をする必要もありません。また、インターフェイスやジェネリックなど独自の拡張も目玉のひとつです。

型に関するエラーが少なくなる

動的型付けのJavaScriptとは違い、静的型付けのTypeScriptでは、型に関するエラーにコンパイル時に気づくことができます。そのため、実行時に型エラーが発生することが少なくなります。型エラーは、JavaScriptで頭を悩ます原因のひとつなので、コンパイル時にチェックしてくれるというのは安心できますね。リアルタイムにチェックしてくれるエディターではコンパイルする必要もありません。

大規模なプロジェクトでもコードが整理しやすい

AltJSが生まれた背景のひとつには、JavaScriptに大規模開発に対応できるだけの機能がたりないことが挙げられます。TypeScriptでは、クラス定義や名前空間、モジュールなど大規模開発に役立つ機能が搭載されており、コードベースが拡大しても対応できるのです。AngularJSがTypeScriptに移行した理由のひとつでしょう。

TypeScriptのデメリット

構文がちょっと変わっている

JavaScriptのスーパーセットとして定義されたためか、一風変わった構文になっています。機能が豊富なので、JavaScriptに似ているとはいえ習得には時間を要することでしょう。人によってはあまり好きになれないかもしれません。型推論を活かして、すっきりしたコードを書くように心がけましょう。

小規模な開発では手間のほうが大きくなることもある

TypeScriptの利便性は無償で得られるものではなく、型定義やコンパイルなどJavaScriptでは必要のない作業が発生します。そのため、規模が小さいプロジェクトではあまりTypeScriptの恩恵にあずかれないかもしれません。普通にJavaScriptで書いたほうが早い場合もあります。

型定義ファイルを用意するのが面倒くさい

多くの型定義ファイルをリポジトリから入手することができますが、当然のことながら独自のライブラリやマイナーなライブラリには既存の型定義ファイルがありません。そのため、自分で作成することになります。型定義ファイルの作成は、簡単に言うと公開されているメンバーの型を書いていくだけなので、比較的単純な作業です。しかし、大きなライブラリではかなり面倒な作業になります。

TypeScriptのはじめかた

TypeScriptのコンパイラは、Node.jsのパッケージとして提供されています。普段からNode.jsを使っている方なら、npmを使ってインストールすることが可能です。しかしながら、毎回手動でコンパイルするのは面倒なので、Visual StudioなどのIDEを使うことをおすすめします。下記のように、主要なエディター向けのプラグインが提供されています。お使いのエディターに取り入れてみましょう。

ダウンロードページ：https://www.typescriptlang.org/#download-links

まとめ

TypeScriptを本格的にはじめてみる気になった方は、公式サイトのドキュメントを一読することをおすすめします。英語ですが、非常にわかりやすくまとまっています。まずは、チュートリアルを試してみるとよいでしょう。「わざわざ環境を用意するのが面倒だ」という方は、公式サイトにある「Playground」を使いましょう。ブラウザだけで簡単にTypeScriptを試すことができますよ。JavaScriptにコンパイルされた結果も表示されるので、どう変換されるかが一目瞭然です。これからTypeScriptはJavaScriptとともに成長していくことでしょう。あなたはTypeScriptにどんな印象を持ちましたか？

---

本ブログは、Git / Subversionのクラウド型ホスティングサービス「tracpath(トラックパス)」を提供している株式会社オープングルーヴが運営しています。

エンタープライズ向け Git / Subversion 導入や DevOps による開発の効率化を検討している法人様必見！

「tracpath(トラックパス)」は、企業内の情報システム部門や、ソフトウェア開発・アプリケーション開発チームに対して、開発の効率化を支援し、品質向上を実現します。
さらに、システム運用の効率化・自動化支援サービスも提供しています。
”つくる情熱を支えるサービス”を提供し、まるで専属のインフラエンジニアのように、あなたのチームを支えていきます。