01. TypeScript / Generic and Conditional Type / as const / infer

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

[@ITKAMASUTRA]

Кстати, в конце немного не заметил ошибку, пытаясь зарефаторить вложенность. Итоговый результат: type PropertiesType = T extends {[key: string]: infer U} ? U : never; type GetActionsTypes any}> = ReturnType То есть в типе GetActionsTypes нужно указать ограничение\constraint для передаваемого T, указав, что это ОБЯЗАТЕЛЬНО должен быть объект, у которого в качестве значения св-ва обязательно функция, принимающая что-нибудь и возвращаемая что-нибудь

[@hostiseeyou]

почему-то не работает автокомплит в компоненте , если ввожу 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 возвращает в Вашем и моем варианте)

[@hostiseeyou]

моя задача похожа на ту что Вы сначала хотели показать на 29:30, но потом усложнили до объектов

[@alexsusha4303]

Может быть можно еще сократить запись до следующего кода: type ActionReturnType = T extends {[key: string]: (...args: any[]) => infer R} ? R : never; type ActionType = ActionReturnType И в reducer определять просто action : ActionType. Хотелось бы узнать, будет ли правильным данный метод? P.s. у меня все отлично работает с ним. P.s. спасибо за видео-урок :)

[@MernBNS]

Димыч, уже почти год, как работаю разрабом после твоего онлайн-курса, и до сих пор продолжаю смотреть и учить новую инфу в удобном формате для себя. Спасибо тебе за твой заряд, которого нет у других ^_^

[@lededit9761]

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

[@goshana1987]

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

[@alexandrmerser8443]

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

[@akionka]

10:56 Спасибо, всегда хотел сократить себе жизнь 👍

[@MrSvent0vit]

Хей, осторожнее с такими формулировками ))

[@Nick-hq8of]

Кому сократили, а кому улучшили))

[@user-gv3le1rb5k]

Очень интересный и полезный материал. Спасибо, Димыч, за подробное объяснение!) TypeScript, Infer, типизация actions

[@andrewsam224]

Подход от простого к сложному очень крут. Именно у тебя.

[@redcrown5789]

Дичайше полезное видео и интересное. Первый раз смотрел когда только только начал знакомство с TS и про infer вообще ничего не понял, сейчас пересмотрел, озарило но обязательно нужна практика=)) Спасибо Димыч, ты как всегда космос))

[@disposables72]

Лучшее видео по TS, из всех что я видел! TypeScript, Generic, infer

[@dmitrii_gerasimov]

Классно объяснил Generic. Посмотрел несколько видео других авторов, но не нашёл такого понятного объяснения.

[@Erebor99700]

Так вот где видос , который внесет ясность , смотрю 2 сезон пути самурая и примерно с 9-10 выпуска перестал понимать , что происходит , а оказывается есть такой видос . Спасибо за труд , бомбим дальше )

[@igorieromenko1109]

TypeScript / Generic and Conditional Type / as const / infer. Спасибо! Всё подробно и понятно, как обычно :)

[@user-iz9dz2gh9j]

Спасибо большое Димыч! Очень сильно помогаешь с освоением React / typescript

[@legendarysergeygaming6395]

Ну что я хочу сказать то :) Посмотрел все до конца и пошел переделывать свои Action Creators. Круто разложен весь материал по полочкам, не знал что typescript штука такая мощная. Хотя я примерно видел подобное но для меня оставалась загадкой все равно как, зачем и почему. Вообщем спасибо за материал, буду погружаться полностью в TypeScript. Замотивирован на полную.

[@ivankomar4227]

Димыч, спасибо за то, что потратил на этой время) реально решил мою боль с Actions

[@user-ug1vi3bv1f]

Ну ты крутой, Димыч! Жму руку за твой труд, очень сильно помог, благодарю!

[@dmytroNaholiuk]

Спасибо!!!!Даже мой кот сидел рядом со мной и смотрел с интересом) TypeScript / Generic and Conditional Type / as const / infer Летим в космос!!!

[@alexwake927]

Спасибо за видео, как всегда все понятно рассказано, боялся generic, не мог понять, спасибо, что все разжевал!

[@SemenAlexndrovich]

Спасибо! Ваши уроки бесценны =)

[@dmag3287]

Димыч, на мой взгляд твое видео одно из лучших по TS, Generic, as const, infer

[@mrmicolka]

Статья была предложена в 6 видео React + Redux + TypeScript, типизация Actions и Thunk. Димыч тогда обещал сделать как в ней. Я ее прочитал и, кроме идеи, нифига не понял. А тут видео с разбором подоспело. Димыч сказал - Димыч сделал! Спасибо)

[@zascia100]

С первого раза въехать очень сложно, но действительно магия!

[@user-pc9bl7uf1l]

Все как всегда на высоте! Благодарю!

[@user-ho9iw9si9u]

Димыч на высоте как всегда! Спасибо. Generic and Conditional Type / as const / infer

[@maxkos6184]

Самый интересный канал на youtube. Все же я задрот программист наверное. Тема улет. Всегда хотел попробовать ТайпСкрипт ). Спасибо за видос

[@user-pz7eq2ed9f]

то чувство когда хочешь поставить лайк в конце видоса, а оказывается уже поставил. Качественный контент!

[@alekseyberezov8020]

Очень крутая тема generic + infer. Например в Redux можно типизировать любое кол-во actios просто на изи. Спасибо Димыч, что разжевал статью Дмитрия Новикова!

[@habalgarmin]

наконец-то понял для чего нужен этот infer. Спасибо, Димыч!

[@anastasiiamineeva4315]

Как всегда офигенно! Спасибо огромное!

[@4wesome_maks30]

Офигенный видос,как раз ненравилось то,что постоянно дублирую коду при типизации экшенов.Спасибо!

[@xmarsianca]

Вчера сама эту же статью нашла,несколько раз прочитала.а сегодня это видео все на свои места всталр

[@izzei-1614]

Насколько же это крутое видео, я не могу удержаться от восторга))) 01. TypeScript / Generic and Conditional Type / as const / infer IT-KAMASUTRA IT-TYPESCRIPT #infer #typescript #generic

[@madden3307]

Здорово! Все понятно и мне пригодилось в своем проекте!

[@user-zs7kr6yp2s]

ну ты даешь конечно) раскидал все по полочкам, будь здоров брат !

[@vb5059]

Спасибо автору! Хороший материал!

[@mykhailostepanishchev6472]

Димыч самый круто чел ! спасибо ! TypeScript / Generic and Conditional Type / as const / infer

[@MJstart]

Спасибо Димыч. Сложная тема, но ты объяснил отлично

[@1want2be3]

Вообще бомба просто, на одном дыхании

[@alekseyisaev6305]

огонь! приятненько получать разжеванную инфу)) разбери тему типизирования композиции компонентов в react, плз

[@sandorkligan2208]

Спасибо, Димыч! Благодаря тебе разобрался

[@user-fx8th7nu8e]

Классный видос) TypeScript, Generic

[@user-je1el3gj9d]

Я очень ждал видео от тебя)

[@ITKAMASUTRA]

спасибо!!!

[@danilblack8296]

TypeScript, Generic, infer, type, Conditional Type. Dimych is the best teacher of the world!

[@lededit9761]

Есть пожелание: оставляй в конце видео чистый отрефакторинный код - так визуально приятно анализировать результат, а так же проще воспроизвести

[@user-hk9xk4wd9e]

Круто! Спасибо! TypeScript / Generic and Conditional Type / as const / infer

[@vd7533]

10:56 "Мы сократили и улучшили себе жизнь") эт точно)) Сложная долгая жизнь разраба - это мука)

[@Akunov-oy9mx]

Спасибо! Всё подробно и понятно

[@RRJxRaiZoR]

Димыч, контент годный. Будь здоров и бомби, бомби, бомби! С меня очередной лойс. По поводу Nullable. В typescript (в версии 2.8) в числе прочих типов был введён тип NonNullable.

[@margokomilfo4428]

NonNullable- это, я понимаю, наоборот - тип, который говорит, что не может быть null.

[@user-iz9dz2gh9j]

NonNullable не подходит. webstorm не дает никакой подсказки по этому типу/утилите

[@dmitriystoyanov933]

Работаю на тайпскрипте 4 месяца, но еще довольно-таки нубас) Этот видос добавил понимания, спасибо!

[@user-fr2fd4vj4p]

Спасибо за отличное объсниние TypeScript.

[@oconnor4417]

Димыч ты просто лучший! Добей пожалуйста путь самурая 2.0 !!!❤❤❤

[@hasannamazl7584]

Очень полезно! Спасибо огромное

[@2212MG]

Круто, не знал про эти фишки

[@goshana1987]

Спасибо, как всегда очень помогли.

[@margokomilfo4428]

последние минут 7 просто взорвали мозг...=)

[@ITKAMASUTRA]

Ага)) и мне)

[@sergioostanioni5390]

Димыч, привет. Выскажу пару соображений: 1. Шрифт можно и нужно делать крупнее. Первые 15 минут средний вертикальный фрейм экрана пустой. 2. Вложенность типов глубиной более двух уровней усложняет, особенно, когда типизация автоматическая: брат тещи его кума - согласись не просто воспринимается.

[@user-il4ph3fr6h]

спасибо за урок, недавно протипизировал все редюсоры на проекте будучи на 5том уроке второго сезона... Поторопился))) Но руку набил, удачи

[@andrewsam224]

Димыч, очень полезно и спасибо. Может ещё пару видео про фишки с ТS. Будем ждать.

[@RainbowJet1]

Очень сложно но очень интересно, спасибо !)

[@evgeniysurma8116]

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

[@kondakov90]

Забавно, что пару дней назад я тоже эту статью читал ))

[@el_marca4987]

Димыч, ты все таки очень мегакрут. Никто даже платно так не объясняет, как это делаешь ты.

[@vvvkar8449]

Dimich ti krasavchik👍👍👍

[@user-yj8qc5so2c]

Супер! Спасибо!

[@4viewsde681]

Super Content!

[@nikolaykasparov8387]

Заслуженный лойс. В ру сегменте по ts одна шляпа, а это вроде годно.

[@domin1c]

Не только в ру. На английском тоже в основном хрень типа "ну вот у нас тут будет строка. Глядите как круто-теперь подсказка есть ололо".

[@squabble3332]

@@domin1c есть такой чувак, Ben Awad, у него довольно годно все по реакту и иже с ним. Сори за рекламу

[@user-ux5bp3dg5z]

Ууууу, летим!!!!))

[@user-jc6xv3oy7b]

Воу, только захотел углубиться в TS, а тут целая серия роликов стартовала.

[@powerpuff_luv]

Недолго продлилась правда, ахахах

[@nullf192]

Димыч, лучший !

[@user-vm3ui3rc8u]

спасибо бро что не в реакте, а в тайпскрипте)

[@sdd5132]

ТЫ КРУТОЙ !!

[@originalhrysha1976]

КОНИЧУА! СПС самурай!

[@PerryCoxer]

Лучше много кода очевидного, чем мало неочевидного.

[@v_korol]

Круто!! #React #Typescript #Generic #asConst

[@mediontamginskii5889]

Ну за такое не грех подписатся!!!)))

[@user-wf8bu6mt2i]

Top video!

[@kirillpavlovskii8342]

очень помогло спасибо

[@js_talks]

Спасибо большое! Я думаю infer и extend можно было бы использовать для исключения некоторых свойств в зависимости от других. Столкнулся с такой задачей, в зависимости от варианта TextField могут быть доступны или не доступны какие-то пропсы у этого компонента. а вот variant="label_inside_input" может иметь только size="big". Это как перегрузка конструкторов в C# или Java.

[@genesismens9898]

Теперь всё понятно

[@user-gi3sh6ul2j]

Спасибо, было полезно). А только две части из этого цикла или продолжение есть?)

[@alexbork8659]

Супер ......... !!!!!!!!

[@anthony_fed]

Димыч, Магаспасибо!

[@voyvb]

Димыч лучший

[@ValarM1]

Суперполезно

[@apodkovyrov]

Еще можно клёво извлекать типы из массива строк. const userNames = ['Dymuch', Valera', 'Vitor'] as const type ArrayValues = T extends ReadonlyArray ? V : never; type UserNames = ArrayValues Мне пригождалось пару раз

[@sashahoncharenko1730]

Поддержка от меня в твою копилку )

[@asmodeus7862]

спасибо скоро оффер ;)

[@user-nw5br5jg9k]

Огонь

[@araikrasoyan702]

Спасибо

[@uaplatformacomua]

В самых первых примерах кода типа type UserType - Type избыточно, достаточно просто type User

[@mr.rodrigo979]

31:06 - Это я на собесе )) К слову, можно и так написать: type SomeType= typeof obj[keyof typeof obj];

[@Vllad_Ko]

Ух, не простая тема! Димыч молодец объяснил хорошо. Такой вопрос возник, generic это такое подобие настраиваемой динамической типизиции, или infer, или оба?

[@AndranikArshakyan]

полезно

[@user-lq5fs9eb8v]

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

[@Vlad-us9xt]

top)

[@whicencer8819]

5:11 Уже сам мозг намикает, что нужно больше видео по реакту)))

[@technical777]

Димыч спасибо за урок. Тема сложная, пока для меня не понятная, но буду пробовать перепиливать соц сеть с курса React JS путь самурая в TS. Есть вопрос, как применять www.npmjs.com/package/eslint-plugin-react, и github.com/prettier/eslint-config-prettier и как оно все связано с TS ?

[@gaben-agent]

Удачи ребят) 19:19

[@carbon4ik988]

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