Experts.jp日本に、もっとエキスパートを。(2)前回はTypeScriptの魅力を3つほど紹介し、TypeScriptの開発環境を構築しました。今回はTypeScriptの基本文法とTypeScriptの魅力の一つであり、TypeScriptを最も特徴付ける機能である型注釈について紹介します。型注釈の説明に入る前に、TypeScriptの関数について説明します。前回強調したとおり、「JavaScriptのコードそのまま解釈でき、既存コードから開発をスタートできる」ということは、TypeScriptの特徴の一つです。シンタックスはJavaScriptのコードと大差ありませんが、より使いやすく拡張されているものもあります。関数は様々な拡張がなされています。具体的には次の4つの機能が利用できます。オプショナルパラメータデフォルトパラメータ可変長パラメータラムダ式オプショナルパラメータJavaScriptでは宣言されているパラメータの数と、実際にコールする際のパラメータの数は違っていても問題はありませんでした。多くてもokしかし、TypeScriptは静的型付け言語であり、宣言通りに値を渡さなければコンパイルエラーとなります。?を用いて明示的に宣言をする必要があり、これをオプショナルパラメータと呼びます。?をパラメータの後に付け、宣言し、値が渡されたどうかは実装で動的に検査する必要があります。Editionの仕様の一つであるデフォルトパラメータが利用できるため、関数にデフォルトのパラメータを設けることができます。=を用いて定義します。デフォルトパラメータはオプショナルパラメータと同様に扱われ、コールする際にパラメータを渡さなくともエラーにはならず、デフォルトの値が代入されます。argumentsオブジェクトを利用していました。Editionの仕様の一つである、レストパラメータを利用できます。...を付け、定義します。レストパラメータが宣言できるのは宣言内の最後のパラメータのみで、値は配列として格納されます。thisの参照先が異なりました。thisを変数に格納しておいて、その変数から参照する方法がよく使用されています。selfにコピーし、戻り値の関数内で使用しています。thisの参照先を同一にすることができます。=>を用いて記述します。this;}このとき、変換されたJavaScriptは次のようになります。thisは全てここを参照するようになります。sortのコールバックをスリムに記述することができます。冒頭で述べたとおり、型注釈はTypeScriptを特徴づける重要な機能の一つです。型注釈にて静的型付を行うことで、コンパイラが整合性をチェックし、適合しているかどうかを検査してくれます。TypeScriptで型注釈を行う場合、次のようにJavaScriptでの変数宣言の後にコロンで区切りその変数の型を指定します。valueはstring型と認識されます。ある型で宣言された変数はその型の値しか代入することはできません。以下のコードはJavaScriptであれば何の問題もなく動作します。代入するコードでコンパイルエラーとなります。型注釈をすることで、変数に特定の型を持つ値以外が代入できないように、制限することができます。制限を設けることで、存在しないメンバ関数にアクセスしてしまうミスなどを、事前に防ぐことができます。静的に検査されるため、型注釈が実行時のパフォーマンスを直接下げることはありません。TypeScriptには次の基本型があります。型注釈にはこの基本型に加え、関数とオブジェクト、クラス、インターフェースが使用できます。booleanと対応します。false;ArrayArray型には二つの表記法があります。Arrayクラスを利用する方法です。"bar"];Arrayクラスは相称型を利用しています。総称型については次回詳しく紹介します。EnumTypeScriptではEnumが導入され、これも型として扱うことができます。"Green"Enumの値は0から連続する整数値です。その値で参照することで文字列を取得することができます。多くの言語のEnumと同様に値を自分で決めることもできます。Blue=6値を決める際は代入文を使用します。代入文がない場合は、前の要素の次の値になります。anyany型は全ての型を指します。any型であると判断されます。any型は全ての型の値を格納でき、また、どの型にもキャストすることができます。any型なので、数値や文字列などのどの型の値も書くできます。どの型にもキャスト可能で暗黙的に変換されます。number型を期待していますが、代入されているのは文字列です。any型であるためにコンパイルエラーにはなりません。any型の利用は避けるべきです。anyVal;関数とvoid関数の型を指定することができます。関数の型は、パラメータの型と戻り値の型をしていすることで表記します。戻り値の型と表記します。void型は値がないことを表し、関数の戻り値の型注釈のみで利用することが作法となっています。パラメータの型):戻り値の型とすることで、関数宣言にパラメータや戻り値の型注釈をすることができます。デフォルトパラメータは、オプショナルパラメータとしてあらわされます。okオブジェクトオブジェクトも型付けをすることができます。オブジェクトに型付けをすることで、そのオブジェクトにどんなプロパティがあるべきかを定義することができます。stringを持つオブジェクトであることを型付けしています。"more"}このように、オブジェクトの型付けを利用することで、存在しないプロパティを参照するミスを事前にチェックすることができます。型注釈は制約を設け、コンパイラによるチェックを容易にしますが、すべてに注釈すると冗長に見えます。TypeScriptは他の静的言語と同様に、ある程度型を推論して自動的に型付けをしてくれる型推論があります。strは文字リテラルで初期化しているためstring型であると推論されます。関数もある程度推論されます。string型であると推論されます。str関数のパラメータの一つだけです。よって、0の代入はエラーになりません。any型となってしまい、静的型付けの恩恵を得られなくなってしまいます。--noImplicitAnyコンパイルオプションです。any型に推論がなされた際に、コンパイルエラーとして通知してくれるようになります。このオプションを利用することで、最小限の注釈ですべてがしっかり型付けされることを保証することができます。型付けをすることで、コード補完などの支援も受けやすくなるので積極的に使用しましょう。3上での開発環境を構築しました。「Settings-User」の設定を次のように編集します。--noImplicitAnyコンパイルオプションを有効にすることができます。オーバーロードJavaScriptは多様性を積極的に活用する言語の一つです。jQueryなどのライブラリでは多くの多様性を持ったメンバー関数が実装されています。any型になってしまうため、型注釈が必要です。TypeScriptは関数の実装に対して、シグネチャの異なる複数の宣言を持つことができます。これを利用することで関数のオーバーロードが可能になっています。render関数をオーバーロードしています。HTMLElement)=>voidの2つのシグネチャを持ちます。render(0)は2つのシグネチャのどちらとも一致しないのでコンパイルエラーになります。まとめ今回は型注釈を中心に、変数や関数での注釈方法や、関数のオーバーロードなどを紹介しました。--noImplicitAnyコンパイルオプションを有効にし、より、TypeScriptの力を発揮できるようにしました。型注釈をしっかり施すことによって、型の不一致から発生するバグを実行前に検知し、修正することができます。これが、TypeScriptの大きな魅力の一つです。any型がでなるべくないようにコードを書いてみてください。次回はクラスやインターフェース、総称型を紹介します。