こんにちは！HLCの掛橋です。
今回はReactを書く上でTypeSctiptを使ってよかったことを紹介します。
入力補完
MyButtonというオリジナルのコンポーネントを作成、
プロパティ(MyButtonProps)にlabel、colorを設定しています。
props. と打つと、VSCodeが候補(label、Color)を出してくれます。
楽ですね〜！素敵ですね〜！
可読性の向上
プログラムは基本的に上から下へと読んでいきます。
MyButtonを初めてみた人はプロパティに何が入るのかがMyButtonPropsを見ることで把握できます。
プロパティそれぞれにコメントをしっかり書いておくといいですね！
うっかりミスの防止
とある日
Kさん：「MyButtonを別の画面で使うで〜！プロパティにcolor(背景色)設定したしおっけいやろ〜〜！」
VSCodeさん：「↑エラーやで(赤文字波線)」
Kさん：「！？ なんでや！？」
VSCodeさん：「MyButtonのプロパティにlabel入れてないから、エラーなんやで＾＾」
Kさん：「なるほど、プロパティの入力漏れてたんか〜危ねぇ〜！！」
Kさん：「ちゃんとlabelプロパティを設定して、、どうや！」
Kさん：「↑よっしゃ動いたで！」
また別の日
Kさん：「MyButtonのプロパティ、ラベルは必須にしたいけど、colorは未設定でも大丈夫なようにしたいなぁ〜」
TypeScriptさん：「そういう設定できるで！」
TypeScriptさん：「MyButtonPropsのcolorの宣言に?をつけるだけやで」
Kさん：「ニャルほど。書いてみるわ〜」
Kさん：「ほな試しにcolorを設定したMyButtonと、未設定のMyButtonを配置してみるで！」
Kさん：「おお、VSCodeに怒られへんし、ちゃんと動いた！すご」
TypeSctiptさん：「ええやろ？(…うわぁってボタンなんやねん)」
TypeSctiptさん：「この？は 必須なプロパティではないけど、設定するならこの型で宣言しますという意味なんや。オプショナルとも呼ばれてるで」
Kさん：「ほぇぇ便利やなぁTypeScript〜！」
まとめ
・ReactをTypeScriptで書くと、入力候補が出てくれるから楽！
・プロパティの入力漏れにすぐ気づくからいいよね！
・プロパティが未設定でもエラーが出ない、オプショナルプロパティがあるよ！
