Как установить TypeScript в Visual Studio Code

Короткий ответ: в Visual Studio Code не нужно устанавливать расширение, чтобы редактор начал понимать TypeScript. VS Code уже имеет TypeScript language service для подсказок и ошибок в редакторе. Но компилятор tsc, который превращает .ts в .js, нужно поставить отдельно через npm: лучше локально в проект командой npm install typescript --save-dev

Минимальные шаги:

node -v
npm -v
npm init -y
npm install typescript --save-dev
npx tsc --version

Если npx tsc --version показывает версию, TypeScript установлен для проекта

Почему VS Code уже подсвечивает TypeScript

VS Code умеет редактировать TypeScript из коробки: подсказки, автодополнение, переход к определению, базовые диагностики. Но это не значит, что в проекте установлен компилятор

Редакторная поддержка и компилятор — разные вещи:

• language service помогает писать код в VS Code;
• tsc проверяет и компилирует проект;
• tsconfig.json задает правила проекта.

Поэтому правильная проверка не “подсветилось ли в редакторе”, а “проходит ли npx tsc --noEmit”

Создайте первый файл

Создайте src/hello.ts:

const message: string = "TypeScript работает в VS Code";
console.log(message);

Добавьте tsconfig.json:

npx tsc --init

Можно использовать простую настройку:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "strict": true,
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Проверьте:

npx tsc
node dist/hello.js

Ожидаемый вывод:

TypeScript работает в VS Code

Как запустить TypeScript в VS Code

Откройте встроенный терминал VS Code и выполняйте те же команды:

npx tsc --noEmit
npx tsc
node dist/hello.js

Можно добавить npm-скрипты:

{
  "scripts": {
    "check": "tsc --noEmit",
    "build": "tsc",
    "start": "node dist/hello.js"
  }
}

Теперь запуск понятнее:

npm run check
npm run build
npm run start

Workspace version TypeScript

Иногда VS Code показывает одну ошибку, а npx tsc — другую. Частая причина: редактор использует встроенную версию TypeScript, а проект компилируется локальной версией из node_modules

Чтобы выбрать проектную версию:

1. Откройте любой .ts файл.
2. Нажмите на версию TypeScript в status bar.
3. Выберите Use Workspace Version.

Если версия не появляется, убедитесь, что TypeScript установлен локально:

npm install typescript --save-dev

Для workspace-настройки можно добавить .vscode/settings.json:

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

После этого VS Code будет точнее совпадать с тем, что видит ваш проект

Build Task

VS Code умеет запускать tsc через build task. Откройте команду Terminal: Run Build Task, выберите tsc: build, и редактор создаст задачу сборки

Пример .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

Так ошибки TypeScript будут попадать в панель Problems

Частые ошибки

tsc: command not found появляется, если TypeScript установлен локально, а вы запускаете tsc напрямую. Используйте npx tsc или npm-скрипт

Если VS Code не видит типы, перезапустите TypeScript server: команда TypeScript: Restart TS Server

Если node dist/hello.js не работает, сначала выполните npx tsc и проверьте, появился ли файл в dist

Если редактор и терминал спорят, выберите workspace version TypeScript

Что почитать дальше по TypeScript

Если нужен общий маршрут по теме, откройте рубрику TypeScript. Для соседних задач пригодятся эти разборы:

• Create React App и TypeScript: как установить, запустить и проверить
• TypeScript npm: как установить, запустить и проверить
• TypeScript скачать: как установить, запустить и проверить
• TypeScript online: где запустить код без установки