概要
TypeScriptをよく聞くけど、
JavaScriptとTypeScriptって何がどう違うの？という疑問のある方向けに、
今回は、わかりやすくおもちゃのブロックを使った例で比較してご説明します！
おもちゃのブロック
JavaScript:
いろんな形や色のブロックがたくさんあります。好きなように組み合わせて遊べます。でも、正しい形で組み合わせないと、あとから崩れやすくなることも。
TypeScript:
このブロックもJavaScriptのブロックと同じように見えますが、組み合わせる前に、「この形のブロックとこの色のブロックはこう組み合わせるんだよ」という指示があるので、正しく組み合わせるのが少し楽になります。
何が得られるか
JavaScript:
自由に組み合わせて遊べるので、すぐに楽しい遊びができます。でも、間違えると後で直すのが大変。
TypeScript:
最初は「この形とこの色をこう組み合わせるんだ」というルールを学ぶ必要があるので、ちょっと大変。でも、そのおかげで間違いを早く見つけることができる。
結果
JavaScript:
速く作れるけど、後で問題が出ることも。
TypeScript:
最初は学ぶことが多いけど、安全に遊べる。
要するに、JavaScriptは自由にプログラミングできる言語で、TypeScriptはその上で「こうした方がいいよ」というおすすめのルールが追加された言語だと考えるとわかりやすいです。
では、具体的にみてみましょう。
1. 型システム
JavaScript:
JavaScriptは動的型付け言語です。変数に格納される値の型は、実行時まで分からないことが多いです。
let value = "Hello";
value = 123; // これはOK
TypeScript:
TypeScriptは静的型付け言語です。変数、関数の引数、返り値などの型を指定することができます。
let value: string = "Hello";
value = 123; // これはエラー
2. クラスとインターフェース
JavaScript:
ES6からクラスをサポートしていますが、インターフェースのような厳密な型の仕組みは提供していません。
TypeScript:
TypeScriptでは、クラスの他にもインターフェースを利用して、オブジェクトの形を定義することができます。
interface Person {
firstName: string;
lastName: string;
}
3. 高度な型機能
JavaScript:
JavaScriptには型の概念が限られています。
TypeScript:
联合型、交差型、リテラル型、タプルなど、高度な型システムをサポートしています。
4. コンパイルエラー
JavaScript:
文法的に問題がなければ、実行時までエラーがわからないことが多いです。
TypeScript:
コードをコンパイルする際、型やその他のエラーを事前に検出することができます。
5. ツールのサポート
JavaScript:
有名なエディタやIDEは、JavaScriptのコード補完やリファクタリングをサポートしています。
TypeScript:
TypeScriptの型情報を利用することで、エディタやIDEはより高度なコード補完、リファクタリング、定義への移動などの機能を提供します。
まとめ:
TypeScriptは、JavaScriptのスーパーセットとして開発されました。そのため、JavaScriptのすべての機能を持ちながら、追加の機能とツールを提供しています。TypeScriptの主な利点は、強力な型システムとコンパイル時のエラーチェックにあります。これにより、大規模なプロジェクトやチームでの開発が容易になります。