「型」から学ぶTypeScript、JavaScriptとは何が違うのか：TypeScriptのTypeあれこれシリーズ（1）

altJS、すなわち、JavaScriptの代わりとなる言語の筆頭である「TypeScript」。TypeScriptという言語名が示す通り、JavaScriptに「Type」、つまり、型の概念を持ち込んだものです。本連載では、このTypeScriptの型に関して、さまざまな方向から紹介していきます。連載1回目の今回は基本中の基本に当たる、型指定のあれこれを紹介します。

[齊藤新三（著）／山田 祥寛（監修），WINGSプロジェクト]

連載：TypeScriptのTypeあれこれシリーズ

　TypeScriptを取り上げる本連載は、TypeScriptのいわゆる言語入門ではありません。本連載の目的は、TypeScriptのType（型）に注目しつつ、その内容を掘り下げていくことです。その辺りを簡単に紹介してから、本編に入ります。

本連載で取り扱うテーマは「型」

　TypeScriptは、JavaScriptの代わりとなる言語の一つとして開発された言語です。このような代替となる言語を「altJS」（alternative JavaScrip：代替JavaScript言語）といいます。TypeScriptの最大の特徴は、その言語名が示す通り、「Type」、すなわち「型」です。

　JavaScriptにデータ型の概念を持ち込み、データ型を意識しなければコーディングできないようにしたのがTypeScriptです。意識しなければならないことが増えた分、一見、面倒に思えますが、実は逆なのです。型を意識することで、バグを未然に防ぐことができるのです。どのように便利なのかについては、おいおい紹介していきます。

　本連載では、このようなメリットを味わいつつ、TypeScriptの型についてさまざまな機能を紹介します。具体的には、次のようなテーマを取り上げる予定です。

・基本のデータ型
・タプル、Enum、ユニオンなどJavaScriptにはないデータ型
・関数における型の扱い
・型ガード
・クラス
・ジェネリクス
・型エイリアス
・オブジェクト型リテラル
・インタフェース
・型定義ファイル
・型操作
・ユーティリティー型

　これらのテーマには、「Java」「C#」といった、いわゆる静的型付け言語での型と同じようなテーマのものもあれば、静的型付け言語にはない、TypeScript独特の柔軟な型機能も含まれています。型に不慣れな読者だけではなく、静的型付け言語に慣れた読者にも、楽しんでいただけるでしょう。

　なお、本連載では型以外の演算子や制御構文といった、いわゆるTypeScript入門に関しては、扱いません。そのような入門に関しては、＠ITの「TypeScriptで学ぶJavaScript入門」連載を参照してください。

Visual Studio Codeの強力なサポートあり

　TypeScriptは、実行前にコンパイル作業を経るために、その段階でコード上の問題を発見できます。これが、JavaScriptに比べて一段階バグを減らしやすい理由です。

　さらに、「Visual Studio Code」（VS Code）のように、コーディング段階からエディタ内部でコンパイルと同等のチェックを行うツールもあります。本連載でも、VS Codeを利用し、そのエラー画面を随時見ながら解説を進めていきます。

データ型と型指定

　イントロダクションを終え、いよいよ本編に入っていきましょう。

　プログラミングにおいて、変数の利用というのは基礎中の基礎です。TypeScriptでは、変数を利用する際、つまり、基礎中の基礎から型を意識する必要があります。そこから話を始めていきましょう。

変数のデータ型

　JavaScriptで変数を利用する場合、キーワード「let」、または、「const」を使って、例えば、以下のような記述をします。

let someValue = 254;

リスト1

　この同じ変数someValueに、その後、以下のように別の値を代入しても問題なく動作します。

someValue = "こんにちは";

リスト2

　ところが、TypeScriptでは、リスト2は成り立たず、エラーとなります。図1はリスト1とリスト2を記述したVS Codeの画面であり、確かにエラーになっています。

図1　文字列の再代入でエラーとなった画面

　ここに、TypeScriptのType、つまり型の問題が現れています。

　JavaScriptでは意識する必要がありませんが、データ（リテラル）には、その型が確実に存在します。リスト1の「254」は数値型であり、リスト2の「こんにちは」は文字列型です。この違いが、そのまま変数にも当てはまり、リスト1で変数someValueを初期値254で宣言した時点で、someValueは数値型となります。その後、リスト2で文字列型の値（データ）を同じ変数someValueに代入しようとした場合、JavaScriptでは、自動的に文字列型変数に変わります。この柔軟さ故に、データ型を意識しなくてもコーディングできる言語がJavaScriptです（図2）。

図2　JavaScriptの変数はデータに合わせて柔軟に型が変化する

　一方、TypeScriptでは、一度数値型で宣言された変数は、その後、数値型のままであり、文字列型という違うデータ型の値は代入できないような仕組みになっています（図3）。

図3　TypeScriptの変数のデータ型は変化しない

　この仕組みのおかげで、変数を利用する際、常にデータ型を意識する必要があり、その結果、バグを減らすことができるようになります。

型指定と型推論

　このように、TypeScriptでは、データ型を常に意識しながら変数を利用していくため、その変数宣言でも次の構文のように、データ型を記述するようになっています。