TypeScriptの概要、Macへのインストール、チュートリアル

Microsoftが開発しているいわゆるaltJSというJavaScriptのコードを生成する言語。オープンソース。再利用や規模の拡大に耐えうるコードを書くのにはJavaScriptはいくらか機能が不足していたり、分かりにくいイディオムに頼らねばならない。そこで利用するのがaltJSである。

- TypeScriptの利点や欠点。環境の構築方法がしっかりと解説してある

上記で勉強する。

sudo npm i -g typescript

palantir/eclipse-typescript · GitHub を開いて、指示に従う
同様に、JavaScript用のプラグイン[JavaScript Developer Tools. http://download.eclipse.org/releases/kepler/ ]が入っていなければインストールする(EclipseがKepler以外の場合はそれに応じたものをインストール)

[Project Explorer]の余白をダブルタップ>[New]>[Project]>[General]>[Project]でプロジェクト作成
[Eclipse]メニュー>[環境設定(Preferences)]を開く
[TypeScript]欄を選択して、[Node path]欄にnodeへのパスが入力されていることを確認。なければ、ターミナルで「which node」として表示されるパスを入力する
[TypeScript]項目を開いて、[Compiler]を選択
[Compile all TypeScript on build]にチェックを入れる
[Apply]して閉じる。ウィンドウが表示されたら[Yes]を選択
プロジェクトを右クリックして、[Configure]>[Enable TypeScript Builder]を選択
[Project]メニュー>[Build Automatically]にチェックを入れる

以上で準備完了。

以上で保存したタイミングでtsファイルがビルドされ、jsファイルが出来上がる。

コードを書くと、varなどに[The word 'var' is not correctly spelled]などと表示される。エラーと紛らわしいのでスペルチェックを無効にする方法を示す。
Eclipse warning message: the word 'var' is not correctly spelled · Issue #82 · palantir/eclipse-typescript · GitHub

[Eclipse]->[環境設定(Preferences)]->[General]->[Editors]->[Text Editors]->[Spelling]を開く
[Enable spell checking]のチェックを外す

以上でスペルチェックが無効になる。[Use defined dictionary]にテキストファイルを作成して追加することも可能だが、変数名などでもチェックが入ると煩わしいので、チェックを無効にするのがよさそう。

型定義(Type Annotation)を省略して、型推論をさせた際にanyが選ばれるとエラーの温床になる。anyは自由度が高い反面、型のチェックをすり抜けてしまうため、明示的に宣言された場合以外は利用しない方が安全である。

ビルド時に、anyへの型推論をエラーにする設定をいかに示す。

Eclipseでは、[Eclipse]>[環境設定(Preferences...)]を開いて、[TypeScript]>[Compiler]を選択し、[Raise error on expressions and declarations with an implied 'any' type]にチェックを入れる
tscでは--noImplicitAnyを付加する

Tutorial - Welcome to TypeScript を開いて、greeter.tsを入力
入力して保存したら、[Build Project]でビルド
ビルドが完了したら、greeter.jsが出来上がる。これがTypeScriptの最小限の動作
引き続き、次のサンプルに書き換える
エラーが発生。関数の引数が１つなのに対して、引数が配列のため、TypeScriptではエラーとなっている
注意点として、このようなエラーが発生しても、TypeScriptはJavaScriptのコードを生成すること。エラーが発生している場合は想定外の挙動になることが予想されるので取り扱いに気をつける
TypeScriptでは、interfaceという構造体が使える。これでデータの型を定義して、キーと値のセットで引数に渡すことができる
ECMAScript6で提案されているClassが使えるので、最後に使ってみる
Studentクラスを作成して、コンストラクタといくつかの公開フィールドを定義する
Classは、JavaScriptで同様に振る舞うように変換される
htmlを作成して、scriptでgreeter.jsを読み込めば、作成したプログラムの結果が表示される

tanaka's Programming Memo