VSCodeはTypeScriptと相性がいい「賢いノート」
VSCodeは、TypeScriptを使うときにほぼ標準と言っていいエディタです。理由はシンプルで、「TypeScriptの型情報を理解して、補完やエラー表示をめちゃくちゃ賢くやってくれる」からです。
ここでは、難しい設定をいきなりいじるのではなく、「最小限のプロジェクトを作って、実際に補完が効いているところを自分の目で確認する」という流れで話していきます。
最小構成のTypeScriptプロジェクトをVSCodeで用意する
フォルダを作ってVSCodeで開く
まず、どこでもいいので作業用フォルダをひとつ作ります。名前は ts-playground でも my-ts-test でも何でも構いません。
そのフォルダをVSCodeで開きます（フォルダをVSCodeにドラッグ＆ドロップするか、「フォルダーを開く」から選びます）。
この「フォルダを開く」というのが地味に重要で、VSCodeは「開いているフォルダ全体をプロジェクト」として扱い、その中のtsconfig.jsonやnode_modulesなどを見て、TypeScriptの解析をしてくれます。
TypeScriptファイルを1つ作る
フォルダの中に src というフォルダを作り、その中に index.ts というファイルを作ります。
まずは、こんなコードを書いてみましょう。
const message = "Hello TypeScript";
console.log(message);
この時点でも、VSCodeはある程度TypeScriptとして認識してくれますが、ここから「型情報をちゃんと使った補完」を体感していきます。
型を付けて補完の違いを感じてみる
オブジェクトに型を付けてみる
index.ts を次のように書き換えてみてください。
type User = {
id: number;
name: string;
email: string;
};
const user: User = {
id: 1,
name: "Taro",
email: "taro@example.com"
};
console.log(user);
ここまで書いたら、user. まで入力して止めてみてください。
この状態で、キーボードの Ctrl + Space（macなら Ctrl + Space か ⌃ + Space）を押すと、VSCodeが id, name, email を候補として表示してくれるはずです。
これが「型情報を使った補完」です。VSCodeは、user が User 型であることを理解しているので、「このオブジェクトにはこの3つのプロパティがある」と分かっているわけです。
間違えたプロパティ名を書いてみる
試しに、わざと間違えて user.nmae と書いてみてください。nmae の部分に赤い波線が付き、「プロパティ ‘nmae’ は型 ‘User’ に存在しません。代わりに ‘name’ が存在しますか？」のようなメッセージが出るはずです。
ここで大事なのは、「コンパイルする前に、エディタの時点でミスに気づける」ということです。VSCodeはTypeScriptの型情報を使って、「そのプロパティは存在しないよ」「スペルミスじゃない？」と教えてくれます。
関数の補完と型情報の確認
関数に型を付けてみる
次に、関数の補完を試してみましょう。index.ts に次のような関数を追加します。
function greet(user: User): string {
return `Hello, ${user.name}`;
}
const message = greet(user);
console.log(message);
ここで、greet( まで入力した状態で Ctrl + Space を押してみてください。
VSCodeが「greet(user: User): string」というシグネチャを表示し、「この関数はUser型を受け取ってstringを返すんだな」と一目で分かるはずです。
間違った型を渡してみる
試しに、greet(123) と書いてみてください。123 の部分に赤い波線が付き、「型 ‘number’ の引数を型 ‘User’ のパラメーターに割り当てることはできません」といったエラーが表示されます。
ここでも、コンパイル前にVSCodeが「この関数はUser型を受け取る約束だから、numberはダメだよ」と教えてくれています。
この「関数の使い方をエディタが教えてくれる」というのが、TypeScript＋VSCodeの強力なポイントです。
tsconfig.json を置いたときの違い
tsconfig.json を作る意味
プロジェクトのルート（フォルダの直下）に tsconfig.json を作ると、VSCodeは「ここからここまでがTypeScriptプロジェクトだ」とはっきり認識します。
ターミナルで次のコマンドを実行してみてください（Node.jsとTypeScriptが入っている前提）。
npx tsc --init
これで tsconfig.json が生成されます。中身は最初はデフォルトで構いません。
VSCodeはこのファイルを読み込んで、コンパイルターゲットやstrictモードの設定などを理解し、その設定に合わせて補完やエラー表示を行います。
たとえば、"strict": true にすると、暗黙の any を許さなくなり、型を書き忘れたところに警告が出るようになります。
strict モードと補完・エラーの関係
tsconfig.json の compilerOptions に "strict": true を追加してみてください。
{
"compilerOptions": {
"strict": true
}
}
その状態で、次のようなコードを書いてみます。
function add(a, b) {
return a + b;
}
すると、a と b に赤い波線が付き、「暗黙の any 型です」といったエラーが出るはずです。
VSCodeはtsconfig.jsonの設定を見て、「このプロジェクトでは暗黙の any を禁止しているから、ここはちゃんと型を書いて」と教えてくれているわけです。
function add(a: number, b: number): number {
return a + b;
}
と書き直すと、エラーが消え、add( と入力したときに「(a: number, b: number): number」というシグネチャが補完に表示されるようになります。
VSCodeで「TypeScriptが効いているか」を確認するポイント
ステータスバーとファイルの言語モード
VSCodeの右下に、現在のファイルの言語モードが表示されています。ここが「TypeScript」になっているか確認してみてください。もし「JavaScript」や「Plain Text」になっている場合は、拡張子が .ts になっているか、言語モードを手動で「TypeScript」に切り替える必要があります。
言語モードがTypeScriptになっていれば、VSCodeはそのファイルをTypeScriptとして解析し、型情報を使った補完やエラー表示を行います。
マウスホバーで型情報を確認する
変数名や関数名の上にマウスカーソルを乗せてみてください。
たとえば、先ほどの user の上にホバーすると、const user: User のように型情報がポップアップで表示されます。greet の上にホバーすると、(user: User) => string のような関数の型が表示されます。
これが、「VSCodeがTypeScriptの型情報をちゃんと理解している」証拠です。補完だけでなく、「今この変数はどういう型として扱われているのか」を視覚的に確認できるのは、学習にもかなり役立ちます。
まとめ：VSCodeは「TypeScriptの先生付きノート」
VSCodeでのTypeScript補完は、単なる「入力の省略」ではなく、「型情報を使って、正しい書き方に導いてくれる先生」のような存在です。
オブジェクトのプロパティ名を提案してくれる。
関数の引数や戻り値の型を教えてくれる。
間違った型を渡したら、その場で「それは違うよ」と教えてくれる。
この体験をちゃんと味わうには、.ts ファイルを作ること、
可能なら tsconfig.json を用意すること、
そして、実際に補完やエラー表示を「触って確かめること」が大事です。
