Как установить TypeScript: пошаговая инструкция

Короткий ответ: TypeScript устанавливают через npm-пакет typescript. Сначала нужен Node.js с npm, затем в папке проекта выполните npm install typescript --save-dev и проверьте установку командой npx tsc --version

Минимальные команды:

mkdir ts-install-demo
cd ts-install-demo
npm init -y
npm install typescript --save-dev
npx tsc --version

Если последняя команда показала версию TypeScript, установка прошла успешно

Почему лучше локальная установка

Локальная установка добавляет TypeScript в конкретный проект:

npm install typescript --save-dev

Плюсы:

  • версия фиксируется в package.json;
  • команда проекта использует одинаковый TypeScript;
  • не нужно зависеть от глобальных настроек компьютера;
  • запуск идет через npx tsc или npm-скрипт.

Глобальная установка тоже возможна:

npm install -g typescript
tsc --version

Но для рабочего проекта локальный вариант надежнее

Первый TypeScript-файл

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

const message: string = "TypeScript установлен";
console.log(message);

Скомпилируйте:

npx tsc hello.ts

Запустите результат:

node hello.js

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

TypeScript установлен

Так вы проверяете не только факт установки, но и реальную работу компилятора

Добавьте tsconfig

Для проекта удобнее создать конфиг:

npx tsc --init

После этого можно запускать:

npx tsc

А в package.json добавить:

{
  "scripts": {
    "check": "tsc --noEmit",
    "build": "tsc"
  }
}

Проверка:

npm run check
npm run build

Установка для VS Code

Если вы работаете в Visual Studio Code, редактор уже умеет подсвечивать TypeScript. Но проектный компилятор все равно нужен. После локальной установки откройте любой .ts-файл и убедитесь, что в терминале проходит:

npx tsc --noEmit

Если VS Code и терминал показывают разные ошибки, выберите project/workspace version TypeScript в статусной строке редактора. Так редактор будет использовать TypeScript из node_modules, а не свою встроенную версию

Установка для React или Vite

Если вы создаете новый React-проект, TypeScript можно получить сразу в шаблоне:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

В этом случае отдельная команда npm install typescript --save-dev может уже не понадобиться: шаблон добавит нужные зависимости сам. Но проверка остается той же: проект должен запускаться и проходить TypeScript-проверку

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

npm: command not found означает, что Node.js/npm не установлены или терминал не видит их в PATH

tsc: command not found после локальной установки — нормальная ситуация, если запускать просто tsc. Используйте npx tsc

Ошибка прав при npm install -g typescript — еще один повод не начинать с глобальной установки. Локальная установка обычно обходится без системных прав

Если hello.js не появился, проверьте, не включен ли noEmit в tsconfig.json

Если команда npx tsc --version работает в одной папке, но не работает в другой, проверьте, есть ли в текущей папке package.json и установлен ли TypeScript именно в этом проекте

Чем этот материал отличается от typescript npm

Запрос как установить typescript нужен для самого короткого маршрута: поставить, проверить, скомпилировать один файл. Запрос typescript npm шире: там важнее npm-скрипты, devDependencies и структура проекта

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

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

Оцените статью
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x