コーディングエージェントはTypeScriptの 型エラーをどう自己修正しているのか

コーディングエージェントが大きく発達し、コード生成後にLanguage Serverからのエラー診断の情報を読み取り、自動的に修正を試みるようになりました。これによって、AIにどう型エラーの情報を正しく伝えるかが関心事になったといえます。

この仕組み自体は言語を問わず動作しますが、TypeScriptの型情報がエージェントの修正精度に深く関わってきます。そのため、型設計の基礎がより重要になりそうです。

本セッションでは、ClineなどOSSの実装から、エージェントが診断情報をどのように活用しているのかを考察します。あわせて、diagnosticsの情報が省略されたり、打ち切りされる仕組みを踏まえ、私たちが型設計で意識できることを考えます。

Transcript

1. コーディングエージェントはTypeScriptの 型エラーをどう自己修正しているの パナソニック エレクトリックワークス株式会社 筧 万里 1 TS Kaigi 2026 ショートセッション
2. 自己紹介 2 筧 万里 / Banri Kakehi(@Melonps_) ◦ 家庭用燃料電池「エネファーム」のSRE ◦ フロントエンド関西コアスタッフ ◦ Yamada UIのメンテナー エネファーム
3. なぜこのテーマを話したいの 3 ◎AIにエラー 伝わる仕組みを知って、楽し 開発しよう！ 私 Copilot エラー出てるじゃん 早 治してよ！ 修正を試みてます 治りません...😭 必要な情報・設定 ないとなぜ上手 い ないの わ らない Type '{ id: string; name: string; }' is missing the following properties from type '{ id: string; name: string; email: string; phone: string; age: number; role: "admin" | "editor" | "viewer"; isActive: boolean; company: { name: string; department: string; position: string; address: { postalCode: string; prefecture: string; city: string; street: string; building?: string | undefined; }; }; address: { postalCode: string;... Valibotで出た長いエラー
4. いざ本編へ... 4 様々なエージェント・ツール・IDEの エラーの読み取り方を見てみましょう tsgo --lsp の話は出て ません！時間足りん った
5. エラー読み取りの二つの形式 5 ◎TypeScript CompilerをCLIで実行 tsc --noEmit ◎LSP(Language Server Protocol)を経由[1] [1]: Language Server Extension Guide | Microsoft, https://code.visualstudio.com/api/language-extensions/language-server-extension-guide
6. Language Server Protocolの さらい 6 エラーを出すコード textDocument/publishDiagnostics const num: number = "hello"; textDocument/didChange
7. z 型エラーはLSPで送る情報のご 一部 7 WarningやHintは 読まないよ Cline Copilot Warningも 読むよ
8. LSP経由でTSのエラー読み取り 8
9. Clineの自己修正の流れ 9
10. vtslsを使用する 10 ◎LSPの入り口はvtsls 用意し、pushされるのを待つ
11. Serenaを使用する 11 ◎LSPをMCPでラップし、AI 読みやすい形でpullで る 11
12. Serenaのシンボル単位の呼び出し例 12 12 curl -s -X POST http://127.0.0.1:8765/mcp \ -H "Content-Type: application/json" \ -H "Accept: application/json, text/event-stream" \ -H "Mcp-Session-Id: $SESSION" \ -d '{ "jsonrpc": "2.0", "id": 3, "method": "tools/call", "params": { "name": "get_diagnostics_for_symbol", "arguments": { "name_path": "UserService", "min_severity": 1 } class UserService { private users: User[] = [] getUserName(id: string): string { const user = this.users.find( u => u.id === id ); return user.name; } } エラーを出すコード
13. Serenaのレスポンス例 13 13 { "src/index.ts": { "Error": { "UserService": [ { "message": "'user' is possibly 'undefined'.", "range": { "start": { "line": 16, "character": 4 }, "end": { "line": 16, "character": 10 } }, "code": 2322, "source": "typescript" }, ] } } } LSPの何行目:何文字目だけの指定よりわ りやすい
14. これ らの関心ごと 14 長す る型エラー / 省略される型エラー はAIの修正精度を下げるのではない ？
15. 型シグネチャの展開を行う長いエラー 15 Argument of type '(c: Context<Env, "/users/:id", {}>) => JSONRespondReturn<{ code: number; message: string; }, 400>' is not assignable to parameter of type 'Handler<Env, "/users/:id", {}, MaybePromise<TypedResponse<{ id: string; name: string; company: { name: string; address: { postalCode: string; prefecture: string; city: string; street: string; building?: string | undefined; }; department: string; position: string; }; address: { postalCode: string; prefecture: string; city: string; street: string; building?: string | undefined; }; email: string; age: number; createdAt: string; updatedAt: string; tags: string[]; phone: string; role: "admin" | "editor" | "viewer"; isActive: boolean; metadata: { [x: string]: string; }; }, 200, "json">>>'... Types of property '_data' are incompatible. Type '{ code: number; message: string; }' is missing the following properties from type '{ id: string; name: string; company: { name: string; address: { postalCode: string; prefecture: string; city: string; street: string; building?: string | undefined; }; department: string; position: string; }; address: { postalCode: string; prefecture: string; city: string; street: string; building?: string | undefined; }; email: string; age: number; createdAt: string; updatedAt: string; tags: string[]; phone: string; role: "admin" | "editor" | "viewer"; isActive: boolean; metadata: { [x: string]: string; }; }': id, name, company, address, and 9 more. 世話になっている@hono/zod-openapiを使ったエラーの一部 3000文字 800 token程でClaudeでいう900x900 pxの画像1枚分 らいのトークン量 ... and N more という省略 長い展開
16. tsserver(checker.ts)の省略メカニズム 16 ◎長す るエラーは3パターンで人間むけに省略される 1. and N more：欠けているプロパティ 6個以上で先頭4つだけ表示 2. ... N more ...：約160文字超でユニオン/プロパティ列挙を打ち切り 3. 末尾の「...」：最終文字列 320文字超で末尾を切り捨て これらはTypeScriptの仕様なので ライブラリ・AI側では工夫し ねる...
17. ZodなどのPrettify・Simplify 原因 17 ◎inferの結果を展開済みの型として返すUtility型 export type Prettify<T> = { [K in keyof T ]: T[K]; } & {}; type Base = { id: string; name: string }; type Time = { createdAt: string; updatedAt: string }; type UserRaw = Base & Time; type UserPrettify = Prettify<Base & Time>; type UserPrettify = { id: string; name: string; createdAt: string; updatedAt: string; } ◦ ホバー: 展開されているほう 読みやすい ◦ エラー: 名前 残っているほう 読みやすい ホバーで表示される型 type UserRaw = Base & Time
18. 型レベルエラーメッセージ（例：ArkType, Drizzleなど） 18 ◎なぜ型エラーになるの をTSの代入規則任せにしない interface TypeLevelError<M extends string> { readonly $error: M; } type ValidateStatus<S extends number> = S extends DefinedStatusCodes ? S : TypeLevelError<`ステータスコード ${S & number} はrouteのresponsesに定義されていません`>; 型レベルエラーメッセージ Argument of type 'number' is not assignable to parameter of type 'TypeLevelError<"ステータスコード 400 はrouteのresponsesに定義されていません">'.ts(2345) 型エラー 型名がそのままエラー文に出る
19. エラー 削減で ればいいという話ではない 19 ◎エージェント 情報の消費者として追加された →エンジニアとして、これ らも情報の設計 必要 例： ◦ diagnosticsは「何 壊れた 」を短 伝える役割に特化し 「何 正しい 」はhoverやcompletionsで取得する ◦ 型レベルでエラー文を設計する
20. まとめ 20 ◎エージェント 型エラーをどう読んでいるの ◦ Microsoft制のツールとシームレスに連携する形 多い ◦ LSPを直接使わず、MCPやToolsでラップするケース 増加 ◎TypeScriptの型情報の出方 修正精度に直結する ◦ 人間のための型設計 結果としてAIにも通用する ◦ AIフレンドリーな型 求められる時代になる もしれない
22. tsgo/TypeScript 7.0での変化 22 ◎独自プロトコル ら標準のLSPへ移行中[1] While most of the core type-checking code has been ported over without any behavioral differences, the language service is a different story. Given the new architecture, much of the code that powers completions, hover tooltips, navigation, and more, has been heavily rewritten. Additionally, TypeScript 7.0 uses the standard LSP protocol instead of the custom TSServer protocol, so some behavior specific to the TypeScript VS Code Extension may have changed. [2]: Progress on TypeScript 7 – December 2025 | Microsoft, https://devblogs.microsoft.com/typescript/progress-on-typescript-7-december-2025/ Microsoft公式 出したTS 7.0の進捗
23. tsserverの二つのプロセス 23 ◦ syntax server: 軽量で、開いてるファイルのタイピング中 ◦ semantic server: ホバーやコード補完、ファイル保存時
24. tsgoになった場合（現時点で流動的） 24 • typescript-language-server 必要無 なる • 軽量なスレッドを扱える らsyntax/semanticで分けな ていい
25. オーバーロード 一致しない 25 declare function process(x: string, y: number): string; declare function process(x: number, y: string): number; declare function process(x: string[], y: number[]): void; process({}, []); ◎宣言順に試し最後のprocessだけ詳細を表示 ・構造的部分型により、プロパティやメソッド 一致していれば同じ型 ・string[] に必要なメソッド {} には一つも足りないことを説明する …Type '{}' is missing the following properties from type 'string[]': length, pop, push, concat, and 26 more. エラーを出すコード エラーの一部
26. テンプレートリテラル型の直積 26 type Color = "red" | "blue" | "green"; type Size = "sm" | "md" | "lg" | "xl"; type Variant = "solid" | "outline" | "ghost"; type State = "default" | "hover" | "active" | "disabled"; type ClassName = `${Color}-${Size}-${Variant}-${State}`; const cls: ClassName = "purple-xxl-dashed-focus"; ◎軸を1つ増やすと候補数 掛け算で増える →expected側に展開済みユニオン 並んでエラー 伸びる Type '"purple-xxl-dashed-focus"' is not assignable to type '"red-sm-solid-default" | ... 136 more ... | "green-xl-ghost-disabled"'. エラーを出すコード エラーの一部
27. 2026年はアプローチ 変わりつつある 28 １ tsgoを使う 2 TypeScript 7.0 で変わること AIフレンドリーに するための工夫 MCPやTools でラップ 3 専用AIモデルを用意する(vercel-autofixer-01)もあったけど割愛...