01. TypeScript / Generic and Conditional Type / as const / infer
HTML-код
- Опубликовано: 28 июл 2024
- it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
TypeScript сложен, а Generic Conditional Type с infer внутри со старта вырывает мозг. Мне вырвал))
Друзья, TypeScript прекрасен. На мой взгляд очень нереально создать большой проект качественно и быстро без TypeScript.
Я сам буду разбираться в сложном TypeScript для того, чтобы вндерять его в продакшен максимально глубоко, и буду рассказывать об этом вам, делясь опытом.
У меня возникла боль: я не хочу в React+Redux для каждого action создавать отдельно type, мало того, я не хочу вручную объединять все эти типы для того, чтобы типизировать итоговый action, который может прилететь в reducer. С этим поможет нам Generic Conditional Type с infer внутри ;)
Статья, о которой речь идёт в видео:
habr.com/ru/company/alfa/blog...
Документация:
www.typescriptlang.org/docs/h...
#infer #typescript #generic #conditional #react #actions
Кстати, в конце немного не заметил ошибку, пытаясь зарефаторить вложенность.
Итоговый результат:
type PropertiesType = T extends {[key: string]: infer U} ? U : never;
type GetActionsTypes any}> = ReturnType
То есть в типе GetActionsTypes нужно указать ограничение\constraint для передаваемого T, указав, что это ОБЯЗАТЕЛЬНО должен быть объект, у которого в качестве значения св-ва обязательно функция, принимающая что-нибудь и возвращаемая что-нибудь
почему-то не работает автокомплит в компоненте , если ввожу live, то не ругается, но и не предлагает его (если ввести live232, то вывалит ошибку - тут все ок). Я решал эту задачу иначе export enum AlertStatusEnum {
live = 'live',
draft = 'draft',
}
export const ALERT_STATUS_TYPES = {
'state:alert:live': AlertStatusEnum.live,
'state:alert:draft': AlertStatusEnum.draft,
}; type StatusType = keyof typeof AlertStatusEnum; Тогда в компоненте работает этот автокомплит - не понимаю почему в Вашем варианте не работает, ведь возвращается абсолютно один и тот же тип (если навести мышкой на status для сравнения что TS возвращает в Вашем и моем варианте)
моя задача похожа на ту что Вы сначала хотели показать на 29:30, но потом усложнили до объектов
Может быть можно еще сократить запись до следующего кода:
type ActionReturnType = T extends {[key: string]: (...args: any[]) => infer R} ? R : never;
type ActionType = ActionReturnType
И в reducer определять просто action : ActionType.
Хотелось бы узнать, будет ли правильным данный метод?
P.s. у меня все отлично работает с ним.
P.s. спасибо за видео-урок :)
Димыч, уже почти год, как работаю разрабом после твоего онлайн-курса, и до сих пор продолжаю смотреть и учить новую инфу в удобном формате для себя. Спасибо тебе за твой заряд, которого нет у других ^_^
Лучший канал о веб-разработке!
10:56 Спасибо, всегда хотел сократить себе жизнь 👍
Хей, осторожнее с такими формулировками ))
Кому сократили, а кому улучшили))
Димыч, спасибо что расписываешь по порядку от простого к сложному
Очень интересный и полезный материал. Спасибо, Димыч, за подробное объяснение!) TypeScript, Infer, типизация actions
Крутая тема. Полез по твоему совету в документацию поглубже. Очень кстати оказалось для большого количества actions и типов к ним. Сильно сократил код. Спасибо тебе.
Лучшее видео по TS, из всех что я видел! TypeScript, Generic, infer
Дичайше полезное видео и интересное. Первый раз смотрел когда только только начал знакомство с TS и про infer вообще ничего не понял, сейчас пересмотрел, озарило но обязательно нужна практика=)) Спасибо Димыч, ты как всегда космос))
Про infer прям очень полезно))) Я все постоянно заморачивался, а как же получить тип, который мы не знаем, но при этом он должен быть переменным, а тут такое простое решение) Прям гуд)
Подход от простого к сложному очень крут. Именно у тебя.
TypeScript / Generic and Conditional Type / as const / infer. Спасибо! Всё подробно и понятно, как обычно :)
Спасибо большое Димыч! Очень сильно помогаешь с освоением React / typescript
Ну что я хочу сказать то :)
Посмотрел все до конца и пошел переделывать свои Action Creators.
Круто разложен весь материал по полочкам, не знал что typescript штука такая мощная.
Хотя я примерно видел подобное но для меня оставалась загадкой все равно как, зачем и почему.
Вообщем спасибо за материал, буду погружаться полностью в TypeScript.
Замотивирован на полную.
Димыч на высоте как всегда! Спасибо. Generic and Conditional Type / as const / infer
Ну ты крутой, Димыч! Жму руку за твой труд, очень сильно помог, благодарю!
Димыч, спасибо за то, что потратил на этой время)
реально решил мою боль с Actions
Классно объяснил Generic. Посмотрел несколько видео других авторов, но не нашёл такого понятного объяснения.
Спасибо за видео, как всегда все понятно рассказано, боялся generic, не мог понять, спасибо, что все разжевал!
Спасибо! Ваши уроки бесценны =)
Димыч, на мой взгляд твое видео одно из лучших по TS, Generic, as const, infer
Спасибо!!!!Даже мой кот сидел рядом со мной и смотрел с интересом)
TypeScript / Generic and Conditional Type / as const / infer
Летим в космос!!!
Как всегда офигенно! Спасибо огромное!
Все как всегда на высоте! Благодарю!
Офигенный видос,как раз ненравилось то,что постоянно дублирую коду при типизации экшенов.Спасибо!
Самый интересный канал на youtube. Все же я задрот программист наверное. Тема улет. Всегда хотел попробовать ТайпСкрипт ). Спасибо за видос
Статья была предложена в 6 видео React + Redux + TypeScript, типизация Actions и Thunk. Димыч тогда обещал сделать как в ней. Я ее прочитал и, кроме идеи, нифига не понял. А тут видео с разбором подоспело.
Димыч сказал - Димыч сделал! Спасибо)
Очень крутая тема generic + infer. Например в Redux можно типизировать любое кол-во actios просто на изи. Спасибо Димыч, что разжевал статью Дмитрия Новикова!
Так вот где видос , который внесет ясность , смотрю 2 сезон пути самурая и примерно с 9-10 выпуска перестал понимать , что происходит , а оказывается есть такой видос . Спасибо за труд , бомбим дальше )
Насколько же это крутое видео, я не могу удержаться от восторга)))
01. TypeScript / Generic and Conditional Type / as const / infer
IT-KAMASUTRA
IT-TYPESCRIPT
#infer
#typescript
#generic
наконец-то понял для чего нужен этот infer. Спасибо, Димыч!
то чувство когда хочешь поставить лайк в конце видоса, а оказывается уже поставил. Качественный контент!
Димыч самый круто чел ! спасибо ! TypeScript / Generic and Conditional Type / as const / infer
С первого раза въехать очень сложно, но действительно магия!
Спасибо автору!
Хороший материал!
Здорово! Все понятно и мне пригодилось в своем проекте!
Спасибо Димыч. Сложная тема, но ты объяснил отлично
Я очень ждал видео от тебя)
спасибо!!!
Димыч, привет. Выскажу пару соображений: 1. Шрифт можно и нужно делать крупнее. Первые 15 минут средний вертикальный фрейм экрана пустой. 2. Вложенность типов глубиной более двух уровней усложняет, особенно, когда типизация автоматическая: брат тещи его кума - согласись не просто воспринимается.
ну ты даешь конечно) раскидал все по полочкам, будь здоров брат !
Есть пожелание: оставляй в конце видео чистый отрефакторинный код - так визуально приятно анализировать результат, а так же проще воспроизвести
огонь! приятненько получать разжеванную инфу)) разбери тему типизирования композиции компонентов в react, плз
Спасибо, Димыч! Благодаря тебе разобрался
Вообще бомба просто, на одном дыхании
Вчера сама эту же статью нашла,несколько раз прочитала.а сегодня это видео все на свои места всталр
Круто! Спасибо! TypeScript / Generic and Conditional Type / as const / infer
TypeScript, Generic, infer, type, Conditional Type.
Dimych is the best teacher of the world!
Классный видос) TypeScript, Generic
Димыч, контент годный. Будь здоров и бомби, бомби, бомби! С меня очередной лойс.
По поводу Nullable. В typescript (в версии 2.8) в числе прочих типов был введён тип NonNullable.
NonNullable- это, я понимаю, наоборот - тип, который говорит, что не может быть null.
NonNullable не подходит. webstorm не дает никакой подсказки по этому типу/утилите
Спасибо за отличное объсниние TypeScript.
Спасибо, как всегда очень помогли.
Очень полезно! Спасибо огромное
Спасибо! Всё подробно и понятно
Круто, не знал про эти фишки
Димыч ты просто лучший! Добей пожалуйста путь самурая 2.0 !!!❤❤❤
Димыч, очень полезно и спасибо. Может ещё пару видео про фишки с ТS. Будем ждать.
последние минут 7 просто взорвали мозг...=)
Ага)) и мне)
10:56 "Мы сократили и улучшили себе жизнь") эт точно)) Сложная долгая жизнь разраба - это мука)
Работаю на тайпскрипте 4 месяца, но еще довольно-таки нубас) Этот видос добавил понимания, спасибо!
Super Content!
Забавно, что пару дней назад я тоже эту статью читал ))
Dimich ti krasavchik👍👍👍
спасибо за урок, недавно протипизировал все редюсоры на проекте будучи на 5том уроке второго сезона... Поторопился))) Но руку набил, удачи
Супер! Спасибо!
класс, как раз пришел к этому видео пытаясь разобрать эту статью на хабре
Очень сложно но очень интересно, спасибо !)
Димыч, ты все таки очень мегакрут. Никто даже платно так не объясняет, как это делаешь ты.
Димыч, лучший !
Спасибо большое! Я думаю infer и extend можно было бы использовать для исключения некоторых свойств в зависимости от других.
Столкнулся с такой задачей, в зависимости от варианта TextField могут быть доступны или не доступны какие-то пропсы у этого компонента.
а вот variant="label_inside_input" может иметь только size="big".
Это как перегрузка конструкторов в C# или Java.
Димыч, Магаспасибо!
Ууууу, летим!!!!))
Заслуженный лойс. В ру сегменте по ts одна шляпа, а это вроде годно.
Не только в ру. На английском тоже в основном хрень типа "ну вот у нас тут будет строка. Глядите как круто-теперь подсказка есть ололо".
@@domin1c есть такой чувак, Ben Awad, у него довольно годно все по реакту и иже с ним. Сори за рекламу
Top video!
Круто!! #React #Typescript #Generic #asConst
Воу, только захотел углубиться в TS, а тут целая серия роликов стартовала.
Недолго продлилась правда, ахахах
ТЫ КРУТОЙ !!
спасибо бро что не в реакте, а в тайпскрипте)
В самых первых примерах кода типа type UserType - Type избыточно, достаточно просто type User
Спасибо, было полезно). А только две части из этого цикла или продолжение есть?)
КОНИЧУА! СПС самурай!
Ну за такое не грех подписатся!!!)))
Супер ......... !!!!!!!!
Суперполезно
Лучше много кода очевидного, чем мало неочевидного.
Теперь всё понятно
очень помогло спасибо
Димыч лучший
Еще можно клёво извлекать типы из массива строк.
const userNames = ['Dymuch', Valera', 'Vitor'] as const
type ArrayValues = T extends ReadonlyArray ? V : never;
type UserNames = ArrayValues
Мне пригождалось пару раз
Спасибо
Ух, не простая тема! Димыч молодец объяснил хорошо.
Такой вопрос возник, generic это такое подобие настраиваемой динамической типизиции, или infer, или оба?
спасибо скоро оффер ;)
Огонь
31:06 - Это я на собесе ))
К слову, можно и так написать:
type SomeType= typeof obj[keyof typeof obj];
Там ксати в той статье по ссылке, в одном из комментариев есть ссылка на библиотеку Unionize. Не пробовал еще, бегло глянул. выглядит интересно для объединения экшенов
Поддержка от меня в твою копилку )
5:11 Уже сам мозг намикает, что нужно больше видео по реакту)))
top)
Удачи ребят)
19:19
Всем привет! подскажите, можно ли было обойти создание дополнительного типа Nullable при создании типа initial на 10:27? Можно ли было воспользоваться типизацией через unknown? Есть ли у этих подходов существенные отличия?
photo: null as unknown as PhotoType,
user: null as unknown as UserType,
полезно