Продвинутое использования React с TypeScript

В данном видео разберем, как использовать React с TypeScript. Поговорим не только про базовые кейсы, а также разберем типизацию сложных паттернов, таких как Hight Order Components (HOCs), Component as prop, render props.

Видео про tsconfig:

Видео про useCombinedRef:

Ссылка на статью про UMD Modules:

Telegram канал:

Код из слайдов:

Таймкоды:
00:00-00:36 - Интро
00:36-01:06 - Конфигурация
01:06-03:16 - React - глобальный тип
03:16-06:11 - ReactElement / JSX.Element
06:11-07:46 - ReactNode
07:46-08:46 - ComponentType
08:46-09:17 - Другие типы
09:17-13:58 - разница между @types/react 17 и 18
13:58-16:54 - типизация useRef
16:54-20:20 - memo
20:20-22:00 - forwardRef
22:00-24:44 - Компоненты с children
24:44-25:43 - Проблема с ReactElement
25:43-27:44 - Render prop
27:44-29:38 - Render prop и кастомные ref
29:38-35:35 - Component as prop
35:35-40:21 - HOC
40:21-40:41 - Заключение

[РемонтСервисЧерноморск]

Автор молодчага, все доступно объясняет. Желаю процветания каналу.

[raff_m_d]

Лайк автоматом, хоть и выбрал backend на js

[difficultdo]

Спасибо за полезную информацию и качественный ролик со ссылками и таймкодами.

[ДинисламКараев-сю]

Ещё не смотрел, но автору большое Спасибо за его работу

[lLoseControll]

Оч крепко. Сложно, но интересно) спасибо

[mmordoboy]

Лайк поставил, посмотрю позже) Спасибо за контент!

[_oxios_]

Спасибо за урок. Много нового и полезного для себя открыл)

[yaroslavs]

Делаешь крутой и полезный контент! Успехов тебе и нескончаемого потока мотивации😊

[ilyagamepub]

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

[роматарасов-ол]

этот плейлист просто огонь, показываешь много нового, даже при том что 2 года на тайпскрипте пишу уже

насчёт хака с memo и forwardRef, всё конечно правильно
но лучше не создавать функцию typedMemo
а переопределить через declare тип у функции memo из React

переопределять через declare типы из библиотек это нормальная практика,
это необходимо например в tanstackRouter-е для полного инфера типов всех твоих роутов

[АнатолийГорбов-оь]

Аюб контент просто ТОП! Спасибо) а по реакт хук форм что-нибудь с продвинутыми кейсами + типизация не планируешь снять?) было бы очень интересно посмотреть))

[SnegurkaBu]

Спасибо за интересный ролик, кстати, мне кажется в видео не совсем классическое использование RenderProps, обычно функцию передают не как children, а как проп функцию, внутри самого тега. Было очень интересно увидеть новую для меня реализацию (function as children), и вообще тема паттернов очень интересна, с удовольствием бы посмотрела видео с их практическим применением.

[baileysli]

22:06 имхо, для кнопки лучше брать сразу реактивский тип `ButtonHTMLAttributes`, из `Pick`ать из него только нужные атрибуты, чтобы подсказок в пропсах было немного (коллеги могут растеряться от обилия их).

30:16 а для кнопок, которые семантически выполнят роль ссылки я обычно от `[href]` решаю чем ей быть, а не делаю пропс `as`. Просто если это ссылка, то обычно внутри нужно решать это внешняя ссылка или внутренняя и если внутренняя то оборачивать ещё в компонент роутера на проекте (`react-router-dom` или `Next.js` к примеру)

[АнатолийГорбов-оь]

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

[o.korsakov]

Если необходимо передать дженерики в компонент обернутый React.memo использую type casting - "export default memo(SomeComponent) as typeof SomeComponent;"

[anatoliiilescu]

Wow super content about TypeScript and React! ❤

[antonp]

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

[apanchuk]

Спасибо за видео!
Пробовал описанный в видео компонент Button использоватьт с next/link? <Button as={Link} href='/'>Home</Button>

[SuleimanAliiev]

интересно почему не предусмотрены эти компоненты обертки с под коробки для консистентности мемо и форвард рефов: вроде распространенный кейс

[vladan]

Обернул компонент в HOC. Потом использую его в рендеринг списка, и проп key в нём уже отсутсвует. С точки зрения типизации.
Спасибо за контент.