editor-interrogation

エディターで型システムを調べ、理解する

概要

エディターは、TypeScript を学ぶための最適なツールです。

TypeScript の言語サービスは、入力補完、コードの調査、定義への移動、リファクタリングを提供します。これらは単なる便利機能ではなく、TypeScript がコードをどのように解釈しているかを理解するための、主要な手段です。

このスキルを使う場面

• 予想外の型推論をデバッグするとき
• 型の拡大と絞り込みの挙動を理解するとき
• 慣れていないコードベースを調べるとき
• ライブラリが型をどのようにモデル化しているかを学ぶとき
• 推論された戻り値の型が期待どおりかを確認するとき

絶対に守るルール

ALWAYS hover to verify types when behavior is unexpected.

覚えておきましょう：

• 推論された型は、予想と異なることがあります
• エディターには、TypeScript が実際にどのように解釈しているかが表示されます
• 「定義へ移動」すると、ライブラリの型実装を確認できます
• リファクタリングツールはスコープとインポートを把握しています

検出：調べるべきタイミング

次の場合は型を確認しましょう。

// 1. Type inference seems wrong
const num = 10;        // Hover: what's the type?
const str = "hello";   // Is it string or literal "hello"?

// 2. Function returns don't match expectations
function add(a: number, b: number) {
  return a + b;
}
// Hover over `add` - is return type number?

// 3. Narrowing isn't working as expected
function process(x: string | null) {
  if (x) {
    x  // Hover here - should be string, not string | null
  }
}

エディターで型を調べるテクニック

ホバーして推論された型を確認する

const list = [1, 2, 3];
//    ^? const list: number[]

const tuple = [1, 2, 3] as const;
//    ^? const tuple: readonly [1, 2, 3]

チェーン内のジェネリック型を調べる

const result = "a,b,c"
  .split(",")   // Hover: Array<string>
  .map(Number)  // Hover: number[]
  .filter(n => n > 0);  // Hover: number[]

分岐内での型の絞り込みを確認する

function example(x: string | number | null) {
  if (typeof x === "string") {
    x  // Hover: string
  } else if (x) {
    x  // Hover: number
  } else {
    x  // Hover: number | null
  }
}

ライブラリの型を「定義へ移動」で調べる

外部の型を調べましょう。

// Click "Go to Definition" on fetch
const response = await fetch('/api');
// Takes you to lib.dom.d.ts:
// declare function fetch(
//   input: RequestInfo | URL, init?: RequestInit
// ): Promise<Response>;

// Click through RequestInit to see all options:
// interface RequestInit {
//   body?: BodyInit | null;
//   cache?: RequestCache;
//   headers?: HeadersInit;
//   ...
// }

リファクタリングツール

シンボル名の変更（F2）

名前の変更ではスコープが考慮されます。

let i = 0;
for (let i = 0; i < 10; i++) {  // Rename this i
  console.log(i);               // This updates
  {
    let i = 12;                 // This stays unchanged
    console.log(i);
  }
}
console.log(i);                 // This stays unchanged

シンボルを新しいファイルに移動する

• インポートを自動的に更新します
• プロジェクト全体で機能します

メソッド／変数の抽出

• 選択したコードから、型付きの関数を作成します
• 型情報を保持します

よくある落とし穴を確認する

typeof null

function getElement(x: string | HTMLElement | null) {
  if (typeof x === 'object') {
    x  // Hover: HTMLElement | null (not just HTMLElement!)
    // typeof null === 'object' in JavaScript
  }
}

オプショナルプロパティと undefined

interface Config {
  name?: string;
}

const config: Config = {};
config.name  // Hover: string | undefined

配列インデックスへのアクセス

const arr = [1, 2, 3];
arr[10]  // Hover: number (not number | undefined!)
// Unless noUncheckedIndexedAccess is enabled

プレッシャーに負けないための手順

1. 「型は分かっている」

プレッシャー：「ホバーする必要はありません。文字列だと分かっています」

**回答：**思い込みはバグの原因になります。エディターが正しい情報を示します。

**行動：**それでもホバーしましょう。確認にかかるのは2秒です。

2. 「ライブラリの型は複雑すぎる」

プレッシャー：「こうしたジェネリック型は理解できません」

**回答：**一度に一つずつたどりましょう。手がかりを追ってください。

行動：「定義へ移動」を繰り返し使いましょう。

危険信号 — 作業を止めて確認しましょう

• 理解できない型エラー
• 「起こるはずがない」実行時エラー
• 正しくないように見えるジェネリック型
• うまく機能していないように見える型の絞り込み

クイックリファレンス

操作	VS Code のショートカット
ホバーして型を確認	シンボルの上にマウスを置く
定義へ移動	F12 または Cmd/Ctrl+クリック
すべての参照を検索	Shift+F12
シンボル名の変更	F2
クイックフィックス	Cmd/Ctrl+.

要点

型については、あなたよりエディターのほうが多くのことを知っています。

型が予想外の挙動をするときは、推測せずに調べましょう。シンボルにホバーし、定義をたどり、型がどのように絞り込まれるかを確認してください。こうすれば、ドキュメントを読むよりも早く直感を養えます。

参考文献

Dan Vanderkam 著『Effective TypeScript』の項目6「エディターで型システムを調べ、理解する」に基づいています。