本日2本目のアウトプットはTypeScriptについてです！
2本目なので余談は無しで！！
そして学習してたらいつの間にかこんな時間に・・・！
眠い！

本日の学び✍️

冒頭でも書きましたが本日午後はTypeScriptについて学びました

TypeScriptとは

TypeScriptはJavaScript（以下、JS）を静的に型付けしたプログラミング言語です。通常のJSは動的型付け言語であり、変数の型は処理が実行されるまでは決定されません。ある意味で空気が読める天才ですね！
ただし、規模が大きいアプリケーション開発において動的型付けだと思わぬエラーが発生しバグが多発してしまいます。
そこで、TypeScript（以下、TS）を用いることによりより保守性の高い開発を行うことができるようになります！
最近の新規開発ではほとんどTSを使っているそうなのでフロントエンドエンジニアにとっては必須知識となりそうです！

まだ引き続き学習中なので、概念レベルのお話はこの辺で。。。

型の定義方法

以下のよう変数に型を設定できます。

//数値型
let myNumber: number;

//文字列型
let myString: "お腹すいたな";

//boolean型
let myBoolean: false;

//配列型
let numbers: number[];
//もしくは以下の書き方でも可能。個人的には以下の書き方が分かりやすかった
let numbers: Array<number>;

変数名: 型で型を定義することができました。

Reactにおける型定義のユースケース

本日いくつか学習しましたが、特に「なるほど！」と思ったのは、
useStateにおいても型定義ができるという点です。
例えば、JSONPlaceholderにてTODOリストを取得するとします。
その場合、

型定義専用のファイルを用意します。

// src/todo.ts　など
export type TodoType = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};

そしてuseStateを使用するファイルでは

//App.tsxなど
const [todos, setTodos] = useState<Array<TodoType>>([]);

とすることで、todosにはTodoTypeで指定したオブジェクトが配列として格納されることを明示的に宣言することができます！

まとめ🙆‍♂️

他にもコード補完を非常に強力にしてくれる点では、とても使いやすいなと思いました！TypeScript難しそうだし厳密にチェックされるのダルいな・・・なんて思ってましたが、知ってしまうとコードも書きやすいですし開発効率もアップしそうです😁
今回は薄い内容になってしまいましたが、引き続きTypeScriptを学んでいきます〜！

では( ＾∀＾)