Тёмный

Дженерики в TypeScript с нуля: Generic, Extends, Дефолтные Параметры + Примеры Использования. 

wise.js 
Подписаться 18 тыс.
Просмотров 55 тыс.
50% 1

Разбираем с одной из сложнейших тем в TypeScript - дженериками. Generic - это мощный инструмент, позволяющий описывать типа, способные работать с различными типами и структурами данных. Таймкоды:
00:00 - Зачем нужны generic типы.
01:47 - Что такое generic в TypeScript. Синтаксис дженерик типов.
02:45 - Как работают generic типы.
05:38 - Создаем простой generic для загрузки данных по API.
07:18 - Пример функции generic для работы с массивами.
09:11 - Пример функции generic для работы с объектами.
10:20 - Встроенные типы generic на примере Promise, Array, Record.
12:04 - Generic + extends. Простой пример.
13:05 - Generic + class + extends. Пример с классом.
16:28 - Generic + object. Получаем значение по ключу.
18:18 - Generic + object. Получаем ключ по значению.
21:38 - Типизация функций с множеством дженериков.
23:49 - Значения по умолчанию для generic.
24:35 - Создание собственного дженерика, аналога React.FC.
Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка!
👉 Менторство и поддержка: / wisejs
✔️Если хочешь изучать программирование со мной, не забудь подписаться :)
ru-vid.com/show-UCOxq...
✔️Мой телеграм канал: t.me/joinchat/RVq-cmt6n1SJRS7Z
Подписывайтесь на мой канал, следите за новыми полезными роликами, пишите комментарии и приятного просмотра!
Определение понятий взяты из книги: typescript-definitive-guide.r...)
#generic #дженерики #typescript #тайпскрипт

Опубликовано:

 

10 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 129   
@wisejs
@wisejs 2 года назад
Все свои вопросы касательно дженериков оставляй в комментариях 👇, тут же будем их разбирать.
@andriizilnyk4927
@andriizilnyk4927 2 года назад
хороший видосик, освежил немного память, спасибо тебе за твой труд...
@romanpohribniak8471
@romanpohribniak8471 2 года назад
Я не понимаю,почему на этом канале так мало подписчиков,по-моему лучше что я видел в жизни,это ролики с канала wise.js.Как всегда 100/10 спасибо за то что вы есть!!!!!!!
@GrOm_SG
@GrOm_SG 2 года назад
Случайно узнал о канале пару дней назад. Подтверждаю, что очень хорошо объясняются сложные темы. Сразу подписался. Я пол жизни фронт-эндом занимаюсь, но, например, лучшего объяснения TS я не находил пока. А его-то я как раз и упустил в свое время.
@zizzxiii2714
@zizzxiii2714 2 года назад
Терпение. Скоро будет много) канал то топовый
@user-ru3ui3is6p
@user-ru3ui3is6p 2 года назад
Тот случай, когда поставив лайк на первых минутах, через какое-то время неоднократно рука тянется еще ставить и ставить лайки, чтобы отблагодарить) Спасибо за твой труд. Спасибо за большое количество реальных примеров!
@user-fg6un4ho9z
@user-fg6un4ho9z 2 года назад
Ахрененное видео, такой разнообразного функционала по дженерикам, даже в хороших платных курсах нет.
@wisejs
@wisejs 2 года назад
Спасибо, старался покрыть все базовые возможности :)
@nouchance
@nouchance 2 года назад
@@wisejs Спасибо большое 💯🔥
@andriizilnyk4927
@andriizilnyk4927 2 года назад
ты мега крут, все четко и понятно, куча примеров, спасибо за твой труд...
@wisejs
@wisejs 2 года назад
Спасибо 😀
@champ__champ
@champ__champ 2 года назад
@@wisejs Согласен, реально топ, побольше бы от тебя видосов!!!
@user-xe7sp3pr7t
@user-xe7sp3pr7t 2 года назад
Все четко, ясно и с душой! Как всегда!
@vladimidlav
@vladimidlav 2 года назад
Дженерики такая неоднозначная вещь, пересмотрел почти все русскоязычные видео на эту тему. Ты сделал самое лучшее объяснение, как же я тебе благодарен, теперь как-то по полочкам уложилось
@nickkulmann
@nickkulmann Год назад
Огонь. Все по полочкам разложено. Огромное спасибо за такой полезный урок.
@user-ux8df6rx1e
@user-ux8df6rx1e Год назад
Просто супер объяснение. За разбор примера из официально документации отдельный респект👍
@Polite_person_
@Polite_person_ 2 года назад
Очень доступно объяснил, спасибо большое. Ждём ещё разборы тем по TS , потому что мало толковых роликов , везде рассказывают самые основы и например те же дженерики бегло объясняют.
@yabadababy3204
@yabadababy3204 2 месяца назад
Это лучшее видео про джинерики которое я видел
@grabril3264
@grabril3264 2 года назад
Огромное спасибо за объяснения) Дженерики стали для меня намного понятнее)
@sergeyplotnikov5031
@sergeyplotnikov5031 2 года назад
Великолепное объяснение!!! Большая благодарность с низким поклоном!
@ajprofi
@ajprofi Год назад
Шикарный обзор! Спасибо. Все собрано, систематизировано и компактно изложено!
@bvfromruvitaliy
@bvfromruvitaliy 2 года назад
Вот это вообще офигенное видео, ни у кого такого не видел!
@arthurkitskan2359
@arthurkitskan2359 2 года назад
Спасибо! Очень доступно изложена тема, которую не так просто понять. Продолжайте, вы делаете полезное дело!
@user-zj1xh1uc2l
@user-zj1xh1uc2l Год назад
У меня много практических вопросов поднакопилось к Generic. Это видео их полностью закрыло. Спасибо огромное!
@user-uz7ok7vl2j
@user-uz7ok7vl2j 2 года назад
Спасибо автору!!! Замечательные уроки 👍👍👍
@konstantinvoronin4687
@konstantinvoronin4687 2 года назад
Спасибо за очередное видео про TypeScript Generic, Extends
@maxd7347
@maxd7347 Год назад
посмотрел несколько видосов про Женерики , этот самый збс. Жирный лойс! И вообще парень толковый
@user-nk8pq1hc4e
@user-nk8pq1hc4e 7 месяцев назад
Спасибо за просто невероятное объяснение этих дженериков)
@dmitrytrofim
@dmitrytrofim 5 месяцев назад
Наконец-то доходчивое объяснение. Спасибо!
@fuad2069
@fuad2069 Год назад
Спасибо огромное! Хоть у тебя есть такой контент оказывается
@user-xw8ur4sc6t
@user-xw8ur4sc6t 4 месяца назад
потрясающие ролики про тсу!!! огромное спасибо автору. так редко бывает чтобы и подано хорошо и материал качественный и не простой, но и рассказано так что понятно. даже сам себя умнее чувствуешь пока смотришь - а это признак большого таланта автора который умеет так объяснять
@blgarOk
@blgarOk 2 года назад
Спасибо. На примерах понять дженерики много проще.
@quiksilverost
@quiksilverost 7 месяцев назад
топ! это самое полезное видео, которое я просмотрел за этот год
@TheGaddina
@TheGaddina 2 года назад
Вот что значит человек постарался и подготовил материал. Знания залетают как конфетки с чаем)
@romanpit4you361
@romanpit4you361 2 месяца назад
Это видео...просто клад. Спасиб) На курсах теорию прохожу, понял частично. Видео посмотрел, понял практически все. Осталось попрактиковаться.
@gregorytorshin2574
@gregorytorshin2574 2 года назад
Ох, действительно сложновато понять, если использовать дженерики на максималках. Надо пробовать понемногу юзать их) Спасибо, очень чётко рассказал!
@RamaRama-qv3jo
@RamaRama-qv3jo 8 месяцев назад
Спасибо, за видео! Пожалуй это лучшее и доступное объяснение которое я видел)
@1654045
@1654045 10 месяцев назад
Просто супер! Красава. Хотим больше по TS но желательно без привязок к реакту и пр. )
@user-zs4bs3yp3h
@user-zs4bs3yp3h 2 месяца назад
Это баааза) очень, очень хорошее объяснение, удачи в блоге!
@B_G_V
@B_G_V Год назад
Видос - шикардос, держи лайкос :)
@garajgames3336
@garajgames3336 8 месяцев назад
Дядя, это балдеж) обьясняешь понятно и кратко, мне б такого ментора 😂😂
@galievramil1169
@galievramil1169 8 месяцев назад
Сразу видно, когда разработчик видяху делае.... Лайк
@germanfomenko4674
@germanfomenko4674 Год назад
Самый лучший видос по дженерикам.
@pc_boyarin1712
@pc_boyarin1712 2 года назад
Очень крутой ролик по дженерики! Теперь его всем советую)
@rasul7702
@rasul7702 5 месяцев назад
Спасибо за офигенное объяснение
@user-tp3ru2yw1r
@user-tp3ru2yw1r Год назад
Огромное спасибо!! Третий или четвертый раз пытаюсь понять про дженерики и только из вашего видео поняла
@romarooman
@romarooman 2 года назад
You are the best! There were great snippets,understandable. Thank you;)
@Anonym-li8eb
@Anonym-li8eb 6 месяцев назад
Очень полезный урок, спасибо 🙌
@sezarik1663
@sezarik1663 Год назад
Однозначно лайк, всё разжевал - спасибо. Теперь всё стало понятно)
@user-mu4my8fq2e
@user-mu4my8fq2e 9 месяцев назад
Урок отличный, примеры прикладные!
@localhost666
@localhost666 Год назад
Отличное объяснение!
@yaknyaz13
@yaknyaz13 8 месяцев назад
Наконец-то понял. Низкий поклон автору
@muratakmamedau7328
@muratakmamedau7328 2 года назад
Канал огонь! Спасибо за контент!!!
@dimalukashenko4865
@dimalukashenko4865 Год назад
Хороший урок, спасибо за труд!
@user-pl6xx3xk9t
@user-pl6xx3xk9t Год назад
Контент - ТОП! Спасибо большое!
@AGM140580
@AGM140580 2 года назад
Спасибо за подробный разбор и примеры! Мне очень помогло.
@wisejs
@wisejs 2 года назад
рад, что мои видео приносят пользу)
@user-py4jl1nm3v
@user-py4jl1nm3v 2 года назад
Спасибо за видос. Отличные примеры
@e_viskhan
@e_viskhan Год назад
Поставил лайк, не только из-за того что контент топ, но и за то, что нет ничего что отвлекало бы: музыки, лишних вставок и т.п. Тот самый момент, когда тебя не просили, но ты поставил лайк, оставил комментарий и подписался). Удачи!
@777Vasya77
@777Vasya77 2 года назад
Без комментариев, просто 🔥🔥 🔥
@apkartas7416
@apkartas7416 9 месяцев назад
Спасибо!!!! все понятно обьсняешь!!
@user-gb9et7dk2r
@user-gb9et7dk2r 2 года назад
Лучшее объяснение дженериков.
@floor12evgen
@floor12evgen 2 года назад
Аффтор молоток. Видео качественное.
@user-lj7yk3kl3f
@user-lj7yk3kl3f 2 года назад
хорошее руководство по дженерикам: лайк, подписка)
@user-ky4vq5jm5u
@user-ky4vq5jm5u 2 года назад
Отличный видос, так держать.
@orkhannabi
@orkhannabi 2 года назад
Cупер контент, изи! Асалам алекум трампопом👏🏻
@yuraya6269
@yuraya6269 Год назад
Отличное видео Спасибо за объяснения
@ksushakiseleva2644
@ksushakiseleva2644 Год назад
Лайк, подписка! ❤ Спасибо за твой труд!
@andreymelnichenko9373
@andreymelnichenko9373 2 года назад
крутяк видос! юзаю как справочник!
@user-so1bu9cw5g
@user-so1bu9cw5g 2 года назад
Wise, ты один из лучших! Typescript, generic)))) 🥳🥳🥳
@webartem
@webartem 2 года назад
Спасибо за примеры из реальной жизни. Когда читаю статьи и документацию, там одна синтетика
@snezhok9863
@snezhok9863 2 года назад
всё доступно и понятно. спасибо
@user-pt2uz5st7i
@user-pt2uz5st7i 4 месяца назад
Очень крутое объяснение спасибо
@magakz
@magakz 2 года назад
Топовое видео!
@temasAndreikin
@temasAndreikin Год назад
Не могу, начал изучать TP, думал, что дженерики это что то новое, крутое, а это просто шаблонный тип данных. К автору ничего не имею, красава, ролик хороший. Делай еще, ты красава.
@hippycore0
@hippycore0 5 месяцев назад
Лайк, наконец всё понятно
@VH-777
@VH-777 2 года назад
Спасибо тебе добрый человек )
@GuvaPusto
@GuvaPusto 2 года назад
Тот случай, когда понял, что все оказалось так просто, что странно, что не допер раньше. Спасибо. Может про всякое ООП в тайпскрипте расскажите.
@PieceOfInternet
@PieceOfInternet 7 месяцев назад
Последний пример особенно топ) не так давно начал изучать реакт и пытаюсь разобраться в типизации реакта) было интересно узнать на реализацию :FC функционального компонента в реакте.
@user-ht5qv3wy4z
@user-ht5qv3wy4z 2 года назад
Красавчик, рассказал четко, подписался лайк прожал, молодец! =)
@alexmercer4653
@alexmercer4653 2 года назад
спасибо большое. прям очень качественный материал
@wisejs
@wisejs 2 года назад
Спасибо за комментарий!
@Quentinrei
@Quentinrei 2 года назад
Топ контент, успехов ! На 7:00, можно было добавить значение по умолчанию для Т, тогда и без уточнения можно передавать
@mikhailreznichenko8035
@mikhailreznichenko8035 2 года назад
Видос огонь! 🔥🔥🔥
@wisejs
@wisejs 2 года назад
🧯🧯🧯
@creativesolution4827
@creativesolution4827 4 месяца назад
Чувак, спасибо!!
@olfi1728
@olfi1728 2 года назад
Спасибо за видео.
@HoshiramaSensei
@HoshiramaSensei 2 года назад
Большое спасибо!
@lindafromdream
@lindafromdream 2 года назад
Спасибо!
@1Malak16
@1Malak16 2 года назад
Спасибо бро! Твой канал определенно один из лучший русскоязычных по тематике. Рекламу бы какую то нормальную сделать, чтобы о канале узнало побольше людей. Тогда успех обеспечен.
@wisejs
@wisejs 2 года назад
Спасибо за поддержку, бро!)
@garikmelqonyan6011
@garikmelqonyan6011 Год назад
Good job.
@fidgetmania
@fidgetmania Год назад
Наверно, это самое ценное видео по дженерикам на русском языке. Огромное спасибо) лайк + колокольчик 👍
@rmnkot
@rmnkot 2 года назад
Мегаполезное видео, просто о сложном!!!
@wisejs
@wisejs 2 года назад
Спасибо, рад что понравилось)
@alexmotorniy
@alexmotorniy Год назад
дякую велике, це значно зрозуміліше ніж дока
@venobrun
@venobrun 2 года назад
бомба видос)) извините меня все тут, но не могу я не сказать про ключЬ!))
@wisejs
@wisejs 2 года назад
век живи - век учись))))
@Aziikus
@Aziikus Год назад
А есть ли какие нибудь сайты с задачами на типизацию? Потому что вроде типизация с дженериками это просто, но как только начинаешь что то делать сам, бываешь сидишь в ступоре, потому что нет какого то понимания что ли. Вот хотел при помощи задачек набить понимание.
@maxforest7133
@maxforest7133 2 года назад
Сколько бы не пытались уйти от динамической типизации, в итоге к ней и вернулись..
@user-fk2rp8bm6t
@user-fk2rp8bm6t Год назад
жесть)
@mrgrd56
@mrgrd56 Год назад
12:55 Тут дженерик не особо-то и нужен =) function len(collection: {length: number}) { return collection.length; } len([1, 2]); len('hello'); Тоже работает
@yuriymusatov9181
@yuriymusatov9181 Год назад
пишу на js уже несколько лет, последний год в своем проектке использую ts но не на 100%, но даже так получаю много пользы от него, НО блин на 21 минуте какаято жесть как по мне, че так усложнять то?
@vladislavnovikov5202
@vladislavnovikov5202 2 года назад
на 8:46 немного непонятно: почему TS разрешает передать в функцию массив содержащий два разных типа?
@wisejs
@wisejs 2 года назад
Потому что тип указан как любой массив. Там хоть сотня разных типов может быть.
@vladislavnovikov5202
@vladislavnovikov5202 2 года назад
​@@wisejs ну я это понимаю как массив элементов типа T. Дело в том, что мой основной язык - это Java, и там такие фокусы сделать нельзя. Там если массив / коллекция объявлены как T[] / List, то положить туда что-то, что не расширяет само T (ну или само T) нельзя
@ko22012
@ko22012 3 месяца назад
10:12, это операция пересечения, а не объединение
@sergeys4732
@sergeys4732 2 года назад
Расскажи про утилиты тс
@wisejs
@wisejs 2 года назад
Будет.
@you.Multypassport
@you.Multypassport 2 года назад
надо больше вариаций там еще Return type какой то завезли все все другое новое рассказать.
@wisejs
@wisejs 2 года назад
Это уже conditional types + infer. Сделаю по ним видео.
@yakut54
@yakut54 2 года назад
По теме видео, спасибо за науку, конечно, но один момент я тут не увидел. И понять его не могу. Как и, главное, Когда нужно применять generic при вызове функции..... Пример из React: const [value, setValue] = useState(0)
@user-ge2qk4cm1j
@user-ge2qk4cm1j 2 года назад
+
@19Sanji
@19Sanji 2 месяца назад
🫡
@risselify
@risselify 4 месяца назад
После просмотра этого видео, мой мозг сгорел
@user-sv1ze9gk3b
@user-sv1ze9gk3b 2 года назад
👉 Этот комментарий создан в качестве уважения автору и для продвижения его канала.
@allusio
@allusio 2 года назад
1. можно ли обявлять тайп алиасы с дженериками? Допусти: type UserFactory = FactoryClass; const userFactory: UserFactory = .... 2. Использовать generic react компонеты в разных units: React.ComponentProps ?
@wisejs
@wisejs 2 года назад
1. Можно. 2. Можно, если в этом есть смысл.
@allusio
@allusio 2 года назад
@@wisejs как, если TS это не пропускает.
@wisejs
@wisejs 2 года назад
@@allusio что не пропускает?
@allusio
@allusio 2 года назад
@@wisejs использование дженериков в объявлении алиасов ну и использование типов с дженериками, кроми как объявление типа переменной
@wisejs
@wisejs 2 года назад
@@allusio давайте примеры кода, что не работает. Сложно понять что именно не работает.
Далее
#kikakim
00:12
Просмотров 844 тыс.
Что такое keyof typeof в TypeScript.
8:46
Просмотров 18 тыс.
Why use Type and not Interface in TypeScript
14:12
Просмотров 190 тыс.
Learn TypeScript Generics In 13 Minutes
12:52
Просмотров 215 тыс.
Массивы и объекты в TypeScript
26:09
Просмотров 14 тыс.