Установка Node.js, npm и TypeScript

Пошаговая инструкция по установке всего необходимого для работы с TypeScript: Node.js, npm, TypeScript и редактор кода. Мы пройдём каждый шаг вместе и убедимся, что всё работает.

📦 Что мы сегодня установим

Прежде чем начать установку, давайте разберёмся, зачем нам нужен каждый инструмент. Представьте, что вы собираете набор инструментов для ремонта: молоток, отвёртка, уровень. Каждый инструмент выполняет свою задачу. То же самое и с инструментами разработчика.

Итого: четыре инструмента. Установка каждого занимает пару минут. Весь процесс займёт не более 30 минут.

🟢 Шаг 1: Установка Node.js

Node.js — это среда выполнения JavaScript, которая позволяет запускать JS-программы на вашем компьютере, не открывая браузер. Это как Python или Java, только для JavaScript.

Зачем нам Node.js? Компилятор TypeScript (tsc) — это JavaScript-программа. Чтобы её запустить, нужна среда выполнения JavaScript. Вот для этого нам и нужен Node.js.

Скачивание

Перейдите на официальный сайт Node.js: nodejs.org

На главной странице вы увидите две кнопки для скачивания. Какую выбрать?

Скачайте установщик для вашей операционной системы (Windows, macOS или Linux) и запустите его.

Установка на macOS

Откройте скачанный .pkg-файл. Установщик проведёт вас через процесс установки. Принимайте все значения по умолчанию — нажимайте «Continue» и «Install».

Альтернативный способ для macOS — установка через Homebrew (если он у вас есть):

brew install node

Установка на Windows

Откройте скачанный .msi-файл. Установщик покажет мастер установки. Принимайте все значения по умолчанию, нажимайте «Next». Единственное — убедитесь, что опция «Automatically install the necessary tools» не отмечена (если не хотите устанавливать дополнительные компоненты).

Установка на Linux (Ubuntu/Debian)

Откройте терминал и выполните:

# Обновляем список пакетов
sudo apt update

# Устанавливаем Node.js
sudo apt install nodejs npm

Или используйте NVM (Node Version Manager) для управления версиями:

# Устанавливаем NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Перезапускаем терминал, затем:
nvm install --lts
nvm use --lts

Проверка установки

Откройте терминал (на macOS — «Терминал», на Windows — «cmd» или «PowerShell», на Linux — «Терминал») и введите:

node -v

Если всё установлено правильно, вы увидите номер версии:

v20.11.0

Также проверьте npm:

npm -v

10.2.4

Если вы видите номера версий — всё отлично! Node.js и npm установлены.

Что такое npm и зачем он нужен?

npm (Node Package Manager) — это менеджер пакетов для Node.js. Представьте его как «аппстор» для библиотек и инструментов. С помощью npm вы можете:

• Устанавливать готовые библиотеки: npm install lodash
• Обновлять установленные библиотеки: npm update
• Удалять ненужные библиотеки: npm uninstall lodash
• Запускать скрипты: npm start
• Управлять зависимостями проекта через файл package.json

npm — это ваш проводник в мире библиотек JavaScript. С его помощью вы будете устанавливать TypeScript и другие инструменты.

🔷 Шаг 2: Установка TypeScript

Теперь, когда у вас установлен Node.js и npm, мы можем установить TypeScript. Есть два способа это сделать. Разберём оба.

Способ 1: Глобальная установка (рекомендуется для начала)

Глобальная установка означает, что TypeScript будет доступен откуда угодно в вашей системе. Вы сможете запускать команду tsc из любой папки.

# Устанавливаем TypeScript глобально
npm install -g typescript

Флаг -g означает «глобально». Это значит, что TypeScript будет установлен не в конкретную папку, а в систему целиком.

После установки проверьте версию:

tsc --version

Вы должны увидеть что-то вроде:

Version 5.3.3

Если вы видите номер версии — поздравляем! TypeScript установлен и готов к работе.

Способ 2: Локальная установка (для проектов)

Локальная установка означает, что TypeScript будет установлен только в конкретном проекте. Это более правильный подход для реальных проектов, потому что:

• Разные проекты могут использовать разные версии TypeScript
• Версия TypeScript фиксируется в package.json — все члены команды используют одну и ту же версию
• Не засоряется глобальное пространство

# Создаём папку проекта
mkdir мой-проект
cd мой-проект

# Инициализируем npm (создаёт package.json)
npm init -y

# Устанавливаем TypeScript локально
npm install typescript

# Теперь tsc доступен через npx:
npx tsc --version

Команда npx tsc запускает локально установленный TypeScript. Это полезно, когда TypeScript установлен только в проекте, а не глобально.

Какой способ выбрать?

📝 Шаг 3: Установка VS Code

VS Code (Visual Studio Code) — это бесплатный редактор кода от Microsoft. Он стал стандартом индустрии для веб-разработки. Почему именно VS Code?

• Бесплатный — не нужно покупать лицензию
• Мощный — автодополнение, подсветка ошибок, встроенный терминал
• Расширяемый — тысячи плагинов для любых задач
• Кроссплатформенный — работает на Windows, macOS и Linux
• От Microsoft — создатели TypeScript сделали отличную интеграцию

Скачивание и установка

Перейдите на сайт: code.visualstudio.com

Нажмите кнопку скачивания для вашей операционной системы. Установка стандартная:

• macOS: перетащите приложение в папку «Программы»
• Windows: запустите установщик, принимайте все значения по умолчанию
• Linux: распакуйте архив или установите через менеджер пакетов

Первые настройки

После запуска VS Code рекомендуется установить несколько расширений, которые облегчат работу с TypeScript:

1. TypeScript Nightly — последняя версия TypeScript (опционально)
2. ESLint — проверка качества кода
3. Prettier — автоматическое форматирование кода

Чтобы установить расширение: откройте VS Code → нажмите Ctrl+Shift+X (или Cmd+Shift+X на macOS) → введите название в поиске → нажмите «Install».

Специального расширения для TypeScript устанавливать не нужно — поддержка TypeScript уже встроена в VS Code «из коробки». Это одна из причин, почему VS Code так хорош для работы с TypeScript.

Знакомство с интерфейсом

Давайте быстро познакомимся с основными элементами VS Code:

• Боковая панель (слева) — проводник файлов, поиск, расширения
• Редактор (центр) — здесь вы пишете код
• Терминал (снизу) — нажмите Ctrl+` (или Cmd+` на macOS)
• Строка состояния (снизу) — информация о файле, языке, кодировке

🏗️ Шаг 4: Создание первого проекта

Теперь давайте создадим наш первый TypeScript-проект и убедимся, что всё работает. Мы пройдём через полный цикл: создание файла, компиляция, запуск.

Создание папки проекта

Откройте терминал и создайте папку для проекта:

# Создаём папку для проекта
mkdir typescript-проект

# Заходим в папку
cd typescript-проект

Инициализация проекта

Создадим файл package.json — это конфигурационный файл проекта, который содержит информацию о проекте и его зависимостях:

# Инициализируем npm-проект
npm init -y

Флаг -y означает «принять все значения по умолчанию». Это создаст файл package.json с базовой информацией.

Установка TypeScript

# Устанавливаем TypeScript локально
npm install typescript --save-dev

Флаг --save-dev означает, что TypeScript — это «инструмент разработки», а не зависимость рантайма. Он будет записан в секцию devDependencies в package.json.

Откройте проект в VS Code

# Открываем текущую папку в VS Code
code .

Команда code . откроет текущую папку в VS Code. Если команда не работает, попробуйте открыть VS Code вручную: File → Open Folder → выберите папку проекта.

Создание первого TypeScript-файла

В VS Code создайте новый файл: File → New File (или Ctrl+N / Cmd+N). Сохраните его как main.ts (обратите внимание на расширение .ts).

Напишите в нём простой код:

// main.ts — наш первый TypeScript-файл
let сообщение: string = "Привет, TypeScript!";
let версия: number = 1;

function показатьСообщение(текст: string, номер: number): void {
  console.log(`${текст} (версия ${номер})`);
}

показатьСообщение(сообщение, версия);

Сохраните файл (Ctrl+S / Cmd+S).

🚀 Шаг 5: Компиляция и запуск

Откройте встроенный терминал в VS Code (Ctrl+` / Cmd+`) и попробуйте скомпилировать наш файл:

# Компилируем TypeScript-файл
npx tsc main.ts

Если ошибок нет, в папке проекта появится файл main.js — это обычный JavaScript, полученный из нашего TypeScript-файла.

Посмотрите, что в нём:

// main.js — скомпилированный JavaScript
"use strict";
let сообщение = "Привет, TypeScript!";
let версия = 1;
function показатьСообщение(текст, номер) {
    console.log(`${текст} (версия ${номер})`);
}
показатьСообщение(сообщение, версия);

Заметили? Все аннотации типов исчезли. Компилятор удалил их, потому что JavaScript не нуждается в типах.

Запуск скомпилированного кода

Теперь запустите JavaScript-файл с помощью Node.js:

# Запускаем JavaScript-файл
node main.js

Вы должны увидеть:

Привет, TypeScript! (версия 1)

Поздравляем! Вы только что:

1. Написали TypeScript-код
2. Скомпилировали его в JavaScript
3. Запустили результат с помощью Node.js

Попробуйте ошибку

Давайте посмотрим, как TypeScript ловит ошибки. Измените код в main.ts:

// main.ts — внесём ошибку
let сообщение: number = "Привет, TypeScript!";  // ❌ Строка вместо числа!

Сохраните файл и попробуйте скомпилировать:

npx tsc main.ts

Вы увидите ошибку:

main.ts:1:5 - error TS2322: Type 'string' is not assignable to type 'number'.

1 let сообщение: number = "Привет, TypeScript!";
      ~~~~~~~~~

Found 1 error in main.ts:1.

TypeScript сразу указал:

• Где ошибка (строка 1, позиция 5)
• Что за ошибка (строка не может быть присвоена числу)
• Как исправить (замените строку на число или измените тип)

Исправьте ошибку, снова скомпилируйте и убедитесь, что всё работает.

⚙️ Шаг 6: Удобные команды через npm

Каждый раз писать npx tsc main.ts — утомительно. Давайте настроим npm-скрипты, которые упростят процесс разработки.

Откройте файл package.json и найдите секцию "scripts". Добавьте туда новые команды:

{
  "name": "typescript-проект",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node main.js",
    "dev": "tsc --watch",
    "clean": "rm main.js"
  },
  "devDependencies": {
    "typescript": "^5.3.3"
  }
}

Теперь вы можете использовать эти команды:

# Компиляция проекта
npm run build

# Запуск проекта
npm run start

# Компиляция с наблюдением за изменениями (автоматическая перекомпиляция)
npm run dev

# Удаление скомпилированного файла
npm run clean

Режим наблюдения (--watch)

Режим --watch — один из самых удобных инструментов. Он заставляет компилятор следить за изменениями файлов и автоматически перекомпилировать их при сохранении.

# Запускаем в режиме наблюдения
npm run dev

Теперь каждый раз, когда вы сохраняете файл (Ctrl+S / Cmd+S), TypeScript автоматически перекомпилирует его. Вы можете сосредоточиться на написании кода и не думать о компиляции.

Чтобы остановить режим наблюдения, нажмите Ctrl+C в терминале.

📁 Структура проекта

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

typescript-проект/
├── node_modules/       # Установленные пакеты (автоматически)
├── package.json        # Конфигурация проекта
├── main.ts             # Наш TypeScript-файл
└── main.js             # Скомпилированный JavaScript

Давайте разберём каждый файл и папку:

Файл .gitignore

Создайте файл .gitignore в корне проекта. В него добавьте папки и файлы, которые не нужно отправлять в git:

# .gitignore
node_modules/
*.js
!jest.config.js

Этот файл говорит git: «Игнорируй папку node_modules и все файлы с расширением .js (кроме jest.config.js)». Почему .js? Потому что скомпилированный JavaScript можно всегда получить заново из TypeScript.

🔧 Дополнительные настройки VS Code

Давайте настроим VS Code для максимально комфортной работы с TypeScript.

Автосохранение

Включите автосохранение файлов. Это удобно в связке с режимом --watch:

1. Откройте настройки: Ctrl+, (или Cmd+,)
2. Найдите «Auto Save»
3. Установите значение «afterDelay»
4. Установите задержку: 1000 мс (1 секунда)

Форматирование при сохранении

Настройте VS Code автоматически форматировать код при сохранении:

1. Откройте настройки
2. Найдите «Format On Save»
3. Установите галочку

Рекомендуемые расширения

Создайте файл .vscode/extensions.json в корне проекта:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

Когда кто-то из вашей команды откроет проект в VS Code, он увидит предложение установить рекомендуемые расширения.

Настройки TypeScript в VS Code

VS Code имеет встроенные настройки для TypeScript. Вот несколько полезных:

{
  // Показывать ошибки TypeScript прямо в редакторе
  "typescript.validate.enable": true,

  // Автоматически добавлять недостающие импорты
  "typescript.preferences.importModuleSpecifier": "relative",

  // Форматирование при сохранении
  "editor.formatOnSave": true,

  // Настройка форматирования для TypeScript
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Эти настройки можно добавить в файл .vscode/settings.json в корне проекта или в глобальные настройки VS Code.

📋 Шпаргалка: полезные команды

Вот список команд, которые вам понадобятся в повседневной работе:

Установка и обновление

# Установить TypeScript глобально
npm install -g typescript

# Установить TypeScript локально в проекте
npm install typescript --save-dev

# Обновить TypeScript до последней версии
npm update typescript

# Посмотреть установленную версию
tsc --version
# или
npx tsc --version

Компиляция

# Скомпилировать один файл
npx tsc main.ts

# Скомпилировать весь проект (по tsconfig.json)
npx tsc

# Компиляция с наблюдением за изменениями
npx tsc --watch

# Компиляция с генерацией source maps
npx tsc --sourceMap

# Компиляция без генерации .js файлов (только проверка типов)
npx tsc --noEmit

npm-скрипты

# Запустить скрипт из package.json
npm run build
npm run start
npm run dev

# Посмотреть доступные скрипты
npm run

# Установить пакет как зависимость
npm install lodash
npm install lodash --save

# Установить пакет как зависимость разработки
npm install jest --save-dev

# Удалить пакет
npm uninstall lodash

VS Code горячие клавиши

# Открыть/закрыть терминал
Ctrl + ` (или Cmd + `)

# Сохранить файл
Ctrl + S (или Cmd + S)

# Открыть настройки
Ctrl + , (или Cmd + ,)

# Открыть палитру команд
Ctrl + Shift + P (или Cmd + Shift + P)

# Найти файл
Ctrl + P (или Cmd + P)

# Найти в файлах
Ctrl + Shift + F (или Cmd + Shift + F)

# Форматировать документ
Shift + Alt + F (или Shift + Option + F)

🔧 Решение распространённых проблем

Во время установки и настройки вы можете столкнуться с проблемами. Вот решения самых распространённых.

✅ Чек-лист: что должно работать

Прежде чем переходить к следующему уроку, убедитесь, что всё работает. Пройдите по этому чек-листу:

Если все пункты выполнены — вы готовы к следующему уроку! Если что-то не работает — вернитесь к соответствующему шагу и попробуйте снова.

✅ Итоги урока

• Node.js — среда выполнения JavaScript на компьютере
• npm — менеджер пакетов для установки библиотек
• TypeScript устанавливается через npm: npm install -g typescript
• VS Code — рекомендуемый редактор с встроенной поддержкой TypeScript
• Компиляция: npx tsc main.ts создаёт main.js
• Запуск: node main.js
• Режим --watch автоматически перекомпилирует при сохранении
• npm-скрипты упрощают повторяющиеся команды
• Теперь у вас есть всё необходимое для работы с TypeScript

Готовы? Переходите к следующему уроку: Первый файл .ts и компиляция →