Урок 3: Ваш первый файл TypeScript, компиляция и запуск

На предыдущих уроках мы разобрались, зачем нужен TypeScript и подготовили наше рабочее окружение.

Сегодняшний урок, это наш первый настоящий, полноценный шаг. Мы не просто напишем несколько строчек кода, мы полностью пройдем весь цикл разработки на TypeScript, от идеи в нашей голове до работающей программы. Мы создадим наш первый .ts-файл, узнаем, как превратить его в понятный браузеру и Node.js JavaScript и настроим главный файл проекта tsconfig.json, который сделает нашу работу профессиональной и удобной. Это фундамент, на котором мы будем строить все наши будущие проекты.

Пишем наш первый Hello, TypeScript!

Любая новая технология, язык или фреймворк по традиции начинается с программы «Hello, World!». Мы не будем нарушать эту славную традицию. Эта простая программа позволит нам сосредоточиться не на сложной логике, а на самом процессе: написании, компиляции и запуске.

Откройте вашу любимую IDE (я надеюсь, вы последовали моему совету и установили VS Code) и создайте новую папку для нашего учебного проекта. Назовем ее, например, my-first-typescript. Теперь внутри этой папки создайте файл с именем hello.ts. Расширение .ts это и есть наш маркер, что файл содержит код на TypeScript.

Щелкните по файлу и напишите в него следующий код:

// hello.ts
let message: string = "Hello, TypeScript!";
console.log(message);

Давайте разберем эту простую, но очень важную конструкцию.

1. let message: string = ... вот он, наш первый осознанный тип! Мы явно говорим компилятору: «Смотри, переменная message может хранить только строку (string). Ни число, ни массив, ни что-либо еще. Только строку». Это и есть главная суть TypeScript, статическая типизация. Мы добавляем аннотацию типа : string после имени переменной.

2. = "Hello, TypeScript!" здесь мы присваиваем переменной строковое значение. Компилятор проверяет: тип значения совпадает с заявленным типом переменной? Да, это строка. Отлично, ошибок нет.

3. console.log(message); здесь все просто. Мы выводим значение нашей переменной в консоль. Эта строка ничем не отличается от обычного JavaScript.

Сохраните файл (Ctrl+S). Наш первый TypeScript-код готов! Но как же его выполнить? Вот здесь мы и подходим к самому главному, к компиляции.

Компиляция: превращаем TypeScript в JavaScript

Браузеры и среда выполнения Node.js не понимают TypeScript напрямую. Они понимают только JavaScript. Поэтому наш прекрасный типизированный код нужно скомпилировать (преобразовать) в чистый JavaScript. Эту магию совершает компилятор TypeScript (TSC), который мы установили на прошлом уроке.

Откройте встроенный терминал в VS Code (View -> Terminal или Ctrl+`). Убедитесь, что ваша текущая директория это папка с файлом hello.ts. Теперь введите волшебную команду:

tsc hello.ts

Нажмите Enter. Если вы все сделали правильно, вы не увидите никаких сообщений об ошибках. Молчание компилятора это лучший комплимент от TSC! Но что более важно посмотрите на содержимое папки вашего проекта. Рядом с hello.ts появился новый файл hello.js.

Откройте его и взгляните на его содержимое:

// hello.js
var message = "Hello, TypeScript!";
console.log(message);

Вот оно! Наш скомпилированный JavaScript. Компилятор проделал важную работу:

• Он убрал аннотацию типа : string. В JavaScript ее просто не существует.

• Он заменил ключевое слово let на var. Это поведение по умолчанию для целевых версий ECMAScript ниже ES6 (мы научимся это менять позже с помощью tsconfig.json). Самое главное логика программы полностью сохранена.

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

А что, если сделать ошибку? Давайте попробуем. Вернитесь в hello.ts и попробуйте нарушить правило типов. Например, попробуйте присвоить число переменной, которая ожидает строку:

// hello.ts (версия с ошибкой)
let message: string = 123; // Ошибка! Тип 'number' не может быть присвоен типу 'string'.
console.log(message);

Теперь снова запустите компиляцию:

tsc hello.ts

На этот раз компилятор немедленно сообщит об ошибке!
hello.ts:1:5 - error TS2322: Type 'number' is not assignable to type 'string'.

Вот она, сила TypeScript в действии! Он поймал ошибку еще до запуска программы. Мы не узнаем об этом в runtime, когда наш код уже работает у пользователя. Мы видим это сразу, на этапе разработки. Это экономит огромное количество времени и нервов. Исправьте ошибку обратно, прежде чем двигаться дальше.

Запуск скомпилированного JavaScript-файла

Итак, у нас есть файл hello.js,  валидный, чистый JavaScript. Теперь его можно запустить в любой среде, которая исполняет JavaScript. Поскольку мы с вами работаем в Node.js, давайте сделаем это.

В том же терминале, убедившись, что компиляция прошла успешно и файл hello.js существует, введите команду:

node hello.js

Вы должны мгновенно увидеть результат в терминале:
Hello, TypeScript!

Поздравляю! Вы только что написали, скомпилировали и запустили свою первую программу на TypeScript. Это огромный шаг. Вы почувствовали на себе основной рабочий процесс: написал -> скомпилировал -> запустил. Однако, постоянно вручную компилировать каждый файл через tsc filename.ts очень неудобно. Особенно когда файлов становится много. Для этого существует гораздо более мощный и правильный способ, конфигурационный файл.

Настраиваем наш проект: tsconfig.json

Компилятор TypeScript невероятно гибкий. Он может быть настроен под самые разные нужды: для старого браузера, для современного Node.js, для строгой проверки или, наоборот, для мягкой миграции с JavaScript. Все эти настройки хранятся в специальном файле tsconfig.json в корне вашего проекта.

Создать этот файл очень просто. В терминале, находясь в корневой папке проекта (my-first-typescript), выполните команду:

tsc --init

Эта команда создаст файл tsconfig.json с огромным количеством закомментированных настроек и несколькими активными. Это наша карта настроек компилятора. Откройте этот файл. Вы увидите десятки опций с комментариями. Не пугайтесь! Для начала нам важно понять и настроить лишь несколько ключевых из них.

Давайте пройдемся по самым важным настройкам, которые мы будем использовать в нашем курсе.

1. target: Во что компилируем?
Опция "target" определяет, в какую версию JavaScript будет компилироваться наш TypeScript-код. Например, "es5" для максимальной совместимости со старыми браузерами, "es6" (или "es2015") для современных сред, поддерживающих стандарт ES6, "es2022" для самых новых возможностей.

Найдите в файле строку:

"target": "es2016",

Давайте поменяем ее на "es2020" для более современного вывода. Обратите внимание: если мы выберем современную цель, компилятор будет меньше преобразовывать наш код. Например, он будет использовать let и const вместо var и стрелочные функции останутся стрелочными функциями.

2. module: Как организуем модули?
Эта опция определяет, в какой системе модулей будет скомпилирован код: CommonJS (для Node.js), ES6 modules (для браузеров), UMD, AMD и другие. Поскольку мы запускаем код через Node.js и современные версии Node.js отлично понимают модули ES6, мы можем оставить "ESNext". Но для полной совместимости с большинством версий Node.js часто используют "CommonJS".

"module": "commonjs",

3. outDir: Куда складываем результат?
Сейчас наши .js-файлы создаются прямо рядом с .ts-файлами. Это быстро захламляет папку проекта. Гораздо лучше складывать результаты компиляции в отдельную папку, например, ./dist.

Найдите и раскомментируйте (уберите //) опцию "outDir":

"outDir": "./dist",

Теперь при компиляции TypeScript создаст папку dist (от слова «distribution» – дистрибутив) и будет складывать все скомпилированные .js-файлы туда, сохраняя структуру папок.

4. rootDir: Откуда берем исходники?
Эта настройка работает в паре с outDir. Она говорит компилятору, где находятся наши исходные TypeScript-файлы. Если мы ее не укажем, TSC будет искать .ts-файлы по всему проекту и повторять их структуру в outDir. Лучше явно указать корневую папку с исходниками, например, ./src.

Найдите и раскомментируйте опцию "rootDir":

"rootDir": "./src",

Теперь наш проект приобретает четкую структуру: исходники в src, готовый продукт в dist.

5. strict: Строгий режим наш лучший друг!
Это, пожалуй, самая важная настройка. Когда "strict": true, включается целый набор правил для максимально строгой проверки типов. Это заставляет вас писать более качественный и предсказуемый код. Хотя поначалу это может вызывать сложности, это лучший способ учить и использовать TypeScript. Он предотвращает огромное количество потенциальных ошибок.

Убедитесь, что эта настройка включена:

"strict": true,

6. Другие полезные флаги

• "esModuleInterop": true эта настройка упрощает импорт CommonJS-модулей (как многие npm-пакеты) в модули ES6. Всегда держите ее включенной.

• "skipLibCheck": true ускоряет компиляцию, пропуская проверку типов в файлах деклараций (.d.ts) установленных библиотек. Рекомендуется включать.

Давайте приведем наш проект в порядок. Создайте в корне проекта две папки: src и dist. Переместите файл hello.ts в папку src. Ваша структура проекта теперь должна выглядеть так:

my-first-typescript/
├── dist/
├── src/
│   └── hello.ts
└── tsconfig.json

Теперь, чтобы скомпилировать ВЕСЬ проект, а не один файл, просто введите в терминале команду:

tsc

Компилятор прочитает tsconfig.json, поймет, что все исходники лежат в src и положит результат в dist. Проверьте папку dist,  там должен появиться hello.js.

Чтобы запустить программу, теперь нужно указать путь до скомпилированного файла:

node dist/hello.js

Вы снова увидите заветное Hello, TypeScript!.

Чтобы постоянно не вводить tsc после каждого изменения, вы можете запустить компилятор в режиме наблюдения:

tsc --watch

или

tsc -w

Компилятор будет работать в фоне и автоматически перекомпилировать любой .ts-файл, как только вы его сохраните. Это основной режим работы во время разработки.

Практические задачи для закрепления

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

Задача 1: Базовое знакомство
Цель: Написать, скомпилировать и запустить свою первую программу.

1. В папке src создайте новый файл task1.ts.

2. Напишите программу, которая объявляет две переменные: ваше имя (строка) и ваш возраст (число). Явно укажите типы.

3. Выведите в консоль строку вида: «Привет, меня зовут [Имя] и мне [Возраст] лет.»

4. Скомпилируйте проект командой tsc.

5. Запустите полученный JS-файл из папки dist с помощью Node.js.

Решение:

// src/task1.ts
let userName: string = "Максим";
let userAge: number = 30;
console.log(`Привет, меня зовут ${userName} и мне ${userAge} лет.`);

Задача 2: Намеренная ошибка
Цель: Увидеть, как TypeScript отлавливает ошибки типов на этапе компиляции.

1. В файле task1.ts попробуйте присвоить переменной userName число, а переменной userAge строку.

2. Попробуйте скомпилировать проект (tsc). Убедитесь, что компилятор выдал ожидаемые ошибки.

3. Верните код обратно в рабочее состояние.

Задача 3: Исследуем tsconfig.json
Цель: Понять, как настройки влияют на конечный код.

1. В tsconfig.json поменяйте значение "target" с "es2020" на "es5".

2. Запустите компиляцию (tsc).

3. Откройте скомпилированный файл dist/task1.js и посмотрите, как изменился код. Обратите внимание, что шаблонная строка (обратные кавычки) и let были преобразованы в конструкции ES5.

4. Верните "target": "es2020".

Задача 4: Работа с режимом watch
Цель: Научиться использовать автоматическую компиляцию.

1. В терминале запустите компилятор в режиме наблюдения: tsc --watch.

2. Вернитесь в ваш файл src/task1.ts и внесите любое небольшое изменение (например, поменяйте имя в переменной userName).

3. Сохраните файл.

4. Вы сразу же увидите в терминале сообщение о том, что файл был скомпилирован.

5. Запустите node dist/task1.js снова, чтобы увидеть новые изменения. Остановить режим watch можно сочетанием клавиш Ctrl+C.

Итоги урока

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

Самое главное вы настроили сердце вашего TypeScript-проекта, файл tsconfig.json. Вы узнали о ключевых настройках, таких как target, module, outDir, rootDir и самом важном режиме strict. Вы организовали структуру проекта по стандартам, отделив исходный код от скомпилированного.

На следующем уроке мы углубимся в систему типов TypeScript. Мы подробно разберем все базовые типы, такие как number, string, boolean, array, а также познакомимся с типами, которых нет в JavaScript, например, any, unknown и кортежами (tuples). Будет еще интереснее!

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

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