JS Tower
JavaScript & TypeScript

Подготовка рабочей области

Настройка окружения для разработки на JavaScript и TypeScript

Цель урока

В этом уроке ты научишься:

  • Устанавливать Node.js
  • Настраивать редактор кода
  • Создавать первый проект
  • Запускать JavaScript и TypeScript код

Установка Node.js

Node.js — среда выполнения JavaScript вне браузера. Она нужна для запуска скриптов, работы с npm и современными инструментами.

Шаг 1: Скачивание

  1. Перейди на nodejs.org
  2. Скачай LTS версию (Long Term Support — стабильная)
  3. Запусти установщик

Какую версию выбрать?

LTS — для стабильной работы. Current — для экспериментов с новыми функциями.

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

Windows:

  • Запусти скачанный .msi файл
  • Следуй инструкциям установщика
  • Убедись, что галочка "Add to PATH" включена

macOS:

  • Запусти скачанный .pkg файл
  • Или через Homebrew: brew install node

Linux (Ubuntu/Debian):

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Шаг 3: Проверка установки

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

node --version

Должна вывестись версия, например: v20.10.0

npm --version

Должна вывестись версия npm, например: 10.2.3

Команда не найдена?

Если терминал не распознаёт команду, перезапусти его. На Windows может потребоваться перезагрузка.

Выбор редактора кода

Visual Studio Code (рекомендуется)

VS Code — бесплатный редактор от Microsoft с отличной поддержкой JavaScript и TypeScript.

Установка:

  1. Перейди на code.visualstudio.com
  2. Скачай версию для своей ОС
  3. Установи и запусти

Настройка VS Code

Обязательные расширения

Открой VS Code, нажми Ctrl+Shift+X (или Cmd+Shift+X на Mac) и установи:

РасширениеОписание
ESLintПроверка качества кода
PrettierАвтоматическое форматирование
JavaScript (ES6) code snippetsБыстрые шаблоны
Path IntellisenseАвтодополнение путей

Полезные расширения

РасширениеОписание
Error LensПоказывает ошибки прямо в коде
GitLensУлучшенная работа с Git
Material Icon ThemeКрасивые иконки файлов
Auto Rename TagАвтопереименование HTML тегов

Настройки VS Code

Открой настройки (Ctrl+,) и добавь в settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

Альтернативные редакторы

РедакторОсобенности
WebStormПлатная IDE от JetBrains, мощная из коробки
Sublime TextБыстрый и лёгкий
Vim/NeovimДля опытных пользователей

Терминал

Встроенный терминал VS Code

Открой терминал в VS Code: Ctrl+`` (или View → Terminal`).

Рекомендуемые терминалы

Windows:

  • Windows Terminal — современный терминал от Microsoft
  • Git Bash — поставляется с Git

macOS:

  • iTerm2 — улучшенный терминал
  • Встроенный Terminal

Linux:

  • Встроенный терминал дистрибутива

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

Шаг 1: Создание папки

mkdir js-learning
cd js-learning

Шаг 2: Инициализация проекта

npm init -y

Команда создаст файл package.json:

{
  "name": "js-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Шаг 3: Создание файла

Создай файл index.js:

// Мой первый JavaScript код
console.log("Привет, мир!");

// Переменные
let name = "Разработчик";
console.log("Привет, " + name + "!");

// Простая функция
function greet(person) {
  return "Добро пожаловать, " + person + "!";
}

console.log(greet("Новичок"));

Шаг 4: Запуск

node index.js

Вывод:

Привет, мир!
Привет, Разработчик!
Добро пожаловать, Новичок!

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

Базовая структура

index.js
package.json

Рекомендуемая структура для обучения

index.js
package.json
README.md

Настройка TypeScript

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

npm install -g typescript

Проверка:

tsc --version

Шаг 2: Инициализация

tsc --init

Создастся файл tsconfig.json.

Шаг 3: Базовая конфигурация

Замени содержимое tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Шаг 4: Первый TypeScript файл

Создай src/index.ts:

// Типизированная переменная
let message: string = "Привет, TypeScript!";
console.log(message);

// Типизированная функция
function greet(name: string): string {
  return `Добро пожаловать, ${name}!`;
}

console.log(greet("Разработчик"));

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

tsc
node dist/index.js

Шаг 6: Автоматическая компиляция

tsc --watch

TypeScript будет автоматически перекомпилировать при изменениях.

Полезные npm скрипты

Добавь в package.json:

{
  "scripts": {
    "start": "node src/index.js",
    "dev": "node --watch src/index.js",
    "build": "tsc",
    "build:watch": "tsc --watch"
  }
}

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

npm start       # Запуск
npm run dev     # Запуск с автоперезагрузкой (Node 18+)
npm run build   # Компиляция TypeScript

Запуск кода в браузере

Способ 1: HTML файл

Создай index.html:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
</head>
<body>
  <h1>Открой консоль (F12)</h1>
  <script src="index.js"></script>
</body>
</html>

Открой файл в браузере и нажми F12 для просмотра консоли.

Способ 2: Консоль браузера

  1. Открой любой сайт
  2. Нажми F12 (DevTools)
  3. Перейди на вкладку Console
  4. Пиши JavaScript код прямо там

Способ 3: Онлайн песочницы

СервисОписание
CodeSandboxПолноценная среда разработки
StackBlitzБыстрая среда для веб-проектов
JSFiddleПростая песочница
CodePenДля экспериментов с HTML/CSS/JS
TypeScript PlaygroundОфициальная песочница TypeScript

Отладка кода

В VS Code

  1. Открой файл .js или .ts
  2. Поставь точку останова (клик слева от номера строки)
  3. Нажми F5 или Run → Start Debugging
  4. Выбери "Node.js"

В браузере

  1. Открой DevTools (F12)
  2. Перейди на вкладку Sources
  3. Найди свой файл
  4. Поставь точку останова
  5. Перезагрузи страницу

console методы

console.log("Обычный вывод");
console.error("Ошибка");
console.warn("Предупреждение");
console.table([{a: 1}, {a: 2}]); // Таблица
console.time("timer");
// ... код
console.timeEnd("timer"); // Время выполнения
console.dir(object); // Структура объекта

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

Убедись, что всё работает:

# Node.js установлен
node --version

# npm работает
npm --version

# TypeScript установлен
tsc --version

# Проект создан и запускается
cd js-learning
npm start

Что дальше

Теперь ты готов начать изучение JavaScript! Переходи к первому модулю:

Модуль 1: Базовый синтаксис

Частые проблемы

"node" не является внутренней командой

Решение: Перезапусти терминал. Если не помогло — переустанови Node.js с галочкой "Add to PATH".

Ошибка EACCES при npm install -g

Решение (macOS/Linux):

sudo npm install -g package-name

Или настрой npm для установки без sudo:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH

TypeScript не компилируется

Проверь:

  1. Файл имеет расширение .ts
  2. tsconfig.json существует
  3. Запусти tsc из папки проекта

Дорожная карта

Путь от нуля до Middle JavaScript/TypeScript разработчика

Переменные

Как создавать и использовать переменные в JavaScript

On this page

Цель урокаУстановка Node.jsШаг 1: СкачиваниеШаг 2: УстановкаШаг 3: Проверка установкиВыбор редактора кодаVisual Studio Code (рекомендуется)Настройка VS CodeОбязательные расширенияПолезные расширенияНастройки VS CodeАльтернативные редакторыТерминалВстроенный терминал VS CodeРекомендуемые терминалыСоздание первого проектаШаг 1: Создание папкиШаг 2: Инициализация проектаШаг 3: Создание файлаШаг 4: ЗапускСтруктура проектаБазовая структураРекомендуемая структура для обученияНастройка TypeScriptШаг 1: Установка TypeScriptШаг 2: ИнициализацияШаг 3: Базовая конфигурацияШаг 4: Первый TypeScript файлШаг 5: Компиляция и запускШаг 6: Автоматическая компиляцияПолезные npm скриптыЗапуск кода в браузереСпособ 1: HTML файлСпособ 2: Консоль браузераСпособ 3: Онлайн песочницыОтладка кодаВ VS CodeВ браузереconsole методыПроверка готовностиЧто дальшеЧастые проблемы"node" не является внутренней командойОшибка EACCES при npm install -gTypeScript не компилируется