Фишки TypeScript о которых ТЫ НЕ ЗНАЛ!

Рет қаралды 85,442

Күн бұрын

В этом ролике мы разберем интересные моменты в TypeScript, которые можно будет применять на практике. Поговорим про Union типы, подсветку ошибок, тайпгуарды, утилитарные типы, generic компоненты, условные типы и кортежи, разница между enum vs as const object
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Ссылка на мой телеграм канал - t.me/ulbi_tv
Таймкоды:
00:00 ➝ Введение
00:50 ➝ 1 лайфхак. Exhaustive check
03:50 ➝ 2 лайфак. Typeguard is
06:20 ➝ 3 лайфхак. Enums vs const enum vs as const object
14:00 ➝ 4 лайфхак. ReturnType, Parameters
16:20 ➝ 5 лайфхак. Conditional types. Условные типы
18:45 ➝ 6 лайфхак. Кортежи (tuple)
20:00 ➝ 7 лайфхак. Immutable, readonly
21:20 ➝ 8 лайфхак. Utility types
26:10 ➝ 9 лайфхак. Generic component React
27:50 ➝ Наглядный пример работы Event loop в коде
30:10 ➝ Не забудь поставить лайк и написать комментарий для
продвижения видео, всем спасибо за поддержку!)
Поддержать меня и мой канал вы можете по ссылкам ниже.
Ссылка на мой телеграм канал - t.me/ulbi_tv
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

Пікірлер: 262

@VasjaG Жыл бұрын

Ulbi, красавчик! Можно вот этого вот побольше?

@MrTruth-rc2fr Жыл бұрын

Хахах, знакомые слова)

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

Контент в кайф!

@VasjaG Жыл бұрын

@@MrTruth-rc2fr Это ЧатГПТ (подмигивает)

@anatoliiilescu839 Жыл бұрын

чтобы вы еще хотели ? думаю ради вас все будет!!!

@VasjaG Жыл бұрын

@@anatoliiilescu839 Порядочные люди знают, что здесь не стол заказов. Но ради продвижения ролика было бы хорошо устроить срач в комментах.

@dzmitrypasavetsdimapolonez2644 Жыл бұрын

Пили ещё. Не затянуто, познавательно, хотелось бы увидеть, весь список подобных лайфхаков которые ты перечислил в видосе.

@IzyLifeVlog Жыл бұрын

Да, это здоровский формат! Быстрая иньекция новой информации, каждый день по 30 мин и уже будешь знать больше чем многие колеги!

@maksimtsvetkov3764 Жыл бұрын

На 24 минуте (Utility Types) при объявлении типа с таким же набором полей как у одного из полей интерфейса, как альернативный вариант записи можно просто записать type Birthday = User['birthday'], тогда конструкция valueOf не потребуется и читабельность будет чуть проще. Спасибо за видео!

@ixplo Жыл бұрын

это проблема TS. почти любой тип можно описать почти бесконечным количеством вариантов. И никто не знает всех лучших вариантов ) я не знаю ни одного настоящего синьора в TS. Все постоянно в поиске. И это дико. Дико, что TS втыкается в 90% проектов, но никто не умеет в него нормально )

@BOCbMOU Жыл бұрын

27:43 Если нужно добавить один дженерик в функцию и нет необходимости экстендить его от чего-то, то можно просто добавить запятую: В таком виде это уже не будет JSX, а будет именно дженерик. И это актуально только для .tsx файлов, в .ts файлах с этим проблем нет.

@gigor1433 Жыл бұрын

Очень интересно, большую часть знал, но пара пригодится точно. Очень интересно о каких ещё приёмах ты бы мог рассказать

@falsetrue7910 Жыл бұрын

Узнал новое, не смотря на то, что с ТС давно на ты Спасибо!

@bulatsafin-cg3tg Жыл бұрын

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

@SeverHolod Жыл бұрын

Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?

@tagnati5585 Жыл бұрын

Какой же офигенный видос. Спасибо большое за материал

@geek-peek Жыл бұрын

По поводу enum: они бывают не только строковые, ещё и числовые - хотя в рантайме это просто число, но на этапе разработки ты можешь писать не === 1, а что-нибудь имеющее смысл. И зачем они нужны: 1. Чтобы не использовать строки в коде, и чтобы не было соблазна их повторять 2. Чтобы обрабатывать входящие данные: у меня на проекте есть типы газоанализаторов, и приходят они как число 0-255, а на фронт нужно отдать название. Здесь помогли 2 enum - числовой и строковый

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

Супер видео! буду ждать продолжения и по тайпскрипту и по другим темам! отличный формат!

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

Спасибо за видео, очень полезно. Хотелось бы видеть больше таких видео

@valentinaicheva7846 Жыл бұрын

Очень полезно! Хочется еще подобный контент с фишками💥

@MrRbSecond Жыл бұрын

Братан, хорош, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?

@farruhsydykov8420 Жыл бұрын

Супер! Давай больше о TS, backend, web3!

@gluktd Жыл бұрын

Нижайший поклон добрый человек! Очень понравилось! knowledge sharing в массы

@shittywizzard5727 Жыл бұрын

Лаконично и ёмко, хорош, давай еще)

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

Быстрые гайды офигенно заходят!) Правда слушаю на 1.75, поэтому они прям супер быстрые)) Материал полезный, даже если все знаешь, лишний раз повторишь. Спасибо за труды!

@foldisnomistake Жыл бұрын

круто, нужны еще такого плана видосы!

@vladimirliankevich1361 Жыл бұрын

Спасибо тебе большое за такие познавательные видео!!!!!!! Как всегда по полочкам

@frednoby8531 Жыл бұрын

Интересные нюансы, благодарю!

@Quentinrei Жыл бұрын

Ещё не досмотрел, но уже заходит, крутой ролик

@holfizz7868 Жыл бұрын

это какой то п**дец. Я еле еле что то вкурил. И я понял что надо учиться и учиться. Тимур ты реально крут. Спасибо тебе❤❤

@dmitrykabanov9458 Жыл бұрын

По сути, все что показано в данном видео это вспомогательные инструменты ТС. Это не обязательно использовать но надо знать, по тому что эти инструменты помогают писать код таким образом, чтобы предотвращать не корректный код. Если интересно, почитай про тайп гарды, анкноун и Невер. Всякие енамы, как по мне, не нужны. Они просто побыстрее работают

@holfizz7868 Жыл бұрын

@@dmitrykabanov9458 Я обязательно займусь этим но позже. Мне очень сложно это воспринимать так рано:)

@reversoid8170 Жыл бұрын

Очень круто и полезно! Не знал про Exclude)

@dkaygorodov Жыл бұрын

Тимур, спасибо большое. Очень полезное видево!)

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

Как всегда коротко и по делу, очень полезное видео!

@ksushakiseleva2644 Жыл бұрын

Спасибо за твой труд! ❤ Твои видео очень полезные 👍

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

очень интересный обзор! спасибо большое!

@bambalbino Жыл бұрын

Очень круто!!! Спасибо

@Levitizen Жыл бұрын

Круто, спасибо. Можно вот этого вот почаще

@YuryGoltsman Жыл бұрын

Пару новых штуковин узнал. Спасибо

@sergeymalakhov2438 Жыл бұрын

Классное видео.Очень зашёл такой контент

@denispepper2830 Жыл бұрын

Спасибо! Круто! Норм формат!

@demetrx7972 Жыл бұрын

Всё, что нужно, в одном месте, быстро и понятно 💣💥

@Ramosok Жыл бұрын

Круто, очень много нового узнал.

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

Как всегда годный контент. React, Typescript форева😂

@alexanderkomanov4151 Жыл бұрын

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

@user-jm7dy8ks7w 9 ай бұрын

Тимур это прям очень полезное видео)) спасибо

@MrDANPTZ Жыл бұрын

Просто супер! Полезного было достаточно, что приятно Спасибо за ролик!

@dmitrykabanov9458 Жыл бұрын

Было бы круто посмотреть видео про микрофронтенд. Условно - есть базовый Шелл, в котором есть базовый роутинг. И каждый роут это отдельный сервис, который прописан в ремоутс

@ixplo Жыл бұрын

как меня триггерят такие темы :) микрофронты -- это решение, когда полный бардак в конторе надо как-то спасать. Микрофронты -- это приговор, когда всё просрали имхо

@parabellum577 Жыл бұрын

@@ixplo ну да, не могу представить кейс, когда такое говно реально нужно применять

@ixplo Жыл бұрын

@@parabellum577 кейсы есть, но почти всегда за сопоставимое вложение ресурсов можно сделать что-то другое, что не повлияет на качество продукта

@vladimirkuban426 Жыл бұрын

Супер!

@egorpobylets6597 Жыл бұрын

Супер, спасибо. Очень интересно и полезно!

@ekaterina1991 Жыл бұрын

Реакт и js такого формата очень жду

@dmitrykabanov9458 Жыл бұрын

Про тайпгарды понравилось. Хороший пример

@user-ov8xk7cn9e 8 күн бұрын

Крутые ролики у тебя, смотрю и практикуюсь) !спасибо!

@_GyG_ Жыл бұрын

Коммент в поддержку) как всегда все круто!

@sergsergey4251 Жыл бұрын

Спасибо за полезное видео

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

Спасибо, довольно полезный контент

@lLoseControll Жыл бұрын

Круто, продолжай)

@17u5h Жыл бұрын

крутяк! Заскринил некоторые моменты, записал в "заметки"

@max_mgtow Жыл бұрын

Вперёд братан, контент в кайф! 👍👏🔥

@natalyaiv3414 Жыл бұрын

Тимур, спасибо! 👍

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

Действительно интересные приемы которые хотелось бы попробовать в деле.

@BobbyBob21 Жыл бұрын

Ещё офигенная вещь это inner. Для динамических типов это просто незаменимая вещь.

@l1mejkeee628 Жыл бұрын

Больше такого контента!!!! Пожалуйста!!!

@STELLS541 Жыл бұрын

Видос просто 🔥. Можно такого больше? ☺️ В конце про дженерики - это прям топ, как раз на днях увидел это в курсе и сразу понял тут, как это фиксить. А еще функцию онЧенч внутри селекта можно переписать через опшионал ченинг, что сделает ее чуточку короче.

@luckytima2315 Жыл бұрын

Бро давай побольше TS, он сейчас везде просто нужен )) Ну и фишки ванильного JS тоже хотелось бы узнать))

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

очень полезно, спасибо

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

Оч интересно, контент топ, идея топ

@nothingg1759 Жыл бұрын

Очень заходит! Понравится всем, спасибо большое!

@v.demchenko 8 ай бұрын

Интересная тема по поводу типизированых переиспользуемых компонентов. Наткнулся на много проблем типизации от создании темы до типизации пропсов.

@MrJettann Жыл бұрын

Топ, испытываю проблемы с тс постоянно, с подобным контентом становится проще!

@Moishe_Rubinstein Жыл бұрын

strapi сделай бро! :)

@ruslanla4654 Жыл бұрын

круто!!

@ArtyomSamsonchik Жыл бұрын

На 23:50 можно вытянуть тип Birthday гораздо проще. У TS есть синтаксис доступа к типу по индексу, и выглядит это так: type BirthDay = User['birthDay'] И не нужны ни Pick, ни ValueOf.

@maximkarpov4405 Жыл бұрын

так его valueOf по сути тоже самое

@elena_sva Жыл бұрын

В примере где с помощью ValueOf берём тип birthday можно просто взять TypeNameWithBirthday['birthday']

@UlbiTV Жыл бұрын

Справедливо, если нужно одно поле, пиком можно несколько цепануть

@BOCbMOU Жыл бұрын

@@UlbiTV если надо достать тип значений из нескольких полей, то как раз пик тут лишний, по прежнему можно несколько ключей перечислить: TypeNameWithBirthday['id' | 'age' | 'birthday'] Пик всё же как раз для создания нового объекта с некоторыми старыми ключами и изначальными типами ключей. Доставать через него значение нелогично.

@raff_m_d6971 Жыл бұрын

контент топ, продолжай

@stmihan_ Жыл бұрын

Очень круто, но надеюсь ты сделаешь всё-таки видео по react query.

@tesohi 9 ай бұрын

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

@DubinArtur 9 ай бұрын

12:50 если надо, чтобы функция принимала стоки, которые относятся к enum, нужно в качестве аргумента функции указать ‘${UserRole}‘. Функция пропустит и enum значения как UserRole.Admin, так и "admin"

@Orlov_Developer Жыл бұрын

Полезно, рубрика классная

@famemax8264 Жыл бұрын

Зашло, спасибо

@infodusha Жыл бұрын

Привет! в первом примере надо возвращать результат функции never чтобы вычисляемый тип значения был правильный (а то иначе туда добавится undefined)

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

1 кейс что пришел на ум, когда ты используешь не константный объект а через ValueOf получаешь типы и потом используешь строки или что там в readonly то если надо заменить значение ты будешь бегать по проекту и менять занчения везде, если же использоать константный объект (импортировать его да) то значение нужно заменять в одном месте

@spadar1602 Жыл бұрын

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

@Quentinrei Жыл бұрын

Больше таких роликов !

@---Maksim--- Жыл бұрын

Спасибо, на 1.25 смотрится отлично)

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

Привет, я давно смотрю твои видео, очень интересный контент, нравится твоя манера говорить и способность вести диалоги. Ты в каком-то видео говорил, что для начинающих программистов крайне важно попасть на хорошую работу, с хорошим начальником и коллективом, и я хотел бы узнать твое мнение, я очень начинаешь бэкэндер и фронтэндер, учился по разным курсам в интернете и твоим видео, подтянул JS, HTML и CSS, наконец-то подвернулся вариант с работой, которую долго искал, и согласился на первый же вариант, и тут началось: рамках обучения мне дали задание сделать фулстек проект, разработать приложение для ведения реестра, с базой данных на 10 таблиц, с 15000 строк, осуществить все в laravel при помощи php, сказали: ну делай, а теперь спустя небольшое время, начинается возмущение, что я медленно делаю и ничего не успеваю, сижу просто учусь. И я не знаю, так и должно быть, и это я правда медленно развиваюсь или все же должна быть какая-то помощь? Очень интересно твое мнение, буду рад, если ты ответишь, заранее больше спасибо P.s. я тоже закончил РТУ МИРЭА в 2021)

@TheProfessionalGambler Жыл бұрын

Интересные фишки, спасибо) 20:40 пример не совсем корректный, когда мы делаем объект константой _obj as const_ , то мы его поля не сможем изменить, а в функцию мы передаем аргументом объект с похожим типом и он никак не связан с obj. То есть ТС только проверяет на соответствие типов параметра и аргумента, а не логику внутри функции. 23:30 пример для Extract лучше с доки _type T0 = Extract;_ по простому это как пересечение. В твоём примере непонятно зачем указывать union, который и получаем.

@alexsandrkalenichenko5599 Жыл бұрын

Круто! давай еще

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

Годнота!🎉

@riendlyf Жыл бұрын

Вот это супер было !!!!

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

формат огонь. можно ли погрузиться глубже в дженерики с след видео ?

@qwe-rty- Жыл бұрын

Супер, надеялся еще на MappedTypes посмотреть, по ним видосик будет?)

@DemetriyArh Жыл бұрын

Круть. А о декораторах можешь рассказать?

@ruslangilyazov7733 7 ай бұрын

Больше type script & react & redux, please! Я знаю что есть много на канале про это но еще хочется

@dimabaturo2492 Жыл бұрын

Как обычно контент в кайф

@alexmarch Жыл бұрын

хочу собеседования ! но любой контент твой хорош

@NikOroferov Жыл бұрын

Контент зашёл, даю знать

@skobanev 22 сағат бұрын

Добрый день. Спасибо Вам огромное. А существует курс по TS для новичков в Вашем формате? Вы просто идеально информацию преподносите.

@JenechekDv Жыл бұрын

стильно, модно, молодёжно. Давай ещё.

@dannysas8460 Жыл бұрын

Спасибо

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

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