Улучши свой TypeScript код с помощью Type Guards и Type Assertions
Рет қаралды 9,824
Күн бұрынВ данном видео мы поговорим про такую тему как type guards и type assertions. Это такие базовые блоки, которые помогают нам писать безопасный код в TypeScript. Поговорим про то, что это такое, когда их использовать и детали при их написании.
Код из видео:
github.com/Ayub-Begimkulov/yo...
Ссылка на Telegram:
telegram.me/ayub_begimkulov_c...
Таймкоды:
00:00-00:38 - Интро
00:38-01:58 - Что такое type guard?
01:58-07:22 - Когда использовать type guard?
07:22-10:58 - Встроенные type guard’ы.
10:58-12:31 - Кастомные type guard’ы.
12:31-17:21 - Пишем type guard на кастомный тип.
17:21-19:16 - Что такое type assertion?
19:16-20:14 - Пример с type assertion.
20:14-20:53 - Важный момент при работе с type guards/assertions.
20:53-21:28 - Заключение
@ilyagamepub Жыл бұрын
Парень, годно очень, помогаешь молодым джунам понимать тайпскрипт)
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк!
@atlantatesla9348 9 күн бұрын
Я считала, что неплохо знаю typescript, но смотря твои видео уже сделала пару открытий для себя! Я не знала про function type assertion. А в видео про дженерики я узнала, что функцию type guard можно использовать для сужения key (function hasOwn) Благодарю!
@tanercoder1915 Жыл бұрын
То что нужно, продвинутый TS контент
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк!
@dmytroz.2084 Жыл бұрын
Забыл сказать, что на считаные каналы на кого я подписан у меня стоит колокольчик, но Аюб один из них. Жду всегда его видео! Подача улучшается с каждым видео. Растешь, Аюб, отлично! Миксы объяснения с примерами кода от "легких" до "сложных" очень гармонично + мини лайв кодинг.
@ayub_begimkulov Жыл бұрын
Спасибо большое!
@user-vm2db5cq1g Жыл бұрын
какое же полезное видео, периодически пересматриваю)))) СПасибо! реально по ТС. лучший контент на руЮтубе!
@ayub_begimkulov Жыл бұрын
Антон, спасибо больше за фидбэк!
@GitarisT12332 Жыл бұрын
Спасибо тебе Аюб, великолепно объясняешь, открывай патрион, или что-нибудь подобное, с радостью оформлю подписку на регулярные ролики такого плана.
@ayub_begimkulov Жыл бұрын
Спасибо! Если открою - дам знать обязательно.
@sergei_sergeevu4 Жыл бұрын
Спасибо, за хорошее объяснение важной темы)
@ayub_begimkulov Жыл бұрын
Рад, что понравилось!
@dimasheiko Жыл бұрын
Большое спасибо за видео! Очень качественный контент и хорошая подача. Напоминаешь мне Тимура Ulbi. :)
@ayub_begimkulov Жыл бұрын
Рад, что понравилось!
@user-vm2db5cq1g Жыл бұрын
Очень интересный контент и подача! Спасибо!
@ayub_begimkulov Жыл бұрын
не за что!
@vadymkononenko685 Жыл бұрын
Лайк не глядя!! Продолжай больше ТСа! #Typescript #react #javascript #ts #js #it
@ayub_begimkulov Жыл бұрын
Спасибо за поддержку!
@vasiapypochkin3241 6 ай бұрын
Spasibo za video!
@_oxios_ Жыл бұрын
Спасибо большое за урок. Мега полезный контент, подача стала огонь
@ayub_begimkulov Жыл бұрын
Спасибо!
@Pitbull20121000 Жыл бұрын
Очень полезно. Ждем следующий урок!
@ayub_begimkulov Жыл бұрын
Спасибо, должен скоро выйти!
@DmitryKorovin-rr9hl Жыл бұрын
Супер, спасибо большое за видео!
@ayub_begimkulov Жыл бұрын
Рад помочь!
@kirillpodolinniy309 Жыл бұрын
Аюб, большое спасибо! Смотрю с удовольствием)
@ayub_begimkulov Жыл бұрын
Рад помочь!
@lovikuanyshev Жыл бұрын
Отличное видео, спасибо Аюб!
@ayub_begimkulov Жыл бұрын
Рад, что понравилось!
@rustamakhmetyanov4404 Жыл бұрын
Спасибо Аюб, как всегда крутое видео, продолжай 👍
@ayub_begimkulov Жыл бұрын
Спасибо!
@evgenstepanov6319 Жыл бұрын
Крутой урок, жду следующего!)
@ayub_begimkulov Жыл бұрын
Спасибо!
@user-kr2wu9gi1r Жыл бұрын
Все круто. Однозначно ждем больше TS.
@ayub_begimkulov Жыл бұрын
Спасибо!
@user-vf2xh7mn9e Жыл бұрын
Очень хороший урок, больше спасибо )
@ayub_begimkulov Жыл бұрын
Рад, что было полезно!
@user-qp5cf3wi8b 11 ай бұрын
Спасибо большое! Написал свой первый кастомный type guard!)
@ayub_begimkulov 11 ай бұрын
Поздравляю!
@denispepper2830 Жыл бұрын
Спасибо, видео оч.полезное!
@ayub_begimkulov Жыл бұрын
Рад, что понравилось.
@huzimuzi4885 Жыл бұрын
Крутой ролик !
@ayub_begimkulov Жыл бұрын
Спасибо!
@raff_m_d6971 Жыл бұрын
отличное видео
@ayub_begimkulov Жыл бұрын
Спасибо!
@tilekmoldaliev7803 Жыл бұрын
главный фаворитов у кого нужно учиться TS по моему мнению !!! я не новичок в TS, то что показывает юзкейсы на TS пока не видел у других ютюб учителей
@ayub_begimkulov Жыл бұрын
Спасибо большое!
@vladimirivanov4756 Жыл бұрын
Видел твое интервью годичной давности, тайпскрипт ты подтянул, молодец
@ayub_begimkulov Жыл бұрын
Если интервью на моем канале - то я был собеседующим) А так, спасибо за фидбэк!
@shooterok238236 Жыл бұрын
Больше тса!
@ayub_begimkulov Жыл бұрын
Обязательно.
@jamjam3337 Жыл бұрын
👍👏
@user-gh3jr7qr3t Жыл бұрын
Супер, больше TS пожалуйста. За такой контент грех не поддержать) Мб оставишь реквизиты в телеге? Думаю, многие бы хотели поддержать и больше мотивировать на крутой контент
@ayub_begimkulov Жыл бұрын
Рад, что понравилось. Я на самом деле не сторонник деньги так собирать, но могу подумать. А так если хочешь поддержать - я думаю коучинг/консультации/менторинг запускать, так как просят часто. Можно таким образом поддержать ну и себе пользу получить)
@user-vm2db5cq1g Жыл бұрын
контент по тайпскрипту у тебя не имеет равных помоему на руЮтубе)
@ayub_begimkulov Жыл бұрын
Спасибо большое!
@Mr.Bellamy Жыл бұрын
Годный контент. Хочется в одном из следующих видосов разбор conditional types, особенно мне интересна проверка типов на идентичность. Почему чтобы точно гарантировать идентичность типов включая readonly нужно городить огород типа (() => T extends typeA ? 1 : 2) extends () => T extends typeB ? 1 : 2 ? true : false Мне кажется это очень некрасивым костылем) Или может я чего не знаю и в новых версиях есть более лаконичный способ на идентичность типов? Вроде [typeA] extends [typeB] ? [typeB] extends [typeA] ? true : false : false уже лучше читается и понимается, работает со всем, только не учитываает readonly если оно принципиально
@ayub_begimkulov Жыл бұрын
На самом деле второй пример еще кейсы с any не учтет, это тоже пробелма. А так да, надо будет разобрать. Спасибо за фидбэк!
@mercury_2379 Жыл бұрын
комментарий в поддержку канала
@ayub_begimkulov Жыл бұрын
Спасибо!
@user-hp2cg6px8c Жыл бұрын
8:35 if (value) отсекает не только null и undefined, а еще boolean, string, number
@ayub_begimkulov Жыл бұрын
На уровне типизации уберутся только null и undefined. Ну и boolean превратится в true. А string и number так и останутся.
@user-hp2cg6px8c Жыл бұрын
@@ayub_begimkulov не согласен, вот я тестирую сейчас: тип у переменной даже в видео показывает {} Если добавить типизацию результата функции, то TS нормально отреагирует только на возврат объекта, значит отсекаются все типы, у которых возможно falsy значение: string, number (и BigInt), null, undefined, boolean. Для меня только непонятно, почему Symbol тоже попадает под гильотину гарда, но я про него почти ничего и не знаю
@user-hp2cg6px8c Жыл бұрын
function foo(value: unknown): object { if (value) { return value } return {} }
@Bugagych Жыл бұрын
Хороший урок. Нравится манера изложения материала. Все доходчиво. Если будешь записывать какой нибудь проект, обрати внимание на стек React/TS/mobX (MST)/React query/Storybook/Tests - не могу найти все в одном месте, а очень надо.
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк! По стеку - все норм, правда думаю оверкилл иметь mobx и react query в одном проекте. Но это все по ситуации.
@Bugagych Жыл бұрын
@@ayub_begimkulov Если это так, то вот и хотелось бы пояснения почему. То есть рассмотреть какой то простенький проект с применением этих технологий и пояснить, что лучше еще использовать, а что не использовать.
@promoabys Жыл бұрын
React query не в полной менее, но частично дублирует логику связанную с работой стейт менеджеров. У RQ на сайте есть таблица сравнения с другими популярными инструментами. В остальном всё нормально, на мой взгляд, но использование mobx зависит от проекта и команды
@romanryaboshtan9270 8 ай бұрын
Hi, сто думаешь насчёт zustand и effector??
@knowledgedose1956 5 ай бұрын
я думаю zod и аналоги решают же похожую проблему, но в рантайме, так вот, было бы интересно узнать мнение, что лучше использовать, условный zod(имхо меньше кода) или тайп гарды и тайп ассершены?
@user-cm9ff1ej9c Жыл бұрын
Привет! Благодарю за видео! а что за магия с "^?" ? ))) это какой-то плагин?
@ayub_begimkulov Жыл бұрын
Да, vscode-twoslash-queries
@aipronator Жыл бұрын
@@ayub_begimkulov разве в этом есть какая то фишка по сравнению с тултипом от vscode при ховере по переменной?
@egorburunkov3842 Жыл бұрын
у тебя на 9:14 идет две проверки на null и undefined. Можно вместо `value !== undefined & value !== null` написать `value != null` и получить тот же результат
@ayub_begimkulov Жыл бұрын
Да, можно. Но кажется это будет более непонятный код.
@freetimeproject7 6 күн бұрын
6:08 вы представляете какой удар по производительности ф-ии такое число ретурнов? ретурн должен быть один чтоб при оптимизациях в хост среде можно было заинлайнить всю ф-ию. а это создаст дополнительный екзекюшн контекст
@georgegrinding1793 Жыл бұрын
Не нашел я в документации TS-а ключевое слово asserts. По теме type assertion там используется или дженерик или ключевое слово as. Можешь пояснить?
@ayub_begimkulov Жыл бұрын
ключевое слово `asserts`, на доку вот ссылка - www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions
@user-vm2db5cq1g Жыл бұрын
Аюб привет, а можешь пожалуйста вкратце сказать в чем разница в использовании типов object и Object? нашел инфу но не понял до конца что за тип такой Object с большой буквы который
@user-vm2db5cq1g Жыл бұрын
все нашел в видео у тебя на канале) спасибо)
@ayub_begimkulov Жыл бұрын
Ага)
@kirillpodolinniy309 Жыл бұрын
Аюб, у меня впрос Type Assertions: ты говоришь про кейворд asserts, но чаще встречается someValue или someValue as string. Это все одно и тоже или есть коренные отличия?
@ayub_begimkulov Жыл бұрын
Нет, `as` или `` говорит компилятору о том, что мы сами знаем лучше о том, какой тип у значения. А asserts-фукнция будет выбрасывать ошибку, если тип не соответствуем нашим ожиданиям.
@PowWowVideo Жыл бұрын
Спасибо, а про 'infer' долго ждать :)?
@ayub_begimkulov Жыл бұрын
Зависит от того, что по твоему мнению «долго» ). Я думаю через где-то 2 недели примерно будет, но может и раньше.
@PowWowVideo Жыл бұрын
@@ayub_begimkulov Спасибо. Ждём с нетерпением :)
@nade3282 Жыл бұрын
ts с in оператором работает криво. ты в примере пишешь "key" но если использовать не конкретную строку, а переменную, и попытаться использовать ее в качестве ключа для объект будет выдаваться ошибка
@Tvoyamama2009 Жыл бұрын
Сладкий
@PoT0P Жыл бұрын
Не могли бы сделать видео на тему монорепо. Второй день не могу настроить, стек react, nestjs. Хотелось бы папку workspace с 1. react, 2.nestjs, 3.shared-types (types, interface, enums для бека и фронта), 4, shared-components (компоненты для реакта). Если не по теме канала, можно наверно сделать тоже самое но без бекенда. Заранее спасибо.
@CJIu3eHb Жыл бұрын
Из того, с чем сталкивался. Важно определиться, хочешь ли ты оптимизировать хранение зависимостей (типа хранить общие зависимости в корне, остальное по workspace) или просто нужна возможность подключать "локальные библиотеки" типа shared. С первым можно хлебнуть по полной на тех же простых yarn workspaces. Хотя может я готовить их не умел. Если nest с react и ангуляром еще кое-как упихал с помощью занесения в "nohoist" кучи вспомогательных вещей (eslint, webpack, babel etc), то vue уже в это общежитие не вписался, что-то обязательно где-то ломалось. Но если не париться насчет оптимизации, а просто все занести в "nohoist" - то вполне прошло бы. Также есть такая вещь, как Nx. Вариант попроще - "Package-Based Repos" (похож на простые workspaces с полным разделением зависимостей, но добалены какие-то фишки по управлению этим хозяйством), и вариант посложнее - "Integrated Repos". Я выбрал ради интереса второй, причем в конфигураторе при установке в качестве сборщика выбрал Vite (он был на первой строчке, но по умолчанию почему-то предлагался webpack на второй, и я решил исправить несправедливость). Но видимо, Vite на первой строчке не был выбран по умолчанию неспроста, и пришлось на каком-то этапе переделать монорепо на webpack (были какие-то проблемы с переменными окружения). Ситуация может поменяться, естественно.
@ayub_begimkulov Жыл бұрын
На самом деле опыт не большой у меня, я работал только с yarn workspaces. Мне их хватило вполне, хотя вот тут человек говорит, что были проблемы у него. Сейчас тулинг вокруг этого сильно улучшился (turborepo, nx и тд.), можно и другие варианты попробовать. В общем, я бы рекомендовал начать с workspaces, если просто шарить нужно типы. Касательно сетапа глянул бы в популярных либах как сделано (точно знаю, что mobx, react, vue юзают). По уроку, я запишу себе, да и так было в планах настроить для одного проекта, но вряд ли прямо в ближайшее время выйдет ролик.
@whiteguards43 Жыл бұрын
Посмотрел и ничего не полня, почему тайпоф в тс называется тайпгуардом?
@ayub_begimkulov Жыл бұрын
typeof является тайпгардом, а не называется так. Тайпгард - проверка, которая дает гарантию компилятору, что значения является определенного типа.
@dmytroz.2084 Жыл бұрын
пишу что-то...
@ayub_begimkulov Жыл бұрын
Спасибо!
@user-vu6hn4ul2i Жыл бұрын
Ты делаешь всё не правильно. Нужно писать не что-то, а что-то для продвижения канала.
@danber1893 Жыл бұрын
Привет, урок хороший, полезный, но скучный. Лично я на 10 минутах уже заскучал и выключил ролик. Лично мне, приятно смотреть ролики до 10 минут, где все чётко и по факту без лишнего, тут ты очень много времени рассказываешь просыте вещи например как работает if и что вернется в итоге и т.д, я думаю человек посмотрит код, и сразу поймет что делает if и как будет выполнен код, твоя задача рассказать сам кейс когда это применять и показать, а остальное это уже другие темы, но это мое мнение кому-томожет нравитсч подобного рода ролики. Спасибо за труд
@ayub_begimkulov Жыл бұрын
Привет. Да, доносить инфу в короткий срок - пока не мой стихия, но буду работать. Спасибо за фидбэк!
@user-id4bw3tf5g Жыл бұрын
tipescript итак все ошибки подсвечивает нахрена столько городить?
@ayub_begimkulov Жыл бұрын
К сложению нет, TS подсвечивает далеко не все ошибки. А иногда считают за ошибку то - что не является таковой. Type guards как раз могут с этим помочь компилятору.
@xice111 Жыл бұрын
удали редактор кода и иди работать на завод
@ayub_begimkulov Жыл бұрын
Удали ютуб и иди смотреть телевизор.
@rasfront Жыл бұрын
16:55 здесь можно просто не писать if else а сразу же вернуть результат проверки который находится внутри if😊
@ayub_begimkulov Жыл бұрын
)))
Kirill Multitool
Рет қаралды 64 МЛН
超人夫妇
Рет қаралды 38 МЛН
Ayub Begimkulov
Рет қаралды 9 М.