Typescriptって何がいいの？静的型付け言語って？

最近はほぼTypescriptの開発のSuです。

10年前はjavascript+JQueryでフロントエンドの開発をしていましたが、今では型がない言語で開発することは考えられません。

そこで、今日はTypescriptについて概要を紹介します。

Typescriptとは？

TypeScriptは、javascriptに静的型付けを追加したプログラミング言語です。javascriptと同じ文法を使用し、javascriptコードを書くことができますが、TypeScriptでは変数や関数に型注釈を付けることができます。

例えば、javascriptで変数を定義する場合は型はないため、以下のように数値で扱いたい変数に文字列の値を入れることができてしまいます。javascriptは動的型付け言語なので、違う方を変数に入れても、うまく動作するように解釈して実行してくれます。

// 年齢変数 age に 20 を代入。ageは数値のみ入れたい。
let age = 20;

// ageに文字列を入れられる
age = "年齢は20歳です"

// ageは文字になっている
console.log(age);
// "年齢は20歳です"

一方、Typescriptで書いた場合、実行する前にコンパイラーが「数値型の変数に文字列入れてるからダメだよ！」と教えてくれます。

// 年齢変数 age に 20 を代入。ageは数値のみ入れたいので、"ageはnumber型だよ！"と型を定義する。
let age: number = 20;

// ここでコンパイルエラー
age = "年齢は20歳です";

実際にはVSCode上でエラーを教えてくれるため、コンパイルするまでもなく、問題に気付いて修正できます。「実行してからでないと問題に気がつけない」と「書いているときに問題に気がつける」では開発効率に雲泥の差が生まれます。

以下は「number型にはstring型のデータは入れられないよ！」のエラーのメッセージです。まさに開発中の力強いパートナーのようですね。

型がないとなぜ困るの？

javaScriptは、動的型付け言語であるため、変数の型を明示的に指定する必要がありません。これはjavaScriptが学習しやすく、書きやすいという利点がありますが、型がないことによって問題が発生する可能性があります。

バグが発生してしまう

javaScriptの場合、変数にどのような型の値が入っているかを把握する必要があります。しかし、プログラマーがうっかりと型の不一致を起こすと、予期しない結果を引き起こすことがあります。たとえば、数値型の変数に文字列型の値を代入すると、数値型の演算ができないため問題が発生することがあります。以下は具体例です。しかも、この問題は実際にプログラムを実行したときにしか発生しません。

let b = 20;
let c = 30;

// 数値同士の計算なので問題ない
console.log( b + c );
// 50

// c に文字列を入れる
c = "ほげほげ"

// 数値と文字列を足すと計算できないので、Nan=Not a Numberとなってしまう。
console.log( b + c );
// => NaN

デバッグが難しい

型の不一致によるエラーは、デバッグが難しい場合があります。javaScriptの場合、実行時にエラーが発生するため、エラーが発生したコードが何行目であるかを探すのが難しいことがあります。また、エラーが発生したコードの前に、型の不一致を引き起こすコードがあるため、デバッグがさらに困難になることがあります。

コードの信頼性が低くなる

javaScriptの場合、型がないため、プログラムの機能を正確に理解していない開発者が、コードに予期しない動作を追加することがあります。これにより、コードの信頼性が低下する可能性があります。

以上のような問題を回避するために、型付き言語を使用することが推奨されます。TypeScriptは、javaScriptの構文を保ちながら静的型付けを導入することができるため、型付き言語を学ぶコストを削減しつつ、javaScriptの開発プロセスの改善を図ることができます。

TypeScriptの主な特徴

静的型付け

TypeScriptでは、変数、関数、オブジェクトなどに型を定義することができます。これにより、コンパイル時にエラーを検出することができ、実行時のバグを減らすことができます。

ES6サポート

TypeScriptはECMAScript 6（ES6）の機能をサポートしています。また、ECMAScript 7（ES7）や、将来的なバージョンのECMAScriptの機能もサポートしています。

コンパイル時のエラーチェック

TypeScriptは、コンパイル時にエラーチェックを行うため、開発者がエラーを事前に検出しやすくなります。先ほどお見せした例の通りですね。

ツールの豊富さ

TypeScriptは、多くのツールとの互換性があります。例えば、Microsoftが提供するVisual StudioやVisual Studio CodeなどのIDEや、AngularやReactなどのjavascriptフレームワークでも利用されています。

TypeScriptは、javascriptの開発プロセスを改善するために作られた言語であり、javascriptに慣れ親しんでいる開発者にとっても学習コストが低く、使いやすい言語です。

最後に

Typescriptは、開発中に様々な問題を検出してくれます。実行時に問題が発生→デバッグ→修正→再テストという工程を大幅に減らしてくれます。javascriptも自由度が高くとても好きな言語なのですが、実際の開発効率を考えたとき、Typescriptに軍配が上がると思います。

javascriptを知っていれば、Typescriptは理解しやすいと思いますので、一度ぜひ型の良さを学んでみてください。