Set Up TypeScript in VS Code

VS Code comes with TypeScript support built in. You do not need to install any extension to get autocomplete, error checking, go-to-definition, or refactoring. Microsoft builds both TypeScript and VS Code, and the integration is the best in any editor.

This guide covers the default setup, how to verify it works, the key features you will use every day, and a few extensions that make the experience even better.

Verify TypeScript Is Working

The fastest way to confirm your setup works is to trigger an error on purpose. Create a new file called test.ts and write a small function with a deliberate type mistake:

typescript

function add(a: number, b: number): number {
  return a + b;
}
 
add(5, "hello");

If TypeScript is working, you will see a red squiggly line under "hello". Hover over it and VS Code shows:

text

Argument of type 'string' is not assignable to parameter of type 'number'.

This is the TypeScript language server running in real time. It checks your code as you type and reports errors immediately, without any compile step.

If you do not see the error, check that your file extension is .ts (not .js or .txt) and that VS Code did not prompt you to select a language mode.

Confirm the TypeScript Version

VS Code bundles its own copy of TypeScript. To see which version you are using, open any .ts file and look at the status bar at the bottom-right. You should see something like:

text

TypeScript 7.0

Click it to see options, including switching to the workspace version if your project has TypeScript installed locally via npm install typescript.

Open the Command Palette (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows) and search for "TypeScript: Select TypeScript Version" to choose between the VS Code bundled version and your workspace version.

Create a tsconfig.json for Full Strict Mode

VS Code respects your tsconfig.json settings. As of TypeScript 6.0, strict is already the compiler's built-in default even with no config file at all, but an explicit tsconfig.json still matters: it locks in your target JavaScript version, module system, and other options instead of leaving them to whatever defaults ship with the installed compiler. Create a tsconfig.json in your project root:

json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

The "strict": true line is worth keeping explicit even though it now matches the compiler's default. It enables all strict type-checking options at once, including strictNullChecks, noImplicitAny, and strictFunctionTypes, and it makes sure your project stays strict even if someone later adds other settings that would otherwise change the default.

For a full explanation of every compiler option, see TypeScript compiler explained.

Day-to-Day Features

These are the TypeScript features you will use constantly in VS Code.

Autocomplete: Start typing on any typed variable, and VS Code shows you exactly which properties and methods are available.

typescript

const message = "Hello, TypeScript!";
message.  // VS Code shows: charAt, concat, includes, length, slice, toLowerCase...

This works on strings, numbers, arrays, objects, and your own custom types.

Inline errors: TypeScript errors appear as red squiggly lines directly in the editor. You do not need to run the compiler separately to see them. Hover for details, or open the Problems panel (Cmd+Shift+M / Ctrl+Shift+M) to see every error across your project.

Go to Definition: Cmd+Click (Ctrl+Click) on any variable, function, or type to jump to where it is defined. This works across files in your project and even into installed packages that include type definitions.

Rename Symbol: Right-click a variable, function, or type name and select "Rename Symbol" (or press F2). Type the new name and press Enter. VS Code renames every reference across your entire project, safely, without touching unrelated code that happens to share the same name.

Quick Fix: Click on any error and press Cmd+. (Ctrl+.) to see suggested fixes. Common fixes include adding a missing import, adding a missing property, or adding a null check.

Recommended Extensions

While VS Code's built-in TypeScript support is excellent, a few extensions make the experience smoother.

To install any of these, open the Extensions panel (Cmd+Shift+X / Ctrl+Shift+X), search for the name, and click Install.

Prettier is the most important one. After installing it, enable format-on-save in your VS Code settings:

• Open Settings (Cmd+, / Ctrl+,).
• Search for "format on save" and check the box.
• Search for "default formatter" and select "Prettier - Code formatter."

Now every time you save a .ts file, Prettier formats it consistently.

Running TypeScript from VS Code

VS Code has a built-in terminal. Press Ctrl+` (backtick) to open it without leaving the editor. From there, you can run TypeScript the same way you would from the command line:

bash

tsc app.ts && node app.js

The two-step compile-and-run works everywhere, but it is slower to iterate with. For a faster workflow that skips the separate compile step entirely, install tsx and run the file directly:

bash

npm install -g tsx
tsx app.ts

The terminal stays open at the bottom of VS Code, so you can edit and run without switching windows. For more on running TypeScript, see run TypeScript code from the command line.

Debugging TypeScript in VS Code

VS Code can debug TypeScript directly. Create a file called .vscode/launch.json with this content:

json

{
  "version": "0.2.0",
  "configurations": [
    { "type": "node", "request": "launch", "name": "Debug TypeScript", "program": "${workspaceFolder}/app.ts", "runtimeArgs": ["--import", "tsx"] }
  ]
}

Set a breakpoint by clicking in the gutter next to a line number. Press F5 to start debugging. VS Code pauses at your breakpoint, and you can inspect variables, step through code, and see call stacks, all from your original .ts files.

If your project uses tsc instead of tsx, enable source maps in your tsconfig.json:

json

{
  "compilerOptions": {
    "sourceMap": true
  }
}

VS Code then maps the compiled JavaScript back to your TypeScript source, so breakpoints and error locations point to the right lines.

Next Steps

Your VS Code setup is ready. Next, write and compile your first TypeScript file from scratch with a guided walkthrough in create your first TypeScript file.