TypeScript入門変数の型を理解しよう

記事を共有：

前のレッスンで、変数や定数を宣言するときに次のように記述しました。

const tax: number = 1.1;

ここで、「: number」という記述は「データ型」の定義であると紹介しました。これは、「tax」という定数を「数字である」と、その種類を定義したものです。

例えば、これを次のように変更しましょう。

const tax: number = '10%です'; // 消費税を文として代入する

この時、前後にクオーテーション記号（’）を忘れないでください。

すると、赤い波線が表示されます。カーソルを近づけると、次のようなメッセージが表示されます。

型 ‘string’ を型 ‘number’ に割り当てることはできません。

「10%です」というのは、文章（プログラミングの用語ではこれを「文字列」と言います）であって数字ではありません。しかし、「tax」という定数は「数字である」と定義しているため、「型」が合わなくなってしまったというわけです。

型を変更しよう

数字はTypeScriptでは「number」という型で扱います。また文字列は「string」という型で扱います。そのため、例えば「tax」を次のようにstring型に変更すると、代入はできるようになります。

const tax: string = "10%です"; // 消費税を文として代入する

ただし、今度は計算式のところで波線が表示され、次のようなエラーになります。

算術演算の右辺には、’any’ 型、’number’ 型、’bigint’ 型、または列挙型を指定する必要があります。

計算に使うことができる定数や変数の型は決まっていて、上記の「any / number / bigint」と列挙型というものになります。それぞれはまた詳しく紹介します。

このように型を宣言しておくことで、書き間違いや勘違いを防ぎ、プログラムが誤動作するのを防ぐことができます。

JavaScriptを学んだことがある場合、この「型」の定義には戸惑うことが多いでしょう。JavaScriptではこのような「型」の宣言は不要です。実際、TypeScriptで書いたプログラムをコンパイルすると、JavaScriptでは型の宣言は取り除かれてしまいます。

const tax = 1.1;

TypeScriptの最大の特長は、実はこの「型」の概念をJavaScriptに取り入れたことで、TypeScriptの「Type」がまさに「データ型」という意味なのです。

JavaScriptは型が「ない」というわけではなく、自動的にデータ型が決まるためにプログラムを作る段階では意識する必要がないというプログラミング言語です。これを「動的型付け」と言います。

この方式は、手軽にプログラムを作れる半面、先の通り勘違いや間違いを生み出しやすいため、プログラムがおかしな動作になってしまうこともあります。

そこで、TypeScriptでは型をあらかじめ定義する「静的型付け」を採用しています。最初は面倒に感じますが、大規模なプログラム開発になるほどその恩恵を感じられるようになります。是非慣れていきましょう。