Улучши свой TypeScript код с помощью Type Guards и Type Assertions

[@atlantatesla9348]

Я считала, что неплохо знаю typescript, но смотря твои видео уже сделала пару открытий для себя! Я не знала про function type assertion. А в видео про дженерики я узнала, что функцию type guard можно использовать для сужения key (function hasOwn) Благодарю!

[@ilyagamepub]

Парень, годно очень, помогаешь молодым джунам понимать тайпскрипт)

[@ayub_begimkulov]

Спасибо за фидбэк!

[@АнатолийГорбов-о1ь]

какое же полезное видео, периодически пересматриваю)))) СПасибо! реально по ТС. лучший контент на руЮтубе!

[@ayub_begimkulov]

Антон, спасибо больше за фидбэк!

[@tilekmoldaliev7803]

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

[@ayub_begimkulov]

Спасибо большое!

[@Илья-в6х5з]

Спасибо большое! Написал свой первый кастомный type guard!)

[@ayub_begimkulov]

Поздравляю!

[@dmytroz.2084]

Забыл сказать, что на считаные каналы на кого я подписан у меня стоит колокольчик, но Аюб один из них. Жду всегда его видео! Подача улучшается с каждым видео. Растешь, Аюб, отлично! Миксы объяснения с примерами кода от "легких" до "сложных" очень гармонично + мини лайв кодинг.

[@ayub_begimkulov]

Спасибо большое!

[@vladimirivanov4756]

Видел твое интервью годичной давности, тайпскрипт ты подтянул, молодец

[@ayub_begimkulov]

Если интервью на моем канале - то я был собеседующим) А так, спасибо за фидбэк!

[@tanercoder1915]

То что нужно, продвинутый TS контент

[@ayub_begimkulov]

Спасибо за фидбэк!

[@АнатолийГорбов-о1ь]

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

[@ayub_begimkulov]

не за что!

[@ЯрославПунтус-г5ц]

Все круто. Однозначно ждем больше TS.

[@ayub_begimkulov]

Спасибо!

[@lovikuanyshev]

Отличное видео, спасибо Аюб!

[@ayub_begimkulov]

Рад, что понравилось!

[@sergei_sergeevu4]

Спасибо, за хорошее объяснение важной темы)

[@ayub_begimkulov]

Рад, что понравилось!

[@_oxios_]

Спасибо большое за урок. Мега полезный контент, подача стала огонь

[@ayub_begimkulov]

Спасибо!

[@GitarisT12332]

Спасибо тебе Аюб, великолепно объясняешь, открывай патрион, или что-нибудь подобное, с радостью оформлю подписку на регулярные ролики такого плана.

[@ayub_begimkulov]

Спасибо! Если открою - дам знать обязательно.

[@dimasheiko]

Большое спасибо за видео! Очень качественный контент и хорошая подача. Напоминаешь мне Тимура Ulbi. :)

[@ayub_begimkulov]

Рад, что понравилось!

[@kirillpodolinniy309]

Аюб, большое спасибо! Смотрю с удовольствием)

[@ayub_begimkulov]

Рад помочь!

[@vasiapypochkin3241]

Spasibo za video!

[@vadymkononenko685]

Лайк не глядя!! Продолжай больше ТСа! #Typescript #react #javascript #ts #js #it

[@ayub_begimkulov]

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

[@rustamakhmetyanov4404]

Спасибо Аюб, как всегда крутое видео, продолжай 👍

[@ayub_begimkulov]

Спасибо!

[@evgenstepanov6319]

Крутой урок, жду следующего!)

[@ayub_begimkulov]

Спасибо!

[@Pitbull20121000]

Очень полезно. Ждем следующий урок!

[@ayub_begimkulov]

Спасибо, должен скоро выйти!

[@huzimuzi4885]

Крутой ролик !

[@ayub_begimkulov]

Спасибо!

[@denispepper2830]

Спасибо, видео оч.полезное!

[@ayub_begimkulov]

Рад, что понравилось.

[@raff_m_d6971]

отличное видео

[@ayub_begimkulov]

Спасибо!

[@АнатолийГорбов-о1ь]

контент по тайпскрипту у тебя не имеет равных помоему на руЮтубе)

[@ayub_begimkulov]

Спасибо большое!

[@DmitryKorovin-rr9hl]

Супер, спасибо большое за видео!

[@ayub_begimkulov]

Рад помочь!

[@mercury_2379]

комментарий в поддержку канала

[@ayub_begimkulov]

Спасибо!

[@ЗамирЮсупов-щ9к]

Привет! Благодарю за видео! а что за магия с "^?" ? ))) это какой-то плагин?

[@ayub_begimkulov]

Да, vscode-twoslash-queries

[@aipronator]

@@ayub_begimkulov разве в этом есть какая то фишка по сравнению с тултипом от vscode при ховере по переменной?

[@romanryaboshtan9270]

Hi, сто думаешь насчёт zustand и effector??

[@ВитяПанчев-к9ю]

Очень хороший урок, больше спасибо )

[@ayub_begimkulov]

Рад, что было полезно!

[@shooterok238236]

Больше тса!

[@ayub_begimkulov]

Обязательно.

[@jamjam3337]

👍👏

[@АлександрШальнев-щ8б]

Супер, больше TS пожалуйста. За такой контент грех не поддержать) Мб оставишь реквизиты в телеге? Думаю, многие бы хотели поддержать и больше мотивировать на крутой контент

[@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 не учтет, это тоже пробелма. А так да, надо будет разобрать. Спасибо за фидбэк!

[@knowledgedose1956]

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

[@Bugagych]

Хороший урок. Нравится манера изложения материала. Все доходчиво. Если будешь записывать какой нибудь проект, обрати внимание на стек React/TS/mobX (MST)/React query/Storybook/Tests - не могу найти все в одном месте, а очень надо.

[@ayub_begimkulov]

Спасибо за фидбэк! По стеку - все норм, правда думаю оверкилл иметь mobx и react query в одном проекте. Но это все по ситуации.

[@Bugagych]

@@ayub_begimkulov Если это так, то вот и хотелось бы пояснения почему. То есть рассмотреть какой то простенький проект с применением этих технологий и пояснить, что лучше еще использовать, а что не использовать.

[@promoabys]

React query не в полной менее, но частично дублирует логику связанную с работой стейт менеджеров. У RQ на сайте есть таблица сравнения с другими популярными инструментами. В остальном всё нормально, на мой взгляд, но использование mobx зависит от проекта и команды

[@dmitrydond7795]

Привет! подскажи, а что это за плагин или сеттинга? которая выводит тип, после // ^?

[@DenisB-d5f]

8:35 if (value) отсекает не только null и undefined, а еще boolean, string, number

[@ayub_begimkulov]

На уровне типизации уберутся только null и undefined. Ну и boolean превратится в true. А string и number так и останутся.

[@DenisB-d5f]

​@@ayub_begimkulov не согласен, вот я тестирую сейчас: тип у переменной даже в видео показывает {} Если добавить типизацию результата функции, то TS нормально отреагирует только на возврат объекта, значит отсекаются все типы, у которых возможно falsy значение: string, number (и BigInt), null, undefined, boolean. Для меня только непонятно, почему Symbol тоже попадает под гильотину гарда, но я про него почти ничего и не знаю

[@DenisB-d5f]

function foo(value: unknown): object { if (value) { return value } return {} }

[@АнатолийГорбов-о1ь]

Аюб привет, а можешь пожалуйста вкратце сказать в чем разница в использовании типов object и Object? нашел инфу но не понял до конца что за тип такой Object с большой буквы который

[@АнатолийГорбов-о1ь]

все нашел в видео у тебя на канале) спасибо)

[@ayub_begimkulov]

Ага)

[@georgegrinding1793]

Не нашел я в документации TS-а ключевое слово asserts. По теме type assertion там используется или дженерик или ключевое слово as. Можешь пояснить?

[@ayub_begimkulov]

ключевое слово `asserts`, на доку вот ссылка - www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions

[@kirillpodolinniy309]

Аюб, у меня впрос Type Assertions: ты говоришь про кейворд asserts, но чаще встречается someValue или someValue as string. Это все одно и тоже или есть коренные отличия?

[@ayub_begimkulov]

Нет, `as` или `` говорит компилятору о том, что мы сами знаем лучше о том, какой тип у значения. А asserts-фукнция будет выбрасывать ошибку, если тип не соответствуем нашим ожиданиям.

[@PowWowVideo]

Спасибо, а про 'infer' долго ждать :)?

[@ayub_begimkulov]

Зависит от того, что по твоему мнению «долго» ). Я думаю через где-то 2 недели примерно будет, но может и раньше.

[@PowWowVideo]

@@ayub_begimkulov Спасибо. Ждём с нетерпением :)

[@egorburunkov3842]

у тебя на 9:14 идет две проверки на null и undefined. Можно вместо `value !== undefined & value !== null` написать `value != null` и получить тот же результат

[@ayub_begimkulov]

Да, можно. Но кажется это будет более непонятный код.

[@freetimeproject7]

6:08 вы представляете какой удар по производительности ф-ии такое число ретурнов? ретурн должен быть один чтоб при оптимизациях в хост среде можно было заинлайнить всю ф-ию. а это создаст дополнительный екзекюшн контекст

[@Tvoyamama2009]

Сладкий

[@nade3282]

ts с in оператором работает криво. ты в примере пишешь "key" но если использовать не конкретную строку, а переменную, и попытаться использовать ее в качестве ключа для объект будет выдаваться ошибка

[@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]

Спасибо!

[@ИмяФамилия-э4ф7в]

Ты делаешь всё не правильно. Нужно писать не что-то, а что-то для продвижения канала.

[@danber1893]

Привет, урок хороший, полезный, но скучный. Лично я на 10 минутах уже заскучал и выключил ролик. Лично мне, приятно смотреть ролики до 10 минут, где все чётко и по факту без лишнего, тут ты очень много времени рассказываешь просыте вещи например как работает if и что вернется в итоге и т.д, я думаю человек посмотрит код, и сразу поймет что делает if и как будет выполнен код, твоя задача рассказать сам кейс когда это применять и показать, а остальное это уже другие темы, но это мое мнение кому-томожет нравитсч подобного рода ролики. Спасибо за труд

[@ayub_begimkulov]

Привет. Да, доносить инфу в короткий срок - пока не мой стихия, но буду работать. Спасибо за фидбэк!

[@АлександрПлуталов-ъ4ш]

tipescript итак все ошибки подсвечивает нахрена столько городить?

[@ayub_begimkulov]

К сложению нет, TS подсвечивает далеко не все ошибки. А иногда считают за ошибку то - что не является таковой. Type guards как раз могут с этим помочь компилятору.

[@xice111]

удали редактор кода и иди работать на завод

[@ayub_begimkulov]

Удали ютуб и иди смотреть телевизор.

[@rasfront]

16:55 здесь можно просто не писать if else а сразу же вернуть результат проверки который находится внутри if😊

[@ayub_begimkulov]

)))