Введение в TypeScript

TypeScript — это язык с открытым исходным кодом, который поддерживает и развивает Microsoft.

По сути, TypeScript добавляет к JavaScript дополнительный синтаксис для более тесной интеграции с вашим редактором. Ловите ошибки рано — в редакторе или в CI/CD-пайплайне — и пишите более поддерживаемый код.

О других преимуществах TypeScript поговорим позже, а сейчас давайте посмотрим примеры!

Взгляните на этот фрагмент кода, а затем разберём его вместе:

type User = {
  name: string;
  age: number;
};

function isAdult(user: User): boolean {
  return user.age >= 18;
}

const justine = {
  name: 'Justine',
  age: 23,
} satisfies User;

const isJustineAnAdult = isAdult(justine);

Первая часть (с ключевым словом type) отвечает за объявление нашего пользовательского типа объекта, представляющего пользователей. Затем мы используем этот только что созданный тип, чтобы создать функцию isAdult, которая принимает один аргумент типа User и возвращает boolean. После этого мы создаём justine — наши примерные данные, которые можно использовать для вызова ранее определённой функции. Наконец, мы создаём новую переменную с информацией о том, является ли justine взрослой.

Об этом примере есть ещё пара вещей, которые стоит знать. Во-первых, если мы не соблюдём объявленные типы, TypeScript сообщит нам, что что-то не так, и предотвратит некорректное использование. Во-вторых, не всё обязательно типизировать явно — TypeScript выводит типы за нас. Например, переменная isJustineAnAdult имеет тип boolean, даже если мы не типизировали её явно, а justine была бы допустимым аргументом для нашей функции, хотя мы не объявили эту переменную как имеющую тип User.

TypeScript состоит из двух основных компонентов: самого кода и определений типов.

Кодовая часть — это обычный JavaScript с дополнительным специфичным для TypeScript синтаксисом для аннотаций типов. Когда код TypeScript компилируется, все специфичные для TypeScript части удаляются, в результате чего получается чистый JavaScript, который может работать в любом окружении. Например:

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

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

Например, когда вы используете Node.js с TypeScript, вам понадобятся определения типов для API Node.js. Они доступны через @types/node. Установите их так:

npm add --save-dev @types/node

Эти определения типов позволяют TypeScript понимать API Node.js и обеспечивают корректную проверку типов и автодополнение, когда вы используете функции вроде fs.readFile или http.createServer. Например:

// @errors: 2345
import { resolve } from 'node:path';

resolve(123, 456);

У многих популярных JavaScript-библиотек определения типов доступны в пространстве имён @types, которое поддерживает сообщество DefinitelyTyped. Это обеспечивает бесшовную интеграцию существующих JavaScript-библиотек с проектами на TypeScript.

TypeScript также включает мощные возможности трансформации, в частности для JSX (используемого в React и подобных фреймворках). Компилятор TypeScript может преобразовывать синтаксис JSX в обычный JavaScript, аналогично тому, как работает Babel. Хотя мы не будем рассматривать эти возможности трансформации в этих статьях, стоит отметить, что TypeScript — не только инструмент для проверки типов, но и инструмент сборки для преобразования современного синтаксиса JavaScript в совместимые версии для разных окружений.

Итак, у нас есть некоторый код на TypeScript. Как теперь его запустить? Есть несколько возможных способов запускать код на TypeScript, все их мы рассмотрим в следующих статьях.