Зачем TypeScript в автотестах

Урок: Что такое TypeScript

Введение

Представь, что ты пишешь код на JavaScript и передаёшь переменную в функцию. Сегодня это строка, завтра число, послезавтра вообще объект — и всё вроде бы работает… пока в какой-то момент код не ломается в неожиданном месте.

Это одна из главных особенностей JavaScript — он очень гибкий. Но эта гибкость часто приводит к ошибкам, которые сложно отловить заранее.

И вот здесь появляется TypeScript.

TypeScript — это не замена JavaScript, а надстройка над ним. Он помогает писать код более предсказуемо и безопасно. Можно сказать, что это тот же JavaScript, но с дополнительными «подсказками» и проверками.

Главная идея урока: TypeScript позволяет описывать, какие данные ты используешь, чтобы находить ошибки ещё до запуска кода.

JavaScript и его проблема гибкости

Чтобы понять, зачем нужен TypeScript, давай посмотрим на обычный JavaScript.

function greet(name) {
  return 'Hello, ' + name.toUpperCase();
}

console.log(greet('Alex'));
try {
  console.log(greet(123));
} catch (e) {
  console.log('ошибка при числе:', e.message);
}

Что здесь происходит:

  • функция ожидает строку;
  • но JavaScript это никак не контролирует;
  • ошибка появляется только во время выполнения (toUpperCase не существует у числа).

Это значит, что ты узнаешь о проблеме слишком поздно — уже при запуске.

Что добавляет TypeScript

TypeScript позволяет заранее сказать: «эта переменная должна быть строкой».

function greet(name: string): string {
  return 'Hello, ' + name.toUpperCase();
}

console.log(greet('Alex'));
// greet(123); // ошибка TS: аргумент типа number нельзя передать в параметр типа string

Теперь:

  • name: string — это указание типа;
  • TypeScript проверяет код ещё на этапе разработки;
  • вызов с числом не пройдёт компиляцию — проблему видно в редакторе, не запуская программу.

Это называется статическая типизация — проверка типов до выполнения кода.

TypeScript — это всё ещё JavaScript

Важно понять: TypeScript не заменяет JavaScript.

Он работает так:

  1. Ты пишешь код на TypeScript
  2. Специальный инструмент (компилятор) преобразует его в обычный JavaScript
  3. Уже JavaScript выполняется в браузере или Node.js

Пример:

const message: string = 'Hello';

После компиляции это станет:

const message = 'Hello';

То есть:

  • все типы исчезают;
  • остаётся чистый JavaScript;
  • TypeScript — это инструмент разработки, а не выполнения.

Зачем нужны типы

Типы — это просто описание данных.

Они помогают ответить на вопросы:

  • что здесь хранится?
  • что функция принимает?
  • что она возвращает?

Пример:

let age: number = 25;
let isActive: boolean = true;

Здесь:

  • number — число
  • boolean — true/false

TypeScript не даёт сделать так:

let age: number = 25;
console.log('начальное значение:', age);
// age = 'twenty five'; // ошибка TS: string нельзя присвоить number

И это хорошо — ты сразу видишь проблему.

Как TypeScript помогает в реальной разработке

TypeScript даёт несколько важных преимуществ:

1. Раннее обнаружение ошибок

Ошибки находятся до запуска кода.

2. Подсказки в редакторе

Когда ты пишешь код, редактор:

  • подсказывает методы;
  • показывает, какие параметры нужны;
  • помогает не ошибиться.

3. Понятный код

Когда ты смотришь на функцию:

function login(username: string, password: string): boolean {
  return true;
}

Ты сразу понимаешь:

  • что принимает функция;
  • что возвращает;
  • как её использовать.

Связь с дальнейшими уроками

В этом уроке ты познакомился с самой идеей TypeScript.

Дальше мы будем постепенно углубляться:

  • сначала разберём базовые типы (string, number, boolean, any);
  • затем научимся типизировать переменные и функции;
  • потом перейдём к объектам и интерфейсам;
  • и в конце применим всё это в Playwright и Page Object.

То есть этот урок — фундамент, на котором строится всё остальное.

Где используется TypeScript на практике

TypeScript активно используется:

  • в frontend-разработке (React, Angular);
  • в backend (Node.js);
  • в тестировании (в том числе Playwright);
  • в больших проектах, где важно поддерживать код.

Особенно он полезен там, где:

  • много кода;
  • работает команда;
  • важно избегать ошибок.

Итоговое понимание

TypeScript — это способ сделать JavaScript более надёжным и понятным.

Он не меняет сам язык, а добавляет уровень контроля:

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

Главная идея, которую важно унести:

TypeScript — это не про «усложнение», а про уменьшение хаоса в коде и уверенность в том, что он работает правильно.

И дальше, шаг за шагом, мы научимся использовать эту систему типизации в реальных задачах.