TypeScript整形ツールでできること
TypeScript は JavaScript に型を加えた言語です。インターフェース、ジェネリクス、enum、ユニオン型、そしてすべての引数への型注釈。こうした構文が増えるほど、レイアウトの重要性も増します。ジェネリクスの型引数と戻り値の型を持つ長い関数シグネチャは1行だと読みにくく、人によって書き方が違うオブジェクト型はだんだんスタイルがばらばらになっていきます。
このツールは、TypeScript パーサーを使った Prettier 3 をブラウザ内で動かします。コードを読み込み、ひとつの一貫したレイアウトで書き出し直します。すべての型を含め、コードの中身はまったく変わりません。
使い方
- 左のボックスに TypeScript を貼り付けます。貼り付けた時点で整形されます。
- または ファイルを開く で
.tsファイルを読み込むか、サンプル で例を試します。 - オプションを選びます：インデント（スペース2つ、スペース4つ、タブ）、行の幅（80〜160）、末尾のカンマ（すべて、ES5、なし）、シングルクォート、セミコロン。
- 整形 または Ctrl+Enter を押します。
- コピー を押すか、ダウンロード で
.tsファイルとして保存します。
最初の整形で TypeScript パーサーが読み込まれます。その後は入力に合わせて出力が更新されます。
整形前と整形後
詰め込まれた入力です。
interface User{id:number;name:string;email?:string}export function greet(user:User,greeting:string='Hello'):string{return `${greeting}, ${user.name}`}const users:User[]=[{id:1,name:'Ada'},{id:2,name:'Linus'}]初期設定のまま 整形 した結果です。
interface User {
id: number;
name: string;
email?: string;
}
export function greet(user: User, greeting: string = "Hello"): string {
return `${greeting}, ${user.name}`;
}
const users: User[] = [
{ id: 1, name: "Ada" },
{ id: 2, name: "Linus" },
];インターフェースのメンバーはそれぞれ別の行になり、型注釈のコロンの後にはスペースが入り、オブジェクトの配列は1行だと 80 文字を超えるので分割されています。短いオブジェクトは配列の中で1行のまま残ります。
ジェネリクスと型エイリアスも同じように扱われます。
type ApiResponse<T> = { data: T; error?: string };
async function get<T>(url: string): Promise<ApiResponse<T>> {
const r = await fetch(url);
return r.json() as Promise<ApiResponse<T>>;
}アクセス修飾子と ?? 演算子を使ったクラスの例です。
class Cart {
private items: Map<string, number> = new Map();
add(id: string, qty = 1): void {
this.items.set(id, (this.items.get(id) ?? 0) + qty);
}
}インデント をタブにすると、enum はこうなります（各メンバーの先頭はタブです）。
enum Role {
Admin = "admin",
Editor = "editor",
}構文エラー
コードを解析できない場合は、TypeScript パーサーのメッセージが位置付きで表示されます。2つの例を挙げます。
let count: number = ;では1行目、21列目：Expression expected.と表示されます。function add(a: number, b: number {では1行目、35列目：',' expected.と表示され、閉じかっこが抜けている場所を指します。
入力欄で表示 を押すと、問題の箇所にカーソルが移動します。
きれいに整形できても、コンパイルが通るとは限らない点に注意してください。次の行は型エラーですが、整形は問題なく行われます。
let count: number = "five";これを検出できるのは TypeScript コンパイラだけです。
ヒント
- プロジェクトに
.prettierrcがある場合は、ここでも同じオプションを設定すると、リポジトリと同じ出力になります。 - 末尾のカンマ を「すべて」にすると、型引数や関数の引数が折り返されたときに、最後の要素の後にもカンマが付きます。配列とオブジェクトだけにカンマを付けたい場合は「ES5」を選んでください。
- React を使った
.tsxファイルも、TypeScript パーサーが JSX を扱えるので整形できます。 - 型定義と一緒に GraphQL スキーマも整形したいときは GraphQL整形ツール を使ってください。
tsconfig.jsonのような JSON 設定ファイルはコメントを書けますが、厳密な JSON では認められていないため、JSON整形ツール ではエラーになります。
TypeScriptを整形するほかの方法
- VS Code には TypeScript フォーマッターが組み込まれています。「ドキュメントのフォーマット」（Windows は Shift+Alt+F、macOS は Shift+Option+F）を実行してください。このページと同じ結果にするには、Prettier 拡張機能を入れて既定のフォーマッターに選びます。
- コマンドライン：
npx prettier --write "src/**/*.ts"でフォルダ全体を整形できます。 - pre-commit フック：lint-staged のようなツールを使うと、コミットのたびに変更したファイルへ Prettier を実行できるので、整形の問題がコードレビューまで持ち込まれません。
普通の JavaScript ファイルには、同じオプションでダウンロードサイズが小さい JavaScript整形ツール が使えます。