3 вещи для написания сложной TypeScript типизации

Рет қаралды 6,090

Күн бұрын

В данном видео мы рассмотрим 3 вещи, которые вам нужно знать для написания сложной типизации в TypeScript - conditional types, mapped types, infer. Погорим, для чего нужна каждая из них, как работает, и где и как ее можно использовать.
Видео про unknown, never, void и другие непонятные типы:
• Как использовать unkno...
Telegram канал:
telegram.me/ayub_begimkulov_c...
Код из слайдов:
github.com/Ayub-Begimkulov/yo...
Таймкоды:
00:00-00:23 - Интро
00:23-00:56 - Что за 3 вещи?
00:56-01:50 - Conditional types
01:50-04:58 - Type Distribution
04:58-07:18 - Как избежать Type Distribution
07:18-09:00 - Mapped types
09:00-10:28 - Как добавить/удалить optional?
10:28-10:52 - Как добавить/удалить readonly?
10:52-11:33 - Mapped types + Type Distribution
11:33-13:59 - Mapped types + union
13:59-15:15 - Infer
15:15-17:02 - infer + extends
17:02-21:11 - Примеры использования infer
21:11-23:05 - DeepReadonly
23:05-27:25 - IsTuple
27:25-30:00 - Replace
30:00-30:25 - Заключение

Пікірлер: 62

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

афигеть за первые 5 минут видоса увидел столько откровений именно такой видос обьясняющий неочевидные механики я ждал возможно аюб не прочитает мой коммент под прошлым видосом поэтому продублирую здесь: "вместо того чтобы создавать функцию typedMemo, можно через ключевое слово declare перетипизировать memo из React"

@ayub_begimkulov Жыл бұрын

А я по-моему под прошлым ответил уже) По поводу overwrite'а типизации - я просто не люблю так делать, но способ тоже рабочий.

@darkside2436 Жыл бұрын

Хороший контент. Идеально подходит для тех кто хочет быстро изучить Typescript или повторить забытые вещи. Продолжай в том же духе. Желаю удачи.

@ayub_begimkulov Жыл бұрын

Спасибо!

@olegdegterov1595 Жыл бұрын

Спасибо, с каждым видео становится понятнее.

@ayub_begimkulov Жыл бұрын

Круто, что есть прогресс!

@WebEnv Жыл бұрын

как всегда отлично, продолжай!

@ayub_begimkulov Жыл бұрын

Спасибо!

@romanryaboshtan9270 9 ай бұрын

мощнейшее видео, лучший контент по TS на просторах рунета

@sergei_sergeevu4 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

не за что)

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

Спасибо! как всегда круто

@ayub_begimkulov Жыл бұрын

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

@rustamakhmetyanov4404 Жыл бұрын

Как всегда по красоте раскидал, спасибо.

@ayub_begimkulov Жыл бұрын

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

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

Прикольное видео про задачки, спасибо!)) а можно еще?)

@ayub_begimkulov Жыл бұрын

Спасибо за фидбэк! Да, можно попробовать еще сделать.

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

Давай, вперёд во благо!

@ayub_begimkulov Жыл бұрын

Спасибо!

@raff_m_d6971 Жыл бұрын

Спасибо(Очень:нужное):видео

@ayub_begimkulov Жыл бұрын

let рад: что = "понравилось";

@mercury_2379 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Спасибо!

@jamjam3337 Жыл бұрын

👏👍

@ayub_begimkulov Жыл бұрын

Спасибо!

@HEX_CAT 11 ай бұрын

❤🎉

@ilyagamepub Жыл бұрын

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

@gabblz480 Жыл бұрын

Вот да, прикольно узнавать, что так можно писать, но зачем это нужно? Когда это нужно? Хотелось бы увидеть примеры использования, потому что обычно такой необходимости нет

@ayub_begimkulov Жыл бұрын

Ну если есть вопрос зачем - то тогда они и не нужны. Однако примеров много, зачастую они связаны с чем-то нестандартным - Маппинг токенов для темы, библиотеки, и тд.

@xxcrypt234 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

не за что!

@rahimkhatsiev2851 Жыл бұрын

Goood!

@ayub_begimkulov Жыл бұрын

Thanks!

@alexandersmirnov3161 Жыл бұрын

Продвигаем

@ayub_begimkulov Жыл бұрын

Спасибо!

@evgeniymarkitan862 Жыл бұрын

Лучший контент по TS на русском языке❤‍🔥❤‍🔥❤‍🔥

@mikeempire Жыл бұрын

Соглашусь!

@ayub_begimkulov Жыл бұрын

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

@romanryaboshtan9270 9 ай бұрын

да, 100%

@just__did__it Жыл бұрын

го видос по диклорациям в ts. Важная тема

@ayub_begimkulov Жыл бұрын

У меня есть в списке, правда кажется, что людям поднадоел чуть плейлист этот. Постараюсь выпустить в ближайшее время.

@user-ut8bs1ku5e 4 ай бұрын

Спасибо за видос, всё более менее понятно (не совсем только понял этот синтаксис {...}[keyof T] в теме mappedType -> union. По ходу надо просто запомнить эту конструкцию, логически я ее хоть убей не понимаю, как она строится и почему после объекта идут квадратные скобки с keyof T). Еще, подскажите, как сделать union не массивов, а объектов, причем чтобы в качестве ключей объектов в union нужно использовать существующие ключи в изначальном mappedType. То есть, сделать из type o = { a: string, b: number, c: boolean } такой union { a: string } | { b: number } | { c: boolean } Попробовал так type res = { [K in keyof T]: { K: T[K] } }[keyof T] но он воспринимает K не как переменную, а как литеральный ключ. Заранее спасибо)

@vladan5100 Жыл бұрын

Центральный Typescript учебник!

@ayub_begimkulov Жыл бұрын

До учебника думаю тут далеко, больше курс по повышению квалификации)

@klubkov Жыл бұрын

Хорошее видео, но не хватает примеров из реальных задач со сложной типизацией

@ayub_begimkulov Жыл бұрын

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

@ANTONZUBAREV 8 ай бұрын

Как сделать чтобы // ^? работал

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

А почему если использовать в DeepReadonly тип Record, а не Record то он не пропускает кейс с функциями?

@ayub_begimkulov Жыл бұрын

Точный ответ я не знаю, но это деталь TS, если ты пишешь Record - то это любой непримитив. А если Record то у тебя должен быть index signature - то есть возможность писать/читать в любые ключи, что соответствует только объекту.

@CJIu3eHb Жыл бұрын

Интересно было бы узнать, почему так забавно в "ffoooobarbar" расколбасило в граничном кейсе на 29:24.

@fayster91 Жыл бұрын

Да все просто: Так как у нас From пустая строка и подстроку найти не удалось, то идем с самого начала. Start не может быть пустой, при условии, что исходная строка не пустая, то запись `${infer Start}{From}${infer End}` можно интерпретировать как 'f' + '' + 'oobarbar'. И дальше уже все понятно. А вот если бы была запись вида `{From}${infer End}`, то тогда бы foo встала в самое начало и было бы foofoobarbar

@CJIu3eHb Жыл бұрын

@@fayster91 Спасибо, понятно. Правда основано на утверждении, "Start не может быть пустой" - это самый неоднозначный момент, который, походу, можем вывести только эмпирически, если не лезть в исходники TS. Хотя может и в доках где написано, но сомнительно.

@ayub_begimkulov Жыл бұрын

Мне кажется тут есть какой-то странный механизм того, как TS матчит эти строки. Детально я прямо не скажу, почему так).

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

Здравствуйте, начал обращать внимание на типы в библиотеках и стал часто видеть такое interface IExamole1 { should: IFunctions; } И самое не понятно для меня это interface IFunctions { (arg1: “be.have”, type: string): any } И вызвав функцию с типом IFunctions можно параметры выбирать из arg1, а не просто передавать строку…Будьте добры, объясните как же это работает Пример из cypress взят)

@ayub_begimkulov Жыл бұрын

Если я тебя правильно понял, то весь смысл заключается в том, что в TS есть литеральные типы. То есть не просто строка, а конкртно "a" | "b" | "c". То есть, если ты передашь туда "asf" - то это будет не правильно. Так вот, когда ты юзаешь литеральные типы, то ТС тебе будет сам подсказывать возможные варианты.