なんでTypeScriptを使いたいか〜自分の場合〜

## はじめに
動的型付けとか静的型付けとかの話で、たまに「TypeScriptなんて不要だ、JavaScriptだけでいい。」みたいな話を見かけます。自分も最初はそうでした。なんでわざわざTypeScriptをコンパイルしなくちゃいけないんだ、型があると堅苦しい（カタだけに）ってずっと思ってました。numberかstringかbooleanなんてすぐにわかるだろって。でも、TypeScriptを使ってはや数年。もはやTypeScript使わないと開発できないなってなりました。
これは、自分がTypeScriptを使っていて「これが便利だ」って感じたことをつらつらと書きます。自分はVSCodeをメインに使っているので、主にVSCodeを使っている上での自分なりの感想です。

## このオブジェクト、何のプロパティもってるんだっけ
TypeScriptを使ってると、そのオブジェクトがどんなプロパティを持っているのかがすぐにわかります。
例えば
```typescript
type User = {
  /**
   * ユーザーID
   */
  id: number;
  /**
   * ユーザー名
   */
  name: string;
  /**
   * 年齢
   */
  age: number;
};


const getUsers = (): User[] => [
  {
    id: 1,
    name: "Alice",
    age: 20,
  },
  {
    id: 2,
    name: "Bob",
    age: 21,
  },
  {
    id: 3,
    name: "Charlie",
    age: 22,
  },
];

const users = getUsers()
```
とします。こうやって型を設定しておくと、usersをループ回して、値を取り出したいとします。このとき、userがどんなプロパティを持っているのか、VSCodeの場合、
![スクリーンショット 2024-10-26 22.05.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267174/be51c4b5-30ef-d1b4-599b-524091aa95dc.png)

このようにどんなプロパティを持つかサジェストしてくれます。非常に便利です。例えば、`user.email` と、Userの中に入っていないものを書くと、

![スクリーンショット 2024-10-26 22.25.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267174/26233440-a7a1-7b47-065a-cad9d4d69710.png)

即座にエラーを返してくれます。さらに各プロパティにJSDocでコメントを書いておくと

![スクリーンショット 2024-10-26 22.10.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267174/a582a8bc-a4b7-1d67-26ec-762a585b89a3.png)

型とコメントをこうやって表示してくれます。非常にわかりやすい。JSDocコメントちゃんと書いておくの本当にお勧めします。もしTypeScriptを使っていないと、何のプロパティを持っているのか、定義箇所まで辿ってみなければなりません。もしくは実際に実行してみないとわかりません。TypeScriptだと、コードを書いているときに「userってemail持ってたっけ」なんてすぐに気づけます。

## 関数を作りたい
例えば、この`user`を使って、
```typescript
const getName = (user:User,message:string):string => {
  const {id,name,age} = user
  return `ID:${id}の${name}は${age}歳です。${message}`
}
```
と返す関数を作ったとします。この関数を他の箇所で呼び出すとき、引数に何を入れたらいいのか、TypeScriptでちゃんと型を書いていれば、
![スクリーンショット 2024-10-26 22.39.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267174/ed24cf15-0ced-4ab0-2f26-b19210305ef8.png)
こんな感じで、引数に何が入るのか教えてくれます。userとmessage、どっちが先かなんてこともこれでバッチリです。
TypeScriptを使わない場合、引数に何が入るのか、いちいち定義した箇所に戻らなければなりません。さらに、userが何を持っているオブジェクトなのかもきっちりとどこかでメモしておかなければ、あとからわからなくなります。関数を実行したときでないと、引数に間違ったものを入れたときにエラーがわかりません。

わざわざ返り値に型をつけるのが面倒だなって場合も、型推論があるので、返り値を見て勝手に型をつけてくれます。便利ですね。

## OpenAPIで、REST APIと型共有
フロントエンドとバックエンドが分かれていて、REST APIでデータをやりとりしているとします。このときに、OpenAPIを用意すればフロントとバックで型の情報を共有できます。
OpenAPIからTypeScriptの型を起こしてくれるツール、例えば[openapi-generator](https://github.com/OpenAPITools/openapi-generator)などを使えば、それぞれのオブジェクトからメソッドまで、型を出力してくれます。
`GET /api/user/:id` `POST /api/user`を実行する関数を
```typescript
const getUser = (id:number):User => {
 ... 
}

const postUser = async (user:User):Promise<void> => {
 ...
}
```
のような形で定義しておけば、`user`は何を取得できるのか、`user`を登録するときにリクエストボディは何を投げればいいのか。OpenAPIとTypeScriptのおかげですぐにわかります。ちなみに、openapi-generatorを使えば、こういった基本的な関数は自動で生成してくれます。

チームで開発しているとき、特にフロントエンドとバックエンドで何らかのAPIを使ったやりとりをしているとき、型が非常に効いてきます。OpenAPIが、ある種の仕様書みたくなってきます。

## まとめ
TypeScriptは、
* そのオブジェクトが何のプロパティをもっているかすぐわかる
* 関数作るとき、引数に何入れたらいいかすぐわかる
* バックエンドとAPIを共有するときにとても心強い

以上の3点が、主に自分にとっての利点です。

小規模であればJavaScriptで構いません。しかしある程度以上のWebアプリケーションを作りたいときは、TypeScriptがないと開発ができないです。TypeScriptを使えないフロントエンド環境なんてもってのほかです。関数が何返すのか、引数に何必要なのかすぐわからないのなんて嫌です。ドキュメントとしても、linterとしてもとても優秀です。実行時、テスト時に初めてエラーがでるのと、コーディング中にエラーが出るのとでは開発スピードが大きく異なります。
また、あとからそのコードを他の人（未来の自分も含む）がメンテナンスするときにも、型があれば「getUserはこういうuserの値を返す関数か」ってすぐにわかります。誰が書いても、userから返されていないプロパティを書くことはありません。
以上が、自分がTypeScript使用していて便利だなって思ったことです。