これはなに？

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

Pretty TypeScript Errors

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

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

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

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() 関数に渡すオブジェクトのプロパティが足りていないため、通常であれば次のようなエラーが出ます。

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

Pretty TypeScript Errors の導入

そこで、この Pretty TypeScript Errors 拡張機能をインストールすると、、、

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

TypeScript の型の表示を長くする

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

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

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

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

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

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

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

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

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

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

VSCode が参照する tsserver.js を開く
- code "/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js"
var defaultMaximumTruncationLength = 160 という箇所を探す
160 部分を任意の数字 800 などに変える
Cmd + Shift + P などで VSCode のコマンドパレットを開き TypeScript: Restart TS Server を実行
- もしうまく変わらなければ、 Developer: Reload Window を実行

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

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

設定前
設定後

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

まとめ

今回は TypeScript の型エラーを見やすく整形してくれる、Pretty TypeScript Errorsという拡張機能と、そもそも TypeScript の型の表示を無理やり長くする設定方法を紹介しました！

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

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

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