解 説

TypeScriptはJavaScriptの問題点をカバーするためにマイクロソフト社により開発されたJavaScriptの代替言語です。
TypeScriptはコンパイルすることでJavaScriptに変換することができます。
文法的にはJavascriptがベースになっていますが、ES6に対応しており、また変数や関数などでより型を厳密にしたことや、クラスの概念などJavaライクな仕様になっています。
今回はTypeScriptのポイントを学習していきます。
尚、本家サイトにあるTypeScript Playgroundページではオンライン上でTypeScriptをリアルタイムにJavaScriptに変換してくれますので便利に使えます。

変数のデータ型

変数宣言の際に指定する型は次のものがあります。

  • number :数値型(整数や浮動小数)
  • string :文字列型
  • boolean :true / false
  • symbol :シンボル型
  • any :任意の型
  • オブジェクト :配列型、タプル型、クラス型、インターフェイス型、関数型

具体的な記述は以下の例のようになります。

ブロックスコープに対応したlet と定数 const

変数宣言の際にJavaScriptではverを使用ますが、ES6からブロックスコープに対応したlet命令が導入されました。
TypeScriptでもlet命令を使用することができます。
また、定数を宣言するconstも使えるようになっています。

let命令

変数をletで宣言するとブロックスコープに対応します。
ブロックスコープとはif文やfor文などで使われるブロック内、つまり { } 内で宣言された変数はブロック内だけのスコープになります。
let命令の例

letで宣言した変数はスコープ内で同じ名前の変数を宣言できません。

const命令

const命令で定数を宣言することができる。初期値を代入したらその後値を入れ替えることができません。

ただし、配列の場合はある特定の値だけを入れ替えることはできます。

結果
Array(3)
0:1
1:20
2:3

関数

関数にはfunctionを使った関数宣言と、無名関数とも呼ばれる関数リテラルとアロー関数があります。
アロー関数は関数リテラルを簡単に表現したでけのものではありません。主な違いは「this」の意味が違います。
また、仮引数や戻り値にも型指定をします。

戻り値にも型指定します。

型アサーション

でキャストすることができます。

アロー関数

アロー関数は無名関数を簡潔に表現できます。

アロー関数の特徴はthisの使い方です。
function関数はthisは呼び出し時に決まりますが、アロー関数のthisの値はアロー関数の外側のthisの値となります。

次の例はjQueryでの例なのですが、each()の中でclick()イベントを設置した例です。最初の例はfunctionを使った無名関数を使って記述し、さらにclickイベントをアロー関数で記述したものです。(本来こんな書き方はしないと思いますが、直感的にわかりやすいものにしました)
もちろん、JavaScriptのみの構文でも同じような結果となります。

HTMLコード

function関数を使ったjqueryコード
サンプル

結果はeach文の中の「 $(this).css(‘color’,’blue’)」で全てのリストは青文字になります。この時のthisは2つの「ul」を指します。その後、適当な場所の「li」をクリックするとその色が赤く変わります。これはクリックイベントの中にある「this」は「li」を指していることになります。

アロー関数を使ったjqueryコード
サンプル

クリック前の結果は最初のサンプルと同様ですが、クリックした時の振る舞いが違います。今度のサンプルは「li」をクリックすると、全ての「li」が赤く変わります。これはクリックイベントの中に設定した「this」は「li」ではなく外側の関数の「ul」を指しているのです。

注意すべき点は次のようにclickイベントの関数にアロー関数を使用した場合です。
サンプル

この場合は「this」は「$(‘li’)」を指すのではなくwindowオブジェクトを指しています。そのため、console.logで確認すると「window」と表示されます。そのため、クリックしたli要素の色を赤色にするという期待した動作は行われません。