読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

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

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

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

上記で勉強する。

TypeScriptを候補にした理由

  • 変数を隠蔽するなどの特殊なイディオムを自動的に生成してくれる
  • JavaScriptからの乖離が少なく、JavaScriptの欠点も確認することができそう
  • 次のJavaScriptの仕様であるECMA Script6との融和性。2015年時点で勉強するのに向いていそう

気になっている点

  • JavaScriptの欠点はそのままなので、JavaScriptの仕様を知っていることが前提となること
  • ロジックの組み立てミスの調査が、ネイティブと比較して楽になるか
  • ビルドで高速化などがされないのでなんとなく損した気分

Mac用の開発環境をEclipseで作る

Welcome to TypeScriptTypeScriptリファレンス Ver.1.0対応より

  • Node.jsがインストールされていることを前提とする
  • ターミナルを起動して以下を入力
sudo npm i -g typescript
  • 以上で、tsc ファイル名.tsでビルドできる

Eclipseeclipse-typescriptプラグインをインストール

EclipseでTypeScriptのプロジェクトを作成

  • [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]にチェックを入れる

以上で準備完了。

TypeScriptファイルの作成とビルド

  • 作成したプロジェクトを右クリック>[New]>[File]でファイルを作成して、TypeScriptのコードを入力する
  • 保存

以上で保存したタイミングで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]にテキストファイルを作成して追加することも可能だが、変数名などでもチェックが入ると煩わしいので、チェックを無効にするのがよさそう。

anyへの推論をエラーにする設定

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