- 作者: わかめまさひろ,井上章,丸山弘詩
- 出版社/メーカー: インプレスジャパン
- 発売日: 2014/05/16
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (2件) を見る
読んだ際の備忘録。
スコープはJavaScriptと同じ
- スコープは関数のみ
- for文などのブロック内のスコープはない
anyの注意
var a: any = "test"; var b: number = a;
以上のコードはビルド時にも実行時にもエラーは発生しない。JavaScriptに変換したコードは以下のとおり。
var a = "test"; var b = a; console.log(b);
TypeScriptの型が有効なのはコンパイルされるまでであり、JavaScriptに変換されると型情報は消えてしまう。TypeScriptの仕様に沿うようなプログラムが生成されるわけではない。
配列の型
オブジェクトへの後でのプロパティの追加は不可
- プロパティ名間違いを防ぐのには良い仕様
オブジェクトリテラルでプロパティに型指定ができるか?
特殊な値の型
- 無限大のInfinity、負の無限大の-Infinity、数値以外のNaNは、TypeScriptではnumber型になる
- 数値のnullは0と解される
関数が利用できるようになるタイミング
JavaScriptの仕様通りだが、以下のとおり。
- function 関数名()で定義した関数はすぐに利用が可能
- 無名関数を変数に値渡しする場合は、代入後に利用可能になる
アロー関数式
- ECMA Script6で導入が検討されている仕様
- thisの扱いが通常の関数定義と違う
型注釈
- 関数を代入する予定の変数に、あらかじめ型を設定することができる
var kata: (data: string) => string; kata = data => "hello"+data;
- 引数の数は増えるとエラーだが、減るのは構わない
- Functionで型注釈をしておくと、どのような関数を入れることもできるようになる
引数の省略
- TypeScriptでは、関数を呼び出す際に引数が不足しているとエラーが発生する
- 省略可能な引数の場合、引数名の最後に?を記載する
- 型注釈で引数を1つにした場合でも、1つ目以降の引数名の最後に?をつけておけば、代入することが可能
クラス関連
- newや利用は、クラス定義をした後にする必要がある
- クラス内でインスタンス変数にアクセスするには、JavaScriptと同じく、thisが必要
- privateは、ビルド時の制約であり、any型の変数にクラスのインスタンスを代入すると参照できています。クロージャによる物理的なアクセス制限になっていない
- staticでクラス変数を定義できる
- static変数にアクセスするには、static関数とインスタンス関数いずれからもクラス名.static変数名とする
Interface
- javaのinterfaceと同様のもので、あらかじめメンバを定義するもの
- JavaScriptには情報は残らない
- 値の代入はできないし、型推論もしないので型注釈は必須
- 同じ名前のinterfaceを定義すると、メンバを追加することができる。既存のinterfaceを拡張したい場合に利用する
Module
外部モジュール
アンビエント宣言
- jQueryなどの既存のJavaScriptライブラリをTypeScriptで安全に利用できるようにするために、変数や関数の型注釈を記述したもの
- declareキーワードをつけて、interfaceと同様に宣言する
- jQueryなどには宣言ソースファイル(Declaration Source File)と呼ばれるアンビエント宣言したファイルが用意されている
- 拡張子は.d.ts
- https://github.com/borisyankov/DefinitelyTyped に各種.d.tsファイルが公開されているので探すとよい
総称型(Generic Type)
- <>で型を実行時に指定できる仕組み
- null && func()による戻り値の型判定が1.4.1では使えなくなっている模様
リファレンスコメント
/// <reference path="参照パス" />
- 上記をファイルの先頭行に記述しておくと、ビルド時に参照先もビルドされる
- --outを指定すると、同一ファイルにビルドされる
- Eclipseでは、プロジェクトを右クリック>[Properties]>[TypeScript]>[Output file name]を指定しておくと、プロジェクト内のすべてのtsファイルを1つのファイルにまとめる。個別のjsファイルは生成されなくなる
TypeScriptの関数内でのthis
- 通常の関数は、JavaScriptと同様。コールバックなどではthisはグローバルオブジェクトの参照になる
- アロー関数式を使うと、一つ外側のthisを保持する。コールバックなどでの利用でthisをとっておくイディオムやbindを利用しなくてよくなる
- TypeScriptでは、問題がなければアロー関係式を使った方が楽
外部モジュール
変数の巻き上げ
- JavaScriptの仕様
- 変数などの宣言は、プログラム内のどこに記載しても実行時にはそのスコープの最初に行われる
var val; (function () { val = "abc"; return; var val; })(); console.log(val); // undefined
- 上記は、実行時には以下のように解釈される
var val; (function () { var val; // ここにくるので、varがローカル変数になる val = "abc"; return; })(); console.log(var);
- よって、混乱を避けるためにJavaScriptでは変数はスコープの先頭でまとめて行うのがよい
- TypeScriptでもこの制約はそのままだが、以下のようなことが起きる
var a,b,c:string; // aとbはany型になり、エラー。stringはcのみ
- すべてのローカル変数を型注釈つきで宣言するのはスクリプトの簡易さを損なうので、無理のない範囲で、初めて利用する場所で宣言する方が無理がないとのこと
共通最適型
- クラスAと、クラスAを継承したクラスBがあり、これらを並べた配列を作成すると、その配列の要素の型は双方の共通型であるAに推定される
- クラスBのインスタンスを入れていても、クラスBで拡張されたメンバにはアクセスできないので注意(これはポリモーフィズムを利用した配列ではよくある)
- インターフェースAから継承したBとCがあった時に、BとCの要素を持つ配列を作成すると、Aに推定される。1.0.0の時点では{}に推定されていたようだが、1.4.1では解決している
- 混乱をさけるため、このような配列は明示的に型を定義するべき
var array:A[] = [b,c];
- 戻り値のメンバが変更するような場合は1.4.1でもエラー。明示的に戻り値を指定する必要がある
- 総称型(
)による型類推も、1.0.0ではエラーだったものが、1.4.1では理油できるようになっている
TypeScriptで利用不可な予約後
- _i,_this,_super,argumentsは、TypeScriptが内部的に利用するので使わないこと
npmの情報
- http://eirikb.github.io/nipster/ で、npmのツールを検索して、ダウンロード数やGithubのフォーク数によるランキングが確認できる
nodebrew
grunt
ブラウザで動作するJavaScript用のパッケージマネージャ bower
型定義ファイル.d.ts管理ツール tsd
- JavaScriptのライブラリをTypeScriptで使えるようにするための型定義ファイルの取得を自動化するツール
- 便利なので使うべき
- gruntなどの自動ビルドツール用プラグインを入手
NuGet
- Visual Studioで利用出来るパッケージマネージャ
- npmやbower,tsdを合わせたようなツール
まるばつ
- Pieceの定義に空を表すものも追加したい。Piece型の変数なのでPieceで状態を表した方がよさそう
- p356 innerTextはinnerHTMLの誤り
TODOアプリ
インストール
- AngularJSの公式ページに行って、ZIPファイルをダウンロードして解凍
- 型定義ファイルを入手するために、tsdをインストール
sudo npm install -g tsd
- プロジェクトフォルダに移動して、以下でjsonを作成
tsd init
- AngularJSの型定義を入手するため、以下を実行
tsd query angular*
- 表示された中からangularjs/angular.d.tsが目的のもの。以下で入手する
tsd query angularjs/angular --save --resolve --action install tsd query angularjs/angular-mocks --save --resolve --action install
- tsd.jsonのinstalled欄にインストールされた結果が並ぶ
- 以上で完了。別の環境で型定義ファイルを入手するには、tsd.jsonのみを用意して、tsd reinstall --overwrite --save とする
- bootstrapを http://getbootstrap.com/ からダウンロード
実装
配布している書籍のサンプルファイルから抜粋して解説しており、自分の手で組み立てていきながら理解することができない。さして必要性もなかったので読み飛ばした。
次のenchant.jsも同様。