KZhead

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

wise.js 
2024 ж. 26 Мам.
54 722 Рет қаралды
Жүктеу

Разбираем с одной из сложнейших тем в 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
✔️Если хочешь изучать программирование со мной, не забудь подписаться :)
kzhead.info/tools/Oxq.html...
✔️Мой телеграм канал: t.me/joinchat/RVq-cmt6n1SJRS7Z
Подписывайтесь на мой канал, следите за новыми полезными роликами, пишите комментарии и приятного просмотра!
Определение понятий взяты из книги: typescript-definitive-guide.r...)
#generic #дженерики #typescript #тайпскрипт

Пікірлер

  • Все свои вопросы касательно дженериков оставляй в комментариях 👇, тут же будем их разбирать.

    @wisejs@wisejs2 жыл бұрын

    • хороший видосик, освежил немного память, спасибо тебе за твой труд...

      @andriizilnyk4927@andriizilnyk49272 жыл бұрын

  • Я не понимаю,почему на этом канале так мало подписчиков,по-моему лучше что я видел в жизни,это ролики с канала wise.js.Как всегда 100/10 спасибо за то что вы есть!!!!!!!

    @romanpohribniak8471@romanpohribniak84712 жыл бұрын

    • Случайно узнал о канале пару дней назад. Подтверждаю, что очень хорошо объясняются сложные темы. Сразу подписался. Я пол жизни фронт-эндом занимаюсь, но, например, лучшего объяснения TS я не находил пока. А его-то я как раз и упустил в свое время.

      @GrOm_SG@GrOm_SG2 жыл бұрын

    • Терпение. Скоро будет много) канал то топовый

      @zizzxiii2714@zizzxiii27142 жыл бұрын

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

    @user-ru3ui3is6p@user-ru3ui3is6p2 жыл бұрын

  • Ахрененное видео, такой разнообразного функционала по дженерикам, даже в хороших платных курсах нет.

    @user-fg6un4ho9z@user-fg6un4ho9z2 жыл бұрын

    • Спасибо, старался покрыть все базовые возможности :)

      @wisejs@wisejs2 жыл бұрын

    • @@wisejs Спасибо большое 💯🔥

      @nouchance@nouchance2 жыл бұрын

  • ты мега крут, все четко и понятно, куча примеров, спасибо за твой труд...

    @andriizilnyk4927@andriizilnyk49272 жыл бұрын

    • Спасибо 😀

      @wisejs@wisejs2 жыл бұрын

    • @@wisejs Согласен, реально топ, побольше бы от тебя видосов!!!

      @champ__champ@champ__champ2 жыл бұрын

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

    @vladimidlav@vladimidlav2 жыл бұрын

  • Все четко, ясно и с душой! Как всегда!

    @user-xe7sp3pr7t@user-xe7sp3pr7t2 жыл бұрын

  • Огромное спасибо за объяснения) Дженерики стали для меня намного понятнее)

    @grabril3264@grabril32642 жыл бұрын

  • Великолепное объяснение!!! Большая благодарность с низким поклоном!

    @sergeyplotnikov5031@sergeyplotnikov50312 жыл бұрын

  • Шикарный обзор! Спасибо. Все собрано, систематизировано и компактно изложено!

    @ajprofi@ajprofi Жыл бұрын

  • Огонь. Все по полочкам разложено. Огромное спасибо за такой полезный урок.

    @nickkulmann@nickkulmann Жыл бұрын

  • Спасибо автору!!! Замечательные уроки 👍👍👍

    @user-uz7ok7vl2j@user-uz7ok7vl2j2 жыл бұрын

  • Спасибо! Очень доступно изложена тема, которую не так просто понять. Продолжайте, вы делаете полезное дело!

    @arthurkitskan2359@arthurkitskan23592 жыл бұрын

  • Просто супер объяснение. За разбор примера из официально документации отдельный респект👍

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

  • У меня много практических вопросов поднакопилось к Generic. Это видео их полностью закрыло. Спасибо огромное!

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

  • Вот это вообще офигенное видео, ни у кого такого не видел!

    @bvfromruvitaliy@bvfromruvitaliy2 жыл бұрын

  • потрясающие ролики про тсу!!! огромное спасибо автору. так редко бывает чтобы и подано хорошо и материал качественный и не простой, но и рассказано так что понятно. даже сам себя умнее чувствуешь пока смотришь - а это признак большого таланта автора который умеет так объяснять

    @user-xw8ur4sc6t@user-xw8ur4sc6t4 ай бұрын

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

    @Polite_person_@Polite_person_2 жыл бұрын

  • посмотрел несколько видосов про Женерики , этот самый збс. Жирный лойс! И вообще парень толковый

    @maxd7347@maxd7347 Жыл бұрын

  • Ох, действительно сложновато понять, если использовать дженерики на максималках. Надо пробовать понемногу юзать их) Спасибо, очень чётко рассказал!

    @gregorytorshin2574@gregorytorshin25742 жыл бұрын

  • Спасибо за очередное видео про TypeScript Generic, Extends

    @konstantinvoronin4687@konstantinvoronin46872 жыл бұрын

  • Поставил лайк, не только из-за того что контент топ, но и за то, что нет ничего что отвлекало бы: музыки, лишних вставок и т.п. Тот самый момент, когда тебя не просили, но ты поставил лайк, оставил комментарий и подписался). Удачи!

    @e_viskhan@e_viskhan Жыл бұрын

  • Спасибо. На примерах понять дженерики много проще.

    @blgarOk@blgarOk2 жыл бұрын

  • Последний пример особенно топ) не так давно начал изучать реакт и пытаюсь разобраться в типизации реакта) было интересно узнать на реализацию :FC функционального компонента в реакте.

    @PieceOfInternet@PieceOfInternet6 ай бұрын

  • Огромное спасибо!! Третий или четвертый раз пытаюсь понять про дженерики и только из вашего видео поняла

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

  • Это баааза) очень, очень хорошее объяснение, удачи в блоге!

    @user-zs4bs3yp3h@user-zs4bs3yp3h2 ай бұрын

  • Спасибо за просто невероятное объяснение этих дженериков)

    @user-nk8pq1hc4e@user-nk8pq1hc4e6 ай бұрын

  • Это видео...просто клад. Спасиб) На курсах теорию прохожу, понял частично. Видео посмотрел, понял практически все. Осталось попрактиковаться.

    @romanpit4you361@romanpit4you3612 ай бұрын

  • Дядя, это балдеж) обьясняешь понятно и кратко, мне б такого ментора 😂😂

    @garajgames3336@garajgames33367 ай бұрын

  • Наконец-то доходчивое объяснение. Спасибо!

    @dmitrytrofim@dmitrytrofim4 ай бұрын

  • Просто супер! Красава. Хотим больше по TS но желательно без привязок к реакту и пр. )

    @1654045@165404510 ай бұрын

  • Спасибо, за видео! Пожалуй это лучшее и доступное объяснение которое я видел)

    @RamaRama-qv3jo@RamaRama-qv3jo7 ай бұрын

  • Спасибо за видос. Отличные примеры

    @user-py4jl1nm3v@user-py4jl1nm3v2 жыл бұрын

  • Спасибо за офигенное объяснение

    @rasul7702@rasul77025 ай бұрын

  • Канал огонь! Спасибо за контент!!!

    @muratakmamedau7328@muratakmamedau73282 жыл бұрын

  • Очень крутой ролик по дженерики! Теперь его всем советую)

    @pc_boyarin1712@pc_boyarin17122 жыл бұрын

  • Хороший урок, спасибо за труд!

    @dimalukashenko4865@dimalukashenko4865 Жыл бұрын

  • You are the best! There were great snippets,understandable. Thank you;)

    @romarooman@romarooman2 жыл бұрын

  • Очень полезный урок, спасибо 🙌

    @Anonym-li8eb@Anonym-li8eb5 ай бұрын

  • Не могу, начал изучать TP, думал, что дженерики это что то новое, крутое, а это просто шаблонный тип данных. К автору ничего не имею, красава, ролик хороший. Делай еще, ты красава.

    @temasAndreikin@temasAndreikin Жыл бұрын

  • Это лучшее видео про джинерики которое я видел

    @yabadababy3204@yabadababy32042 ай бұрын

  • Вот что значит человек постарался и подготовил материал. Знания залетают как конфетки с чаем)

    @TheGaddina@TheGaddina2 жыл бұрын

  • Спасибо огромное! Хоть у тебя есть такой контент оказывается

    @fuad2069@fuad2069 Жыл бұрын

  • Без комментариев, просто 🔥🔥 🔥

    @777Vasya77@777Vasya772 жыл бұрын

  • Контент - ТОП! Спасибо большое!

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

  • Однозначно лайк, всё разжевал - спасибо. Теперь всё стало понятно)

    @sezarik1663@sezarik1663 Жыл бұрын

  • Аффтор молоток. Видео качественное.

    @floor12evgen@floor12evgen2 жыл бұрын

  • Урок отличный, примеры прикладные!

    @user-mu4my8fq2e@user-mu4my8fq2e9 ай бұрын

  • Отличное объяснение!

    @localhost666@localhost666 Жыл бұрын

  • Спасибо за подробный разбор и примеры! Мне очень помогло.

    @AGM140580@AGM1405802 жыл бұрын

    • рад, что мои видео приносят пользу)

      @wisejs@wisejs2 жыл бұрын

  • Видос - шикардос, держи лайкос :)

    @B_G_V@B_G_V Жыл бұрын

  • Отличное видео Спасибо за объяснения

    @yuraya6269@yuraya6269 Жыл бұрын

  • Спасибо!!!! все понятно обьсняешь!!

    @apkartas7416@apkartas74168 ай бұрын

  • Сразу видно, когда разработчик видяху делае.... Лайк

    @galievramil1169@galievramil11697 ай бұрын

  • Топовое видео!

    @magakz@magakz2 жыл бұрын

  • топ! это самое полезное видео, которое я просмотрел за этот год

    @quiksilverost@quiksilverost7 ай бұрын

  • Отличный видос, так держать.

    @user-ky4vq5jm5u@user-ky4vq5jm5u2 жыл бұрын

  • Самый лучший видос по дженерикам.

    @germanfomenko4674@germanfomenko4674 Жыл бұрын

  • Тот случай, когда понял, что все оказалось так просто, что странно, что не допер раньше. Спасибо. Может про всякое ООП в тайпскрипте расскажите.

    @GuvaPusto@GuvaPusto2 жыл бұрын

  • всё доступно и понятно. спасибо

    @snezhok9863@snezhok98632 жыл бұрын

  • Наконец-то понял. Низкий поклон автору

    @yaknyaz13@yaknyaz138 ай бұрын

  • хорошее руководство по дженерикам: лайк, подписка)

    @user-lj7yk3kl3f@user-lj7yk3kl3f2 жыл бұрын

  • Лучшее объяснение дженериков.

    @user-gb9et7dk2r@user-gb9et7dk2r2 жыл бұрын

  • Лайк, подписка! ❤ Спасибо за твой труд!

    @ksushakiseleva2644@ksushakiseleva2644 Жыл бұрын

  • Спасибо тебе добрый человек )

    @VH-777@VH-7772 жыл бұрын

  • Очень крутое объяснение спасибо

    @user-pt2uz5st7i@user-pt2uz5st7i3 ай бұрын

  • крутяк видос! юзаю как справочник!

    @andreymelnichenko9373@andreymelnichenko93732 жыл бұрын

  • Лайк, наконец всё понятно

    @hippycore0@hippycore05 ай бұрын

  • Спасибо за примеры из реальной жизни. Когда читаю статьи и документацию, там одна синтетика

    @webartem@webartem Жыл бұрын

  • Wise, ты один из лучших! Typescript, generic)))) 🥳🥳🥳

    @user-so1bu9cw5g@user-so1bu9cw5g2 жыл бұрын

  • спасибо большое. прям очень качественный материал

    @alexmercer4653@alexmercer46532 жыл бұрын

    • Спасибо за комментарий!

      @wisejs@wisejs2 жыл бұрын

  • Топ контент, успехов ! На 7:00, можно было добавить значение по умолчанию для Т, тогда и без уточнения можно передавать

    @Quentinrei@Quentinrei2 жыл бұрын

  • Спасибо за видео.

    @olfi1728@olfi17282 жыл бұрын

  • Видос огонь! 🔥🔥🔥

    @mikhailreznichenko8035@mikhailreznichenko80352 жыл бұрын

    • 🧯🧯🧯

      @wisejs@wisejs2 жыл бұрын

  • Большое спасибо!

    @HoshiramaSensei@HoshiramaSensei2 жыл бұрын

  • Cупер контент, изи! Асалам алекум трампопом👏🏻

    @orkhannabi@orkhannabi2 жыл бұрын

  • Красавчик, рассказал четко, подписался лайк прожал, молодец! =)

    @user-ht5qv3wy4z@user-ht5qv3wy4z2 жыл бұрын

  • Спасибо!

    @lindafromdream@lindafromdream2 жыл бұрын

  • Чувак, спасибо!!

    @creativesolution4827@creativesolution48273 ай бұрын

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

    @1Malak16@1Malak162 жыл бұрын

    • Спасибо за поддержку, бро!)

      @wisejs@wisejs2 жыл бұрын

  • Сколько бы не пытались уйти от динамической типизации, в итоге к ней и вернулись..

    @maxforest7133@maxforest71332 жыл бұрын

  • Good job.

    @garikmelqonyan6011@garikmelqonyan6011 Жыл бұрын

  • Наверно, это самое ценное видео по дженерикам на русском языке. Огромное спасибо) лайк + колокольчик 👍

    @fidgetmania@fidgetmania Жыл бұрын

  • Мегаполезное видео, просто о сложном!!!

    @rmnkot@rmnkot2 жыл бұрын

    • Спасибо, рад что понравилось)

      @wisejs@wisejs2 жыл бұрын

  • бомба видос)) извините меня все тут, но не могу я не сказать про ключЬ!))

    @venobrun@venobrun2 жыл бұрын

    • век живи - век учись))))

      @wisejs@wisejs2 жыл бұрын

  • 12:55 Тут дженерик не особо-то и нужен =) function len(collection: {length: number}) { return collection.length; } len([1, 2]); len('hello'); Тоже работает

    @mrgrd56@mrgrd56 Жыл бұрын

  • А есть ли какие нибудь сайты с задачами на типизацию? Потому что вроде типизация с дженериками это просто, но как только начинаешь что то делать сам, бываешь сидишь в ступоре, потому что нет какого то понимания что ли. Вот хотел при помощи задачек набить понимание.

    @Aziikus@Aziikus Жыл бұрын

  • на 8:46 немного непонятно: почему TS разрешает передать в функцию массив содержащий два разных типа?

    @vladislavnovikov5202@vladislavnovikov52022 жыл бұрын

    • Потому что тип указан как любой массив. Там хоть сотня разных типов может быть.

      @wisejs@wisejs2 жыл бұрын

    • ​@@wisejs ну я это понимаю как массив элементов типа T. Дело в том, что мой основной язык - это Java, и там такие фокусы сделать нельзя. Там если массив / коллекция объявлены как T[] / List, то положить туда что-то, что не расширяет само T (ну или само T) нельзя

      @vladislavnovikov5202@vladislavnovikov52022 жыл бұрын

  • жесть)

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

  • По теме видео, спасибо за науку, конечно, но один момент я тут не увидел. И понять его не могу. Как и, главное, Когда нужно применять generic при вызове функции..... Пример из React: const [value, setValue] = useState(0)

    @yakut54@yakut54 Жыл бұрын

  • 10:12, это операция пересечения, а не объединение

    @ko22012@ko220122 ай бұрын

  • пишу на js уже несколько лет, последний год в своем проектке использую ts но не на 100%, но даже так получаю много пользы от него, НО блин на 21 минуте какаято жесть как по мне, че так усложнять то?

    @yuriymusatov9181@yuriymusatov9181 Жыл бұрын

  • надо больше вариаций там еще Return type какой то завезли все все другое новое рассказать.

    @you.Multypassport@you.Multypassport2 жыл бұрын

    • Это уже conditional types + infer. Сделаю по ним видео.

      @wisejs@wisejs2 жыл бұрын

  • Расскажи про утилиты тс

    @sergeys4732@sergeys47322 жыл бұрын

    • Будет.

      @wisejs@wisejs2 жыл бұрын

  • дякую велике, це значно зрозуміліше ніж дока

    @alexmotorniy@alexmotorniy Жыл бұрын

  • +

    @user-ge2qk4cm1j@user-ge2qk4cm1j2 жыл бұрын

  • После просмотра этого видео, мой мозг сгорел

    @risselify@risselify3 ай бұрын

  • 1. можно ли обявлять тайп алиасы с дженериками? Допусти: type UserFactory = FactoryClass; const userFactory: UserFactory = .... 2. Использовать generic react компонеты в разных units: React.ComponentProps ?

    @allusio@allusio2 жыл бұрын

    • 1. Можно. 2. Можно, если в этом есть смысл.

      @wisejs@wisejs2 жыл бұрын

    • @@wisejs как, если TS это не пропускает.

      @allusio@allusio2 жыл бұрын

    • @@allusio что не пропускает?

      @wisejs@wisejs2 жыл бұрын

    • @@wisejs использование дженериков в объявлении алиасов ну и использование типов с дженериками, кроми как объявление типа переменной

      @allusio@allusio2 жыл бұрын

    • @@allusio давайте примеры кода, что не работает. Сложно понять что именно не работает.

      @wisejs@wisejs2 жыл бұрын

  • 👉 Этот комментарий создан в качестве уважения автору и для продвижения его канала.

    @user-sv1ze9gk3b@user-sv1ze9gk3b2 жыл бұрын

  • 🫡

    @19Sanji@19SanjiАй бұрын
KZhead