TypeScript VSCode おすすめ拡張＆設定〜もうこれなしには生きられない〜

# これはなに？

筆者が VSCode を使って TypeScript の開発を行う上で手放せない拡張機能と設定をひとつずつ紹介します。

# Pretty TypeScript Errors

TypeScript の型をめちゃくちゃ見やすくしてくれる拡張機能です。

https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

## TypeScript の型エラーがみづらい例

例えば、以下のようなコードがあったとします。
引数に `User` オブジェクトを受け取って、そのデータを使ってメッセージを生成する `getHello` 関数を呼び出すだけのコードです。

```ts
type User = {
  name: string;
  age: number;
  email: string;
  phone: string;
};

const getHello = (user: User): string => {
  let message = `Hello ${user.name}!`;
  message += `\nYou are ${user.age} years old.`;
  message += `\nYour email is ${user.email} and your phone number is ${user.phone}.`;
  return message;
};

const main = () => {
  const hello = getHello({ name: 'John' });
  //                     ^^^^^^^^^^^^^^^^
  console.log(hello);
};

main();
```

このコードでは、 `getHello()` 関数に渡すオブジェクトのプロパティが足りていないため、通常であれば次のようなエラーが出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676724/7c39091c-de28-812f-989a-ea234ecaefb1.png)

見づらい、、、ッッッ❗
慣れてくれば多少パッと読めるかもしれませんが、コレがライブラリの出す複雑な型のエラーだった日にはコピペしてエラーを整形して何が悪いか、、、といったことを確かめることになってしまいます。

## Pretty TypeScript Errors の導入

そこで、この [Pretty TypeScript Errors](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors) 拡張機能をインストールすると、、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676724/9b122572-fd5f-7710-b294-ac8e354762e5.png)

このように、エラー文を整形＆色付けしてくれてインデントも入れてくれるので、一瞬で「ああ、 `age` , `email` , `phone` も指定しないといけないのね」ということがパッと見でわかるようになります。

# TypeScript の型の表示を長くする

こちらは力技で VSCode 上での型の表示を長くする設定です。

:::note warn
免責事項
本設定は VSCode 開発元が意図していない設定方法である可能性が高いです。
筆者の環境では約半年ほどこの設定で特に問題なく動作しておりますが、こちらを試した結果発生する可能性のある問題についてはサポートできかねますので、ご了承ください。
:::

## TypeScript の型が長すぎて表示しきれない例

例えば、以下のような material UI の `Typography` コンポーネントをラップするだけの簡単なコンポーネントがあったとします。

```tsx
import { Typography, TypographyProps } from "@mui/material";

export const MyTypography = (props: TypographyProps) => {
  return <Typography {...props} />;
};
```

このとき `TypographyProps` にカーソルをあわせて、どんな内容かを見ようとすると `... 113 more` や `...;` と表示が省略されてしまいます。
コマンドクリックなどで定義に飛んで見れば良い話なのですが、できればカーソルを合わせただけでできるだけ多くのプロパティを見たいですよね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676724/afa5349a-ae3e-634f-2a95-c50c46948792.png)

## VSCode が参照する `tsserver.js` で無理やり表示される型の文字数を増やす

そんなときに見つけたのが以下の設定です。

https://stackoverflow.com/questions/62508909/how-can-i-make-vs-code-show-full-typescript-type-definitions-on-mouse-hover/69223288#69223288

具体的には以下の手順で表示される型情報の文字数を変更できます。
筆者は Mac ユーザーのため、 Mac 想定の手順になります。

1. VSCode が参照する `tsserver.js` を開く
    - `code "/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js"`
2. `var defaultMaximumTruncationLength = 160` という箇所を探す
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676724/8df62c42-0ab1-f591-2813-51c0a64a48e3.png)
3. `160` 部分を任意の数字 `800` などに変える
4. `Cmd + Shift + P` などで VSCode のコマンドパレットを開き `TypeScript: Restart TS Server` を実行
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676724/4abae641-6e41-9554-4a28-34b3cba0eefb.png)
    - もしうまく変わらなければ、  `Developer: Reload Window` を実行

## 表示される型の文字数を増やした結果

では、設定画リロードこの設定を行う前の型表示と行った後の型表示を比較してみましょう。

- 設定前
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676724/afa5349a-ae3e-634f-2a95-c50c46948792.png)
- 設定後
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676724/a0861e3c-8a1b-b082-e744-05c768d5b383.png)

今回の例ではそもそも型が読みづらいのですが、 GraphQL の Query の型を見る時などはネストしていることが多いので、かなり見やすくなります。

# まとめ

今回は TypeScript の型エラーを見やすく整形してくれる、[Pretty TypeScript Errors](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)という拡張機能と、そもそも TypeScript の型の表示を無理やり長くする設定方法を紹介しました！

これらを導入してしばらくすると、おそらくこの設定なしでは生きられなくなると思います！！！

他に良い拡張機能や設定があればコメントなどで教えてください :bow: