Лайфхаки TypeScript для React-разработчиков

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

1. as const для определения типов хуков 🪝

При создании пользовательских React-хуков вы часто возвращаете кортеж (массив с несколькими разными значениями) и нужно определить точные типы для этих значений. Без as const TypeScript будет выводить более общие типы, например number | boolean[] вместо точных типов.

Без as const вам нужно вручную определять возвращаемый тип хука:

function useStateWithTypes() {
  return [0, false]; // TypeScript выведет это как (number | boolean)[]
}

// Ручное определение типа
function useStateWithTypes(): [number, boolean] {
  return [0, false];
}

Однако с as const TypeScript может автоматически вывести точные типы, делая ваш код чище и безопаснее:

function useStateWithTypes() {
  return [0, false] as const; // TypeScript выводит точный тип кортежа: [0, false]
}

Теперь useStateWithTypes возвращает точно кортеж [number, boolean], что и было задумано.

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

2. Типы шаблонных литералов 🔠

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

Пример:

type ButtonSize = 'small' | 'medium' | 'large';
type ButtonClass = `btn-${ButtonSize}`;
// ButtonClass теперь 'btn-small' | 'btn-medium' | 'btn-large'

Это гарантирует, что строки, такие как имена классов или типы действий, всегда следуют правильному паттерну.

3. useRef с TypeScript ⚙️

Один из самых простых способов улучшить ваш React-код — правильно типизировать useRef. Обобщенная типизация TypeScript позволяет определить точный тип элемента, на который ссылаетесь, делая манипуляции с DOM более предсказуемыми.

Пример:

const inputRef = useRef<HTMLInputElement>(null);
// Теперь TypeScript знает, что inputRef имеет тип HTMLInputElement, а не просто 'null | undefined'

Это добавляет уровень безопасности и помогает избежать ошибок при взаимодействии с DOM.

Используя as const, типы шаблонных литералов и правильную типизацию useRef, вы можете гарантировать, что ваш React-код будет безопаснее и проще в поддержке. Эти небольшие изменения могут оказать огромное влияние на ваш опыт работы с TypeScript!

Какие трюки TypeScript вы считаете наиболее полезными в ваших React-проектах? Давайте обсудим в комментариях! 👇