プログラミング

2016.9.21 2016.11.15

TypeScriptをさわってみる

タグ:, ,

こんにちは!
サビラのPG担当のにっさんです。

今年に入ってから、AngularJSの開発を行っていると、ちらほらと「TypeScript」なる言語によく出会ったりしたので、興味がてら軽く触れていきたいと思います。

TypeScriptとは?

c8b96193a0b22528798ea6a5738bc6ac

TypeScript

TypeScript はマイクロソフトによって開発されたフリーでオープンソースのプログラミング言語である。TypeScript は JavaScript に対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えたスーパーセットとなっている。C# のリードアーキテクトであるアンダース・ヘルスバーグが TypeScript の開発に関わっている。
TypeScript は大規模なアプリケーションの開発のために設計されており、コンパイルすると JavaScript のソースコードを出力する。
TypeScript は型定義ファイルをサポートしており、既存の JavaScript ライブラリを型情報を付与して利用できる。

参照元:TypeScript – Wikipedia

簡単に、「マイクロソフトが開発したオープンソースのJavaScript」と言えばいいのでしょうか。
それって・・・ J..Sc..ript? と勘違いされそうですが、詳しくはエライ人に聞いてください。(Google先生とか)

JavaScriptとの違い

TypeScriptと、JavaScriptとの違い

Javascriptとの違いで、個人的に「おおー!」と思ったものとして、

  • クラス
  • ラムダ式
  • 静的型付け
  • デフォルト引数
  • オプション引数

といったC#やVB.NET、Java等を触っていると、JavaScriptにも欲しいなー!と思う機能がTypeScriptの特徴だと思います。
とはいっても、TypeScriptで書いてもコンパイルすると、JavaScriptになってしまいますが・・・

てことは、普通にJavaScriptで出来るのか!というツッコミはなしにして、まずは「クラス」を扱ってみたいと思います。

インストールやIDEの設定等時間がかかるため、簡単にコードが書けるPlaygroundでさわっていきたいと思います。

TypeScript Class編

まずは、簡単に作ったクラス。
単にアラートを出します。

宣言・コンストラクタ

クラスの宣言はこんな感じ。

次に、内部変数とコンストラクタ。

「private」「protected」「public」のアクセス修飾子が使えますが、省略するとpublic扱いになるようです。変数の型宣言として「変数名: 型」の形になります。
上記は、privateでstring型で初期値に「Hello World」という文字列を設定したstrHelloという変数になります。

複数のコンストラクタを宣言していますが、最初は抽象コンストラクタを作成して、実装部でコンストラクタを実装します。
上記は、引数が無い場合もあるかもしれないし、引数にstring型を持つ場合もあるかも?というように「?」を付けて、引数が省略されるかもという意味になります。

アクセサ

宣言・コンストラクタの箇所でも書きましたが、型宣言はfunctionの戻り値でも同じようにします。

「function名: 戻り値の型」
ここでのポイントは、内部変数にアクセスする場合は、必ず「this」でアクセスしてください。省略するとコンパイルエラーになります。

クラスメソッド

書き方としては特に注意すべきことは無いのですが、上記は引数のデフォルト値を設定しています。

また、このメソッドではまったく意味を持ちませんが「let」の扱いについて。
基本的に「var」と同じ扱い方になりますが、スコープが決定的に違います。
例として下記のTypeScriptをPlayground等で実行してみてください。

ifの中と外で「let」と「var」の挙動がわかると思います。
「var」だと変数名が被った場合、意図しない動作が起きてしまうので、「let」は積極的に使っていきたいですね。

クラスを使ってみよう!

もうここは説明無くてもいいですよね!
getter / setter がプロパティみたいな扱いになってることに注意です。

TypeScriptの感想

C#を扱ってる身として、TypeScriptは扱い易い気がしますが、ここで取り上げているのは、全然序の口というか入門受付みたいなレベルです。

Angular2.0がTypeScriptで書かれていたりするので、Angularのコントローラやサービスといったものが作りやすくなる??と思っています。

また、JavaScriptの知識があまり無くても、C#やJava等がベースとして身についていれば、すんなり入っていけそうです。

今後ふれあう機会が多くなりそうな言語ですね!

クラス編となっているけど、次回はあるのかな・・・