news.shamcode.ru | Как заставить TS работать на вас

Привет! Меня зовут Дмитрий, и я уже много лет работаю с TypeScript. За это время я был частью разных команд с разным уровнем владения этим языком, в том числе тех, кто только готовился перевести проект с JavaScript. И нередко я замечал, что разработчики воспринимают TypeScript не как инструмент, упрощающий работу, а как рутинную обязанность, которая лишь замедляет процесс. В этой статье я расскажу, как сделать TypeScript своим союзником и заставить его работать на вас, а не против.

Первая встреча с TypeScript

Чтобы понять, откуда берётся большинство проблем, начнём с самого начала. Почти все программисты переходят на TypeScript после долгой работы с JavaScript, сформировав определённые привычки и устоявшиеся практики.

Главная проблема здесь, на мой взгляд, в том, что многие пытаются просто наложить TypeScript поверх JavaScript-кода стараясь удовлетворить требованиям назойливого компилятора, вместо того чтобы писать на TS изначально.
Дальше мы разберёмся, как избавиться от старых привычек и научиться писать код так, чтобы TypeScript действительно облегчал работу.

Метод черного ящика

Одна из распространенных ошибок разработчиков, переходящих с JavaScript на TypeScript, — игнорирование типизации на этапе написания кода. Вместо того чтобы заранее описывать ожидаемые данные, многие полагаются исключительно на автоматическое выведение типов (type inference), что может приводить к неожиданным ошибкам.

Последовательно рассмотрим два подхода к разработке:

1. Классический — пишем исполняемый код, не задумываясь о типах;

2. TypeScript-ориентированный — определяем требования к типам, затем реализуем логику.

Проблема автоматического вывода типов

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

<VCard width="100" />
<VCard width="100px" />
<VCard width="100%" />

Начнем с привычного подхода — просто напишем код без явного указания типов:

function defineElementWidth(value: string) {
	// Тип не проверяется 😱
	return {
		width: `${value}рх`, // ❌ На самом деле px - кириллица 🤬
	};
}

// ❌ Можно передать заведомо невалидное значение
defineElementWidth('Не число');

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

Явное определение типов

Теперь попробуем задать строгие ограничения:

// Явно указываем тип аргумента и возвращаемого значения
function defineElementWidth(value: number): { width: `${number}px` } {
	// Типы проверяются на соответствие ожидаемым
	return {
		width: `${value}px`, // ✅
	};
}
// Ошибки обнаруживаются на этапе написания кода
defineElementWidth('Не число'); // ❌
defineElementWidth(100); // ✅

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

Доработка с учетом всех вариантов

Добавим поддержку значений в px и в %, как во Vuetify:

// TypeScript сразу покажет ошибку в реализации
function defineElementWidth(value: number | `${number}%` | `${number}px` ): { width: `${number}${'px' | '%'}` } {
	return {
		width: `${value}px`, // ❌ Ошибка! value уже может содержать px или %
	}
}

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

Финальная реализация
Теперь создадим универсальное решение, которое корректно обрабатывает все допустимые значения:

type Unit = `px` | '%';
type Width = number | `${number}` | `${number}${Unit}`;
type Style = { width: `${number}${Unit}` };

function defineElementWidth(value: Width): Style {
	if (typeof value === 'string') {
		const match = value.match(/^(\d+)([a-zA-Z%]*)$/)?.slice(1).filter(Boolean) ?? [];
		const [width = '0', unit = 'px'] = match;
		
		return {
			width: `${parseFloat(width)}${unit as Unit}`,
		};
	}
	
	return {
		width: `${value}px`,
	};
}

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

Теперь функция корректно обрабатывает числа, строки и значения с единицами измерения, возвращает предсказуемый и строго типизированный объект, не допускает ошибок благодаря встроенной проверке типов.

Вывод

TypeScript работает эффективнее, если мы сначала определяем типы, а затем реализуем логику. Это позволяет получать подсказки от IDE прямо во время написания функции.

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

Типы и модульное тестирование

Если вы знакомы с методологией Test Driven Development (TDD), то, возможно, заметили сходство, TDD предлагает похожий подход - сначала написать тесты и только потом исполняемый код.
Этим подходы отлично дополняют друг друга, мы можем сначала определить типы и написать тесты, не имея готовой реализации..
Однако TypeScript потребует, чтобы функция была реализована, поэтому можно использовать заглушку:

// Заглушка позволяет не выдавать ошибки пока нет реализации
function foo(): 'Foo' {
  throw new Error('foo() is not implemented');
}

// Тест проверяет ожидаемый тип результата
describe('foo()', () => {
  it('foo() возвращает "Foo"', () => {
    const expected: ReturnType<typeof foo> = 'Foo';
    expect(foo()).toBe(expected);
  });
});

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

Прокачка TS

Работа с типами, как и с исполняемым кодом, со временем превращается в рутину. Количество повторяющихся операций растет, раздувая кодовую базу и увеличивая когнитивную нагрузку на команду.

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

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

Исправления встроенных типов

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

Пересказывать их документацию смысла нет — она и так очень маленькая, лучше ознакомиться с ней самостоятельно по ссылкам выше.

Дополнительные утилиты

Несмотря на то, что из коробки TS имеет широкий набор утилит, со временем его оказывается недостаточно и разработчики начинают комбинировать утилиты в сложные конструкции и далеко не всегда они надежны.

Чтобы облегчить команде жизнь, можно воспользоваться специализированными библиотеками.

Чтобы избежать этого и сделать код более выразительным, можно воспользоваться специализированными библиотеками.

Выводы

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

Программируйте на TS, а не боритесь с ним.

Как заставить TS работать на вас