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

Рет қаралды 7,043

Күн бұрын

В данном видео разберем, как использовать React с TypeScript. Поговорим не только про базовые кейсы, а также разберем типизацию сложных паттернов, таких как Hight Order Components (HOCs), Component as prop, render props.
Видео про tsconfig:
• ПОЛНОЦЕННЫЙ ГАЙД по ts...
Видео про useCombinedRef:
• Объединение ref'ов в R...
Ссылка на статью про UMD Modules:
www.typescriptlang.org/docs/h...
Telegram канал:
telegram.me/ayub_begimkulov_c...
Код из слайдов:
github.com/Ayub-Begimkulov/yo...
Таймкоды:
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 - Заключение

Пікірлер: 64

@dimasheiko Жыл бұрын

комментарий в поддержку канал❤

@ayub_begimkulov Жыл бұрын

Спасибо!

@user-le3wf3li8b Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Спасибо!

@raff_m_d6971 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Спасибо!

@samurai5410 Жыл бұрын

Сначала лайк, потом смотреть)

@ayub_begimkulov Жыл бұрын

Я тоже всем рекомендую так делать!) Спасибо!

@user-kc7ww5tx2w Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Спасибо за поддержку!

@2difficult2do Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Не за что!

@yaroslavs2271 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Спасибо, Ярослав!

@_oxios_ Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Рад, что было полезно!

@lLoseControll Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Рад, что понравилось!

@user-dw8lb8lc7u Жыл бұрын

этот плейлист просто огонь, показываешь много нового, даже при том что 2 года на тайпскрипте пишу уже насчёт хака с memo и forwardRef, всё конечно правильно но лучше не создавать функцию typedMemo а переопределить через declare тип у функции memo из React переопределять через declare типы из библиотек это нормальная практика, это необходимо например в tanstackRouter-е для полного инфера типов всех твоих роутов

@ayub_begimkulov Жыл бұрын

Я лично не люблю через declare перезаписывать. Но вариант тоже рабочий.

@user-he9og1fc6k Жыл бұрын

Спасибо!

@ayub_begimkulov Жыл бұрын

не за что!

@mmordoboy Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Спасибо большое!

@romanryaboshtan9270 8 ай бұрын

мощно, да

@SnegurkaBu Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Да, обычно под render prop подразумевают передачу функции именно в пропсы, но с children, как мне кажется удобнее. Про видео по паттернам - записал себе, нужно будет заснять.

@dfkadyr Жыл бұрын

Спасибо

@ayub_begimkulov Жыл бұрын

Пожалуйста!

@jamjam3337 Жыл бұрын

👏👍

@ayub_begimkulov Жыл бұрын

Спасибо!

@ilyagamepub Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Рад, что понравилось!

@user-rm7oz4xu3k Жыл бұрын

очень крутая инфа, спасибо!

@ayub_begimkulov Жыл бұрын

Рад, что было полезно.

@user-rl7ly3cz6g Жыл бұрын

Большое спасибо! Лучший!

@ayub_begimkulov Жыл бұрын

Спасибо за поддержку!

@user-vm2db5cq1g Жыл бұрын

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

@user-vm2db5cq1g Жыл бұрын

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

@alekseyleha9942 Жыл бұрын

Спасибо, ты большой молодец

@ayub_begimkulov Жыл бұрын

Спасибо!

@igorgolub2385 Жыл бұрын

Огромное спасибо!

@ayub_begimkulov Жыл бұрын

Не за что)

@mercury_2379 Жыл бұрын

комментарий в поддержку канала

@ayub_begimkulov Жыл бұрын

Спасибо!

@o.korsakov4426 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Так тоже можно)

@romanryaboshtan9270 8 ай бұрын

Дело в том, что memo(SomeComponent) и typeof SomeComponent это разные вещи, ты пытаешься один тип перевести в другой, которым он не является, если используешь as, это принудительное приведение типа, в том то и смысл, чтобы работать с typescript без принудительного приведения типа по тем правилам, которые заложены в саму концепцию ts.

@baileysli6235 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Тут на самом деле нету правильного/неправильного подхода. Все зависит от ситуации. Многие ui библиотеки берут все из пропсов нативных элементов (button, div etc.), так как кейсы могут быть разные. Если что-то локальное, то можно и пикать, не знаю, будет ли это проблемой, если много подсказок?. По поводу пропса `as` - я не говорю, что это нужно делать. Понятное дело, что у всего есть свои плюсы и минусы. Однако я думаю для универсальной библиотеки компонентов - это не плохое решение. В данном случае цель была описать именно типизацию определенного подхода, а использовать его или нет - тема совсем другая)

@vladan5100 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Хммм, вот это странно. Ты же можешь передать key в любой компонент. Не покажешь пример, где это не работает?

@levsonc 11 ай бұрын

У обходных решений с memo и forwardRef есть фатальный недостаток: не будет типизации свойств компонента вроде displayName. И это никак не обойти. А displayName очень полезен для отладки. Суть проблемы же в том, что сами по себе forwardRef с memo типизированы через унаследованные интерфейсы, а Тайпскрипт не поддерживает дженерики в таком случае (мол, дорого считать). И если с memo можно просто привести тип, то вместо forwardRef лучше использовать отдельное ref-свойство вроде innerRef. По этой же причине нет смысла переопределять их типизацию глобально, а то и вообще переопределять. С типизацией useRef всё очевидно: основное его использование - это получение ссылки на html-элементы, поэтому сделали такую типизацию, что при null в значении по умолчанию ТС не давал бы его случайно переопределить. Впрочем, мне это никогда не помогало.

@ayub_begimkulov 11 ай бұрын

А почему никак не обойти? Можно же руками добавить эти свойства к фукнции в return type. Просто в видео я этот момент не рассмотрел. Вот ссылка на плейграунд с примером - tsplay.dev/wO1olm