TypeScriptを学習し始めのerase_youです🐬
みなさんは、erase_you ＝「お前を消す方法」を知っているでしょうか？
そうです。あの昔のパソコンの右下でクルクルしてるイルカです🐬
一度は抹殺されたあのイルカが、なぜかまた復活しているのが愛おしくて、フィーチャーしています。
今回も、「お前を消す方法」でお馴染み、マイクロソフトが開発したTypeScriptについてアウトプットをしたいと思います。
前回の記事で、何度も「静的型付け」のワードが書きました。
じゃあ、静的型付けは何がそんなに良いのか、今回は「静的型付けの良さ」について少し詳しくしてみたいと思います。
0. はじめに
TypeScriptとは何かについては、前回の記事で書いています。時間がある時にでも読んでいただいて、ぜひフィードバックなどいただけると幸いです。
◆目次
1. 型注釈と型推論について
◆型注釈 = Type Annotation
- 変数宣言をする際、どんなデータ型の値を代入するか指定すること
- 「この変数や引数は、この型だよ」と、人間が手動で明記する
const animal: string = "dolfin";
// 型注釈 = 「: string」
◆型推論 = Type Inference
- コンパイラが、データ型を自動で判別する機能のこと
let aaa = 100; // 右辺の値でデータ型を推論 → numはnumber型と判別される
aaa = "hundred"; // numはnumber型だから、型の不一致でエラー発生
2. JavaScriptとの比較から見えるメリット
【JavaScript】
// aとbは文字列が入ることを意図したプログラムの場合
function xxx(a, b) {
return a + b;
}
【TypeScript】
function yyy(a: string, b: string): string {
return a + b;
}
2-1. 型安全性
JavaScript＝動的型付け
- 意図しない
a = 数値,b = 文字列でもエラーは発生しない。
TypeScript＝静的型付け
- 型注釈と異なるデータ型を代入すると、エラーが発生する。
- 意図しないデータ混入の余地を無くす
例えるなら・・・
- JavaScript：部屋にＧ（🪳）が居ても教えてくれず、急に現れてパニックになる感じ。
- TypeScript：部屋にＧ（🪳）が現れた瞬間、レーザーポインタで知らせてくれる感じ。
2-2. ドキュメント化と入力補完
JavaScript＝動的型付け
-
a, b = 文字列を意図したプログラムの場合でも、a = 数値,b = 文字列が成立してしまう。 - しかし、意図した結果を返さないし、エラーも出ない。
TypeScript＝静的型付け
- 静的型付けの言語は、型の情報をソースコードに書かなければならない。
- 型の情報が、プログラムを読み解く助けになる。
- 型情報がテキストエディタにおける入力補完のエサになり、効率化にもつながる。
2-3. 処理速度の速さ
JavaScript＝動的型付け
- コードを実行するまでエラーがあるか分からないため、デバッグに時間がかかり、開発の足が止まりやすい。
TypeScript＝静的型付け
- エラーを即時検知できるため、エンジニアがバグを修正して機能を完成させるまでの開発スピードが速くなる
3. まとめ
| 用語 | 意味 |
|---|---|
| 型安全性 | 意図しないプログラムを コンパイラが型チェックにより 検出するしくみ |
| ドキュメント化 | 型の情報がプログラムの読解に役立つ |
| 入力補完 | ドキュメントを多くすることで 入力補完が可能になり、 プログラミングの効率化が図れる |
| 処理速度の速さ | コンパイラのおかげで、 開発速度が向上する |
◆参考書籍
- 『プロを目指す人のためのTypeScript入門』鈴木僚太 著（技術評論社）