Урок 2: Установка и настройка окружения в TypeScript

В первом уроке мы разобрались, что такое TypeScript, зачем он нужен и почему он стал таким популярным среди разработчиков. Мы обсудили его ключевые преимущества, статическую типизацию, мощные инструменты для рефакторинга и компиляцию в чистый JavaScript.

Сегодня мы перейдем от теории к самой что ни на есть практике. Мы закатаем рукава и подготовим наше рабочее место. Установим всё необходимое программное обеспечение и настроим среду для комфортной и эффективной работы. Не буду скрывать, этот урок один из самых важных, ведь без правильно настроенного инструмента далеко не уедешь. Но не волнуйся! Я пройду каждый шаг вместе с тобой, подробно объясняя все детали. К концу этого урока у тебя будет полностью готовое к бою окружение и мы даже напишем и скомпилируем наш первый TypeScript-код.

Правильная настройка окружения

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

В программировании всё точно так же. Окружение (environment) это твой верстак с инструментами. От его настройки зависит буквально всё: скорость твоей работы, количество ошибок, которые ты сможешь избежать на раннем этапе и даже твое настроение. Хаос в настройках, неправильно установленные версии программ или конфликты между ними могут отбить всякое желание учиться. Напротив, гладкое, отлаженное окружение делает процесс программирования приятным и продуктивным.

В мире JavaScript и TypeScript основным «двигателем» и экосистемой является Node.js и его менеджер пакетов npm. Они и станут фундаментом нашего рабочего места. TypeScript это компилятор (tsc), который превращает наш typed-код в обычный JavaScript, понятный любому браузеру или среде выполнения Node.js. Наша задача сегодня установить и подружить их между собой.

Не спеши и внимательно следуй инструкциям. Если что-то пойдет не так (что маловероятно, но возможно), мы вместе разберемся и все починим. Готов? Тогда начнем с самого основания с установки Node.js и npm.

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

Node.js это среда выполнения JavaScript вне браузера. Изначально JavaScript мог исполняться только внутри браузера, но Node.js позволил запускать его на сервере, на твоем компьютере где угодно. Именно в среде Node.js мы будем запускать наш TypeScript-компилятор и многие другие вспомогательные инструменты.

npm (Node Package Manager) это гигантский репозиторий (библиотека) готового кода и инструмент для управления этим кодом. Представь себе огромный склад, где лежат миллионы бесплатных «деталей» (пакетов), которые можно легко взять и встроить в свой проект. npm идет в комплекте с установкой Node.js, так что, установив одно, ты автоматически получишь и второе.

Процесс установки для Windows:

1. Открой браузер и перейди на официальный сайт: https://nodejs.org/.

2. Ты увидишь две версии: LTS и «Current». Нас интересует версия LTS (Long-Term Support). Это стабильная версия с долгосрочной поддержкой, именно её используют в большинстве проектов. Скачай установщик, нажав на большую зеленую кнопку.

3. Запусти скачанный .msi файл. Откроется мастер установки. Просто нажимай «Next», не меняя стандартных настроек. Убедись, что галочка напротив «Automatically install the necessary tools» не стоит (она нам не нужна). Стандартный путь установки (C:\Program Files\nodejs\).

4. Закончи установку. После завершения установки закрой installer.

Процесс установки для macOS:

1. Способ 1 (рекомендуемый): Открой официальный сайт https://nodejs.org/, скачай установщик для версии LTS (файл с расширением .pkg) и запусти его, следуя инструкциям мастера установки.

2. Способ 2 (для продвинутых): Многие разработчики на macOS используют менеджер пакетов Homebrew. Если он у тебя установлен, просто открой терминал и введи команду: brew install node. Homebrew сам установит и Node.js, и npm.

Процесс установки для Linux (на примере Ubuntu/Debian):

1. Открой терминал.

2. Обнови список пакетов: sudo apt update

3. Установи Node.js и npm из официальных репозиториев: sudo apt install nodejs npm

4. Однако версия в репозиториях часто старая. Лучше использовать менеджер версий n. Сначала установи его: sudo npm install -g n

5. Затем установи последнюю LTS-версию: sudo n lts

Проверяем установку

После установки нам нужно убедиться, что всё прошло успешно и система видит наши новые инструменты.

1. Открой командную строку (терминал).

   • В Windows: Нажми Win + R, введи cmd и нажми Enter. Или найди в поиске «Командная строка». Более современный и удобный вариант — использовать PowerShell или терминал в твоем редакторе кода (например, в VS Code).

   • В macOS: Открой приложение «Терминал» (его можно найти через Spotlight поиск по Cmd + Space).

   • В Linux: Ты и так знаешь, где тут терминал 😉

2. В открывшемся окне введи следующую команду и нажми Enter:

   bash

   node -v

   Эта команда проверяет установленную версию Node.js. В ответ система должна вывести что-то вроде v18.17.0 (цифры будут другими, в зависимости от текущей версии). Главное — не должно быть ошибки «node is not recognized».

3. Теперь проверь версию npm:

   bash

   npm -v

   В ответ ты получишь номер версии, например, 9.6.7.

Если обе команды отработали и показали свои версии, то поздравляю! Фундамент заложен. Ты только что установил мощнейшую платформу и экосистему, с которой работают миллионы разработчиков по всему миру.

• Важное примечание: Версии со временем обновляются. Не пугайся, если у тебя будут более свежие цифры. Это хорошо!

• Совет от Максима: Запомни эти две команды: node -v и npm -v. Ты будешь использовать их постоянно, чтобы проверять, что всё в порядке и делиться версиями, если попросят помочь с ошибкой.

Установка TypeScript компилятора (tsc)

Итак, у нас есть Node.js и npm. Теперь настало время установить главный герой нашего курса — компилятор TypeScript. Его можно установить двумя способами: глобально и локально. Мы рассмотрим оба, потому что оба варианта полезны и используются в разных ситуациях.

Глобальная установка TypeScript

Глобальная установка означает, что компилятор tsc будет доступен из любой папки на твоем компьютере. Это очень удобно для быстрых экспериментов, проверки идеи или глобального доступа к команде tsc.

1. В том же терминале (командной строке) введи следующую команду:

   bash

   npm install -g typescript

   Разберем команду по частям:

   • npm — это менеджер пакетов, который мы только что установили.

   • install — команда для установки пакета.

   • -g — флаг (опция), который говорит npm установить пакет глобально (global).

   • typescript — название пакета, который мы хотим установить.

2. Нажми Enter. npm подключится к своему репозиторию, найдет последнюю стабильную версию пакета TypeScript и скачает его на твой компьютер, установив в системную папку.

3. Проверь установку. После завершения процесса введи команду:

   bash

   tsc -v

   Если всё прошло успешно, ты увидишь версию установленного TypeScript-компилятора, например, Version 5.3.3.

Отлично! Теперь у тебя есть глобальная команда tsc. Ты можешь запускать её из любой директории.

Зачем это нужно? Например, ты можешь быстро скомпилировать один файл, не создавая целый проект. Но у глобальной установки есть небольшой недостаток. Если ты работаешь над несколькими проектами, в каждом из них может требоваться своя, специфическая версия TypeScript. Глобальная же установка всегда будет использовать одну и ту же версию. Поэтому для реальных проектов мы используем…

Локальная установка TypeScript в проект

Локальная установка означает, что компилятор TypeScript и все его зависимости будут установлены в папку твоего конкретного проекта. Это современный и самый правильный подход. Он гарантирует, что все разработчики в команде (и даже твое «будущее я») будут использовать абсолютно одинаковую версию компилятора, что избавляет от множества проблем «а у меня на машине это работало!».

Мы будем использовать локальную установку для наших учебных проектов. Но чтобы её выполнить, нам сначала нужно…

Инициализация проекта (npm init и tsc --init)

Каждый проект на Node.js (а значит и на TypeScript) живет в своей собственной папке. В этой папке хранится не только исходный код, но и конфигурационные файлы, которые описывают проект, его зависимости и настройки.

Создаем структуру папок

1. Выбери или создай на своем компьютере папку, где будут храниться все твои учебные проекты по TypeScript. Например, C:\Users\ВашеИмя\Documents\typescript-learning\ или /Users/ВашеИмя/Development/typescript-learning/.

2. Внутри этой папки создай папку для нашего первого проекта. Назовем ее hello-typescript.

3. Открой терминал и перейди в эту созданную папку. Это можно сделать командой cd (change directory).

   • Например. cd C:\Users\ВашеИмя\Documents\typescript-learning\hello-typescript

   • Или для macOS/Linux. cd /Users/ВашеИмя/Development/typescript-learning/hello-typescript

   • Мой совет. Можно перетащить папку прямо в окно терминала и путь вставится автоматически (в большинстве терминалов).

Инициализация npm-проекта (npm init)

Внутри папки hello-typescript нам нужно создать файл package.json. Этот файл — сердце любого Node.js проекта. В нем хранится информация о проекте (имя, версия, описание), но что самое важное — список всех зависимостей (сторонних библиотек), которые нужны проекту для работы.

1. В терминале, открытом в папке hello-typescript, выполни команду:

   bash

   npm init -y

   Флаг -y (yes) говорит npm: «Используй значения по умолчанию для всех пунктов». Это быстро и удобно для начала.

2. После выполнения команды, посмотри содержимое папки. Ты увидишь новый файл package.json. Открой его в любом текстовом редакторе. Он будет выглядеть примерно так:

   json

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

   Позже мы будем редактировать этот файл вручную.

Локальная установка TypeScript

Теперь, когда у нас есть package.json, мы можем установить TypeScript локально, как зависимость нашего проекта.

1. В той же папке выполни команду:

   bash

   npm install typescript --save-dev

   Разберем и эту команду:

   • npm install typescript — мы уже знаем, что это установка пакета.

   • --save-dev — этот флаг говорит npm записать данную зависимость не в общий список, а в раздел devDependencies. Это зависимости, которые нужны только во время разработки (компилятор, линтеры, системы сборки), но не для запуска программы. Наш готовый JavaScript-код будет работать и без компилятора TypeScript.

2. После выполнения команды посмотри на свой package.json снова. Ты увидишь новый раздел:

   json

   "devDependencies": {
     "typescript": "^5.3.3"
   }

   Также в папке проекта появилась папка node_modules (здесь хранятся все скачанные пакеты) и файл package-lock.json (он фиксирует точные версии пакетов для гарантии идентичности окружения). Папку node_modules никогда не нужно коммитить в git и трогать вручную. Она управляется полностью через npm.

3. Проверь локальную установку. Попробуй проверить версию TypeScript, который теперь установлен в твоем проекте. Для этого используй команду:

   bash

   npx tsc -v

   npx — это утилита, которая идет в комплекте с npm. Она умеет запускать исполняемые файлы из папки node_modules твоего проекта. Так что эта команда запустит именно тот tsc, который мы только что установили локально.

   Ты снова увидишь версию TypeScript. Теперь у тебя есть два tsc: глобальный (который мы установили первой командой) и локальный. Команда tsc -v из любого места вызовет глобальный, а команда npx tsc -v, выполненная в папке проекта, вызовет локальный.

Инициализация TypeScript-конфигурации (tsc --init)

Самое время создать главный конфигурационный файл для TypeScript — tsconfig.json. Этот файл сообщает компилятору tsc, как именно нужно компилировать наш код: в какую версию JavaScript, куда класть скомпилированные файлы, какие строгие проверки включать и многое другое.

1. В терминале, находясь в папке проекта, выполни команду:

   bash

   npx tsc --init

   Эта команда говорит локально установленному компилятору tsc создать (--init) новый конфигурационный файл с настройками по умолчанию.

2. После выполнения в папке проекта появится файл tsconfig.json. Открой его. Ты увидишь огромное количество закомментированных настроек с пояснениями на английском. Не пугайся! Для начала нам понадобятся лишь несколько из них.

3. Настроим tsconfig.json под наши нужды. Найди и раскомментируй (убери // в начале строки) или измени следующие опции:

   json

   {
     "compilerOptions": {
       "target": "ES2016",               // Компилируем в современный, но хорошо поддерживаемый стандарт JS
       "module": "commonjs",             // Система модулей для Node.js
       "outDir": "./dist",               // Папка, куда компилятор будет складывать готовый JS-код
       "rootDir": "./src",               // Папка, где компилятор будет искать TS-исходники
       "strict": true,                   // Включает весь строгий набор проверок. ОСНОВНАЯ ФИШКА TS!
       "esModuleInterop": true,          // Упрощает совместимость модулей
       "skipLibCheck": true              // Ускоряет компиляцию, пропуская проверку файлов деклараций
     }
   }

   • outDir и rootDir: Это очень важные настройки. Мы говорим компилятору: «Ищи наши TypeScript-файлы (.ts) в папке src, а готовые JavaScript-файлы (.js) складывай в папку dist«. Это помогает поддерживать порядок в проекте. Не забудь создать папку src в корне проекта!

   • strict: true: Это, пожалуй, самая важная настройка. Она включает максимальный уровень строгости проверок TypeScript. Хотя поначалу это может вызывать сложности (компилятор будет ругаться на вещи, которые в JavaScript проходили бы молча), это — суперсила TypeScript. Она заставляет тебя писать более качественный и предсказуемый код и предотвращает множество ошибок еще до запуска программы. Мы будем работать в строгом режиме с самого начала.

Поздравляю! Ты только что создал и настроил свой первый TypeScript-проект с профессиональной структурой. У тебя есть package.json для управления зависимостями и tsconfig.json для управления компиляцией. Окружение почти готово!

Практическое задание: «Hello, TypeScript!»

Давай проверим, что всё работает, написав и скомпилировав наш первый TypeScript-код.

1. В папке проекта создай папку src (если еще не создал).

2. Внутри папки src создай файл index.ts. Расширение .ts — это TypeScript!

3. Открой файл index.ts в своем текстовом редакторе (я настоятельно рекомендую использовать Visual Studio Code имеет потрясающую встроенную поддержку TypeScript) и напиши следующий код:

   typescript

   // Это наш первый код на TypeScript!
   function greet(name: string): string {
     return `Hello, ${name}! Welcome to the TypeScript world.`;
   }
   
   const user = "Maxim";
   console.log(greet(user));

   Обрати внимание на синтаксис : string. Это и есть аннотация типа. Мы явно говорим компилятору: «Переменная name должна быть строкой и функция greet возвращает строку».

4. Сохрани файл.

5. Теперь скомпилируем его! Вернись в терминал, убедись, что ты находишься в корневой папке проекта (hello-typescript) и выполни команду:

   bash

   npx tsc

   Компилятор tsc прочитает файл tsconfig.json, поймет, что исходники лежат в src, найдет там index.ts, проверит его на ошибки и, если их нет, скомпилирует в JavaScript, положив результат в папку dist.

6. Посмотри на результат. Загляни в папку dist. Ты увидишь там файл index.js. Его содержимое будет примерно таким:

   javascript

   "use strict";
   // Это наш первый код на TypeScript!
   function greet(name) {
       return `Hello, ${name}! Welcome to the TypeScript world.`;
   }
   const user = "Maxim";
   console.log(greet(user));

   Видишь? TypeScript убрал все аннотации типов (: string), потому что в JavaScript их не существует и преобразовал код в чистый JS, понятный любой среде выполнения. При этом он учел нашу целевую версию ES2016 и использовал современный синтаксис шаблонных строк (обратные кавычки).

7. Запустим скомпилированный код! Выполни в терминале команду:

   bash

   node dist/index.js

   Команда node запускает JavaScript-файл в среде выполнения Node.js. Ты должен увидеть в терминале заветную фразу:

   text

   Hello, Maxim! Welcome to the TypeScript world.

   Ура! Ты только что написал, скомпилировали и запустили свою первую TypeScript-программу!

Что делать, если есть ошибки компиляции?

Давай специально допустим ошибку, чтобы посмотреть, как TypeScript нам помогает. Измени код в src/index.ts:

const user = 12345; // Меняем строку на число
console.log(greet(user)); // Передаем число в функцию, которая ждет строку

Снова запусти компиляцию: npx tsc. Компилятор тут же выдаст ошибку:

src/index.ts:6:19 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
6 console.log(greet(user));
                    ~~~~

Вот она, сила статической типизации! Компилятор нашел ошибку до запуска программы. Он говорит: «Ты пытаешься передать число (number) туда, где должна быть строка (string)». Он указал файл, строку и даже конкретное место. Мы можем сразу же исправить эту ошибку, не ломая голову потом, почему наша программа ведет себя странно.

Верни обратно строку const user = "Maxim";, скомпилируй и запусти снова. Ошибки нет!

Настройка скриптов в package.json

Каждый раз вводить npx tsc не очень удобно. Мы можем автоматизировать этот процесс, добавив скрипты в наш package.json.

1. Открой package.json и найди секцию "scripts".

2. Измени ее следующим образом:

   json

   "scripts": {
     "build": "tsc",
     "start": "node dist/index.js"
   },

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

   • npm run build — это будет аналогично команде npx tsc. Она скомпилирует наш проект.

   • npm start — запустит наш скомпилированный файл. Команда start — особенная, для нее можно не писать run, достаточно npm start.

Попробуй! Выполни в терминале:

npm run build
npm start

Удобно, правда? В дальнейшем мы добавим сюда скрипты для запуска в режиме наблюдения и другие полезные вещи.

Итоги второго урока

Сегодня мы проделали огромную и очень важную работу. Давай резюмируем:

1. Мы установили Node.js и npm, фундаментальную платформу для работы с JavaScript и TypeScript вне браузера.

2. Мы установили компилятор TypeScript двумя способами: глобально (для быстрых проверок) и локально (для реальных проектов). Запомни разницу и принцип: в проектах всегда используем локальную установку.

3. Мы инициализировали новый проект: создали package.json (npm init -y) и tsconfig.json (npx tsc --init).

4. Мы научились базовой настройке tsconfig.json: указали папки для исходников и скомпилированного кода и, что самое главное, включили строгий режим (strict: true).

5. Мы написали, скомпилировали и запустили нашу первую программу на TypeScript и увидели, как компилятор ловит ошибки типов на этапе компиляции.

Твое рабочее окружение готово! Ты теперь не просто теоретик, а практик, у которого всё настроено и работает. Это большой шаг.

В следующем уроке мы углубимся в самую суть TypeScript, систему типов. Мы подробно разберем базовые типы, такие как string, number, boolean, научимся выводить типы и поговорим о том, зачем всё это нужно. Будет интересно!

Если в процессе настройки возникли вопросы, не стесняйся задавать их в комментариях. Удачи и до встречи в третьем уроке!

Полный курс с уроками по TypeScript для начинающих