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

Рет қаралды 84,764

Күн бұрын

В этом ролике мы разберем интересные моменты в 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

Пікірлер: 260

@VasjaG Жыл бұрын

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

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

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

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

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

@VasjaG Жыл бұрын

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

@anatoliiilescu839 Жыл бұрын

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

@VasjaG Жыл бұрын

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

@dzmitrypasavetsdimapolonez2644 Жыл бұрын

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

@IzyLifeVlog Жыл бұрын

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

@SeverHolod Жыл бұрын

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

@falsetrue7910 Жыл бұрын

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

@maksimtsvetkov3764 Жыл бұрын

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

@ixplo Жыл бұрын

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

@gigor1433 Жыл бұрын

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

@MrRbSecond Жыл бұрын

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

@BOCbMOU Жыл бұрын

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

@dmitrykabanov9458 Жыл бұрын

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

@ixplo Жыл бұрын

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

@parabellum577 Жыл бұрын

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

@ixplo Жыл бұрын

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

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

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

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

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

@holfizz7868 Жыл бұрын

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

@dmitrykabanov9458 Жыл бұрын

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

@holfizz7868 Жыл бұрын

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

@shittywizzard5727 Жыл бұрын

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

@farruhsydykov8420 Жыл бұрын

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

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

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

@tagnati5585 Жыл бұрын

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

@BobbyBob21 Жыл бұрын

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

@valentinaicheva7846 Жыл бұрын

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

@foldisnomistake Жыл бұрын

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

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

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

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

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

@YuryGoltsman Жыл бұрын

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

@reversoid8170 Жыл бұрын

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

@frednoby8531 Жыл бұрын

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

@dmitrykabanov9458 Жыл бұрын

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

@Quentinrei Жыл бұрын

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

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

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

@vladimirliankevich1361 Жыл бұрын

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

@Levitizen Жыл бұрын

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

@demetrx7972 Жыл бұрын

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

@ekaterina1991 Жыл бұрын

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

@ksushakiseleva2644 Жыл бұрын

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

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

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

@elena_sva Жыл бұрын

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

@UlbiTV Жыл бұрын

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

@BOCbMOU Жыл бұрын

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

@dkaygorodov Жыл бұрын

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

@Ramosok Жыл бұрын

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

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

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

@bambalbino Жыл бұрын

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

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

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

@sergeymalakhov2438 Жыл бұрын

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

@luckytima2315 Жыл бұрын

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

@alexanderkomanov4151 Жыл бұрын

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

@max_mgtow Жыл бұрын

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

@_GyG_ Жыл бұрын

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

@ArtyomSamsonchik Жыл бұрын

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

@maximkarpov4405 Жыл бұрын

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

@l1mejkeee628 Жыл бұрын

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

@Moishe_Rubinstein Жыл бұрын

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

@egorpobylets6597 Жыл бұрын

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

@DubinArtur 9 ай бұрын

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

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

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

@MrDANPTZ Жыл бұрын

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

@sergsergey4251 Жыл бұрын

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

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

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

@denispepper2830 Жыл бұрын

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

@natalyaiv3414 Жыл бұрын

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

@gluktd Жыл бұрын

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

@stmihan_ Жыл бұрын

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

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

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

@17u5h Жыл бұрын

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

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

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

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

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

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

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

@ruslanla4654 Жыл бұрын

круто!!

@lLoseControll Жыл бұрын

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

@vladimirkuban426 Жыл бұрын

Супер!

@Quentinrei Жыл бұрын

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

@infodusha Жыл бұрын

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

@STELLS541 Жыл бұрын

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

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

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

@MrJettann Жыл бұрын

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

@spadar1602 Жыл бұрын

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

@DemetriyArh Жыл бұрын

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

@tesohi 9 ай бұрын

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

@famemax8264 Жыл бұрын

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

@nothingg1759 Жыл бұрын

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

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

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

@igortrifonov9339 Жыл бұрын

По поводу первого случая, не нужно делать функцию, это лишнее. Можно просто написать const _: never = car.brand, и TS будет ругаться, если мы попадет в дефолт.

@BOCbMOU Жыл бұрын

Есть ещё проще вариант на 4.9+ версии: car.brand satisfies never;

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

@@BOCbMOU Огонь! Не знал что такое есть

@Orlov_Developer Жыл бұрын

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

@alexmarch Жыл бұрын

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

@alexsandrkalenichenko5599 Жыл бұрын

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

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

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

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

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

@riendlyf Жыл бұрын

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

@raff_m_d6971 Жыл бұрын

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

@TheProfessionalGambler Жыл бұрын

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

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

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

@NikOroferov Жыл бұрын

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

@Ramosok Жыл бұрын

А главное как теперь матёрым синьёром рассказать, что простой обьект лучше енама?)) я это и так интуитивно предпологал.

@ruslangilyazov7733 7 ай бұрын

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

@dannysas8460 Жыл бұрын

Спасибо

@mrBurlaka1 Жыл бұрын

Да еще по typescript

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

Годнота!🎉

@dimabaturo2492 Жыл бұрын

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

@tojiboyevumidjon Жыл бұрын

Спасибо большое! Боже я только что узнал то что я зря мучился целый день

@belomax100 Жыл бұрын

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

@vanmihaylovich Жыл бұрын

Видео о том, как обойти грабли TS.

@dontcode Жыл бұрын

Тс и есть грабля, поверх джаваскрипта)

@macmasek Жыл бұрын

Шаг 1: перестаньте использовать Typescript

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

Ахренеть, не знал, что в JSX элементы можно указывать generic Если кому интересно, в TS есть механизм - "брендирование". Позволяет избежать ошибок, когда вместо id, условно, товара, передали id продавца.

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

Ещё про infer пара слов, правда на англе, но с хорошим акцентом) kzfaq.info/get/bejne/nrKKi62F0p24dZ8.html