プログラミング入門 TypeScriptって何？なんで使うの？を簡単に説明してみる

2020年9月4日2020年9月5日

今回はTypeScriptについて書きます。

何か

JavaScriptに型システムを追加します。

JavaScriptには型システムがありません。

例えば以下のコードがあるとします。

const hoge = (str) => {
	return str.split(',')
}

引数のstrはStringであることを想定されていますが、Numberを渡すことも可能です。

しかし、Numberを渡した場合、実行時にエラーになってしまいます。Numberにはsplit()というメソッドがないためです。

const hoge = str => {
	return str.split(',')
}

console.log(hoge(123)) //Uncaught TypeError: str.split is not a function

このhoge関数の引数strは、必ずStringを渡して欲しいのですが、それをどのように他のプログラマーに伝えればいいでしょうか。

一つはコメントに「strはString」と残すことです。しかし、コメントを読まれない可能性もあり不確かです。

しかし、TypeScriptを使うことでこれを解消できます。

先ほどのコードをTypeScriptで書いてみます。

const hoge = (str: string) => {
	return str.split(',')
}

引数のstrの後に「:string」が付与された以外は同じです。

ご想像の通り、これは「strはStringです」ということを表しています。

このように書いた場合に、もしhoge関数にNumberを渡した場合、コンパイル時にエラーになります。

ここでのコンパイルとは、TypeScriptで書かれたコードを素のJavaScriptのコードに変換することです。

この変換処理は実行の前に必ず行うので、実行時エラーは発生しません。

また、他のプログラマーが見ても、「strはStringなんだな！」と明確に分かります。

このように、コードの量は増えますが、その分どういった型を想定しているのかが明確になったり、事前にエラーになるところをみつけられたりといったメリットがあります。