TypeScript npm: как установить, запустить и проверить

Короткий ответ: typescript npm обычно означает установку TypeScript через npm-пакет typescript. В рабочем проекте лучше ставить его локально как dev-зависимость: npm install typescript --save-dev, а запускать компилятор через npx tsc. Так версия TypeScript будет закреплена внутри проекта, а не зависеть от случайной глобальной установки на компьютере

Если Node.js и npm уже установлены, минимальный путь выглядит так:

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

После последней команды вы должны увидеть номер версии TypeScript. Это первый признак, что npm-пакет установлен и компилятор tsc доступен для проекта

Что именно устанавливает npm

TypeScript не запускается в браузере и не заменяет JavaScript. npm ставит пакет typescript, внутри которого есть компилятор tsc. Он проверяет .ts-файлы, находит ошибки типов и выпускает обычный .js-код, который уже можно запускать в Node.js или подключать к странице

Локальная установка предпочтительнее глобальной по трем причинам:

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

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

npm install -g typescript
tsc --version

Но для реального проекта безопаснее держать TypeScript рядом с кодом и запускать его через npx

Минимальный hello world

Создайте файл index.ts:

function greet(name: string): string {
  return `Привет, ${name}!`;
}

console.log(greet("TypeScript"));

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

npx tsc index.ts

Рядом появится index.js. Запустите его:

node index.js

Ожидаемый результат:

Привет, TypeScript!

Если вы увидели этот вывод, установка через npm работает: TypeScript проверил типы, создал JavaScript-файл, а Node.js выполнил результат

Как настроить проект через tsconfig

Для одного файла можно запускать npx tsc index.ts, но в нормальном проекте удобнее создать tsconfig.json:

npx tsc --init

После этого можно компилировать весь проект одной командой:

npx tsc

Базовая настройка для учебного проекта может выглядеть так:

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

Теперь исходники можно хранить в src, а готовый JavaScript будет попадать в dist. Это удобно, потому что TypeScript-код и результат компиляции не смешиваются в одной папке

Удобные npm-скрипты

Чтобы не вспоминать команду npx tsc, добавьте скрипт в package.json:

{
  "scripts": {
    "build": "tsc",
    "check": "tsc --noEmit"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

После этого проверка и сборка запускаются так:

npm run check
npm run build

npm run check полезен, когда нужно только проверить типы, но не создавать .js-файлы. npm run build выпускает JavaScript

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

npm: command not found означает, что Node.js и npm не установлены или терминал не видит путь к ним. Проверьте установку Node.js, затем откройте новый терминал и выполните node -v и npm -v

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

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

Если компиляция прошла, но JavaScript не появился, проверьте noEmit в tsconfig.json. При noEmit: true TypeScript только проверяет код и ничего не записывает на диск

Что делать дальше

После установки TypeScript через npm логичный следующий шаг — разобраться, как подключить скомпилированный JavaScript к HTML или как настроить проект с React. Для навигации по теме используйте рубрику TypeScript, а рядом стоит подготовить отдельные материалы про tsconfig.json, typescript compiler и запуск TypeScript в редакторе кода

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

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

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