wise.js 
wise.js 
  • 29
  • 989 522
Utility Types в TypeScript с нуля. Все Утилиты на Практике.
Для расширения и модификации типов в TypeScript существует огромный набор встроенных утилитных типов, так называемых Utility Types. Эти утилиты доступны для использования во всех модулях и позволяют масштабировать существующие типы без повторения кода.
Таймкоды:
00:00 - Вступление
00:14 - Readonly
01:24 - Partial
02:45 - Required
03:56 - Pick
04:55 - Omit
05:42 - Record
07:18 - Exclude
08:25 - Extract
09:20 - NonNullable
10:28 - ReturnType
11:43 - Parameters
12:31 - Awaited
13:18 - Манипуляции со строками
Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка!
🎬 Видео keyof typeof - ua-cam.com/video/cVSo2lxfw54/v-deo.html
👉 Исходный код, чат, воркшопы и поддержка канала: www.patreon.com/wisejs
✔️ Если хочешь изучать программирование со мной, не забудь подписаться :)
ua-cam.com/channels/Oxq.html...
✔️ Мой телеграм канал: t.me/joinchat/RVq-cmt6n1SJRS7Z
#typescript #utilitytypes #тайпскрипт #утилиты #wisejs
Переглядів: 20 659

Відео

Задачи На Собеседовании Junior / Middle Frontend Developer. Массивы в JavaScript.
Переглядів 62 тис.2 роки тому
Разбираем задачи которые часто спрашивают на собеседовании Junior и Middle Frontend Developer. В этом ролике решаем часто задаваемые задачи по массивам в JavaScript. Разбираем разные способы решения задач некоторые фишки в JavaScript. Напишите в комментариях какие еще вопросы вам задавали на Frontend собеседованиях и как вы с ними справились! Таймкоды: 00:00 - Сумма элементов массива. №1. 00:51...
Гайд по React + TypeScript. Основы и лучшие практики 2022. Функциональный стиль + Hooks.
Переглядів 39 тис.2 роки тому
Полный Гайд по использованию React (с его экосистемой) TypeScript в функциональном стиле. Типы рассмотренные в видео: ✅ ReactElement | JSX.Element ✅ ReactNode ✅ FC | FunctionComponent ✅ HTMLProps ✅ ReactEventHandler ✅ React.XXXEvent ✅ CSSProperties ✅ Hooks ✅ Много других полезных фишек в TypeScript Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка! 👉 Исходный код, чат...
Как Новый React Router 6 решает все проблемы?
Переглядів 18 тис.2 роки тому
Разбираемся в преимуществах новой версии React Router 6. Из глобальных изменений: 1. Решена проблема порядка роутов с Route Ranking 2. Switch Переименован в Routes 3. Новый API Route 4. Вложенная маршрутизация 5. Index Route вернули 6. Новый хук useRoutes вместо react-router-config 7. Уменьшение размера: c 20kb до 8kb Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка!...
Условные Типы TypeScript / Infer / Conditional Types
Переглядів 18 тис.2 роки тому
Условные Типы (Conditional Types) позволяют использовать тернарные операторы в работе с типами. Ключевое слово infer внутри условных выражений используется для распознавания типа. Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка! 👉 Поддержка канала: www.patreon.com/wisejs ✔️ Если хочешь изучать программирование со мной, не забудь подписаться :) ua-cam.com/channels/Ox...
Объектно Ориентированное (ООП) vs Функциональное Программирование (ФП) в реальном React приложении
Переглядів 10 тис.2 роки тому
Разрабатываем реальное приложение на React с использованием разных подходов: Объектно-Ориентированным (ООП) и Функциональным (ФП). 00:00 - Что будет в видео 01:29 - Объектно-Ориентированный код (ООП) 24:33 - Функциональный код (ФП) Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка! 👉 Поддержка канала и исходный код: www.patreon.com/wisejs ✔️ Если хочешь изучать програ...
Redux vs Mobx - сравнение на реальном React приложении
Переглядів 14 тис.2 роки тому
Сравниваем два самых популярных стейт менеджера для React приложений: Redux и Mobx на практических задачах. В этом видео я использую чистый Redux thunk и Mobx. Если хочешь видео о Redux-Toolkit Mobx-State-Tree дай об этом знать в комментариях. Таймкоды: 00:00 - Начало. 00:57 - Общий модуль для работы с сервером. 02:55 - Стейт менеджер Redux. Основные принципы. 04:41 - Создаем store и получаем д...
Что такое keyof typeof в TypeScript.
Переглядів 18 тис.2 роки тому
Разбираемся с операторами запроса ключей - keyof и запроса типа - typeof в TypeScript на реальных примерах. А так же, какую пользу можно извлечь из использования этих двух операторов вместе. В основе keyof лежат литеральные типы, с них мы и начнем. 00:00 - Литеральные типы как основа keyof 01:09 - Запрос ключей keyof 02:08 - keyof при работе с классами 02:55 - typeof в JavaScript и в TypeScript...
Утверждение типов в TypeScript. Type Assertion + as const.
Переглядів 11 тис.2 роки тому
Иногда вы, как программист, можете знать о типе переменной больше, чем TypeScript может определить. Как раз для таких ситуаций и нужно использовать утверждение типов. Утверждения типа аналогичны приведению типов в других языках программирования Однако, утверждения типа в TypeScript просто позволяют компилятору знать тип переменной. Термин type casting не применим к тайпскрипт так, как система т...
Дженерики в TypeScript с нуля: Generic, Extends, Дефолтные Параметры + Примеры Использования.
Переглядів 57 тис.2 роки тому
Разбираем с одной из сложнейших тем в TypeScript - дженериками. Generic - это мощный инструмент, позволяющий описывать типа, способные работать с различными типами и структурами данных. Таймкоды: 00:00 - Зачем нужны generic типы. 01:47 - Что такое generic в TypeScript. Синтаксис дженерик типов. 02:45 - Как работают generic типы. 05:38 - Создаем простой generic для загрузки данных по API. 07:18 ...
Разница между Интерфейсом и Типом в Тайпскрипт 2021. TypeScript Interface vs Type.
Переглядів 63 тис.2 роки тому
Интерфейс и тип очень похожи между собой. С развитием Тайпскрипта разница между ними почти стерлась. И Интерфейс и Тип могут использоваться взаимозаменяемо почти во всех случаях. В этом видео мы разбираем основные отличия Interface и Type в TypeScript на практических примерах, а так же разберем некоторые моменты, которые уже не актуальны в новых версиях, а так же когда что использовать. Приятно...
10 ошибок начинающих Frontend программистов. Условные операторы if ... else.
Переглядів 8 тис.2 роки тому
Рассмотрим 10 ошибок начинающих Frontend / JavaScript программистов, которые чаще всего допускают при работе с условными операторами: if ... else, switch, тренарный оператор, возврат булевого значения и другие. Таймкоды: 0:00 - Какие ошибки рассмотрим 00:11 - Прямое сравнение с true / false 01:19 - Явный возврат true / false 02:37 - Обучение с Wise.js Online 03:04 - Лишние проверки и переменные...
Блог с CMS на NextJS, React, Contentful и typescript. Блог с использованием SSR.
Переглядів 14 тис.2 роки тому
Создаем блог с CMS на React, NextJS и typescript. Блог с контентом в Contentful CSM и SSR/SSG отрисовку на стороне приложения. Разбираемся в основах Nextjs: routing, getStaticProps, getServerSideProps. Настраиваем Contentful Headless CMS. Используем typescript и генерацию типов исходя из контента. Таймкоды: 00:00 - Вступление. Обзор работы приложения. 02:13 - Создаем Nextjs приложение. 05:16 - ...
Собеседование JUNIOR FRONTEND ANGULAR разработчика. Александр 53 года.
Переглядів 24 тис.2 роки тому
Собеседование JUNIOR FRONTEND ANGULAR разработчика. Александр 53 года.
Реальное Приложение с Пагинацией и Поиском на React + REST API. Урок 3. Redux-Saga React Полный Курс
Переглядів 10 тис.2 роки тому
Реальное Приложение с Пагинацией и Поиском на React REST API. Урок 3. Redux-Saga React Полный Курс
Redux-Saga React Полный Курс. Урок 2. Эффекты в деталях. Архитектура саг. React Router + Redux Saga.
Переглядів 17 тис.2 роки тому
Redux-Saga React Полный Курс. Урок 2. Эффекты в деталях. Архитектура саг. React Router Redux Saga.
Redux-Saga React Полный Курс. Урок 1. Саги, Эффекты, Генераторы.
Переглядів 49 тис.3 роки тому
Redux-Saga React Полный Курс. Урок 1. Саги, Эффекты, Генераторы.
ВИДЕОЧАТ C НУЛЯ НА React & WebRTC + WebSockets. Аналог Zoom, Skype, Google Meet ЗА ЧАС 2021
Переглядів 42 тис.3 роки тому
ВИДЕОЧАТ C НУЛЯ НА React & WebRTC WebSockets. Аналог Zoom, Skype, Google Meet ЗА ЧАС 2021
REACT ПРИЛОЖЕНИЕ AGILE BOARD С MOBX/MOBX-STATE-TREE | Hooks, JSON Server, Material UI
Переглядів 14 тис.3 роки тому
REACT ПРИЛОЖЕНИЕ AGILE BOARD С MOBX/MOBX-STATE-TREE | Hooks, JSON Server, Material UI
ПОСЛЕДОВАТЕЛЬНЫЕ ВЫЗОВЫ API НА JavaScript. async/await | fetch | XmlHttpRequest | Promise
Переглядів 4 тис.3 роки тому
ПОСЛЕДОВАТЕЛЬНЫЕ ВЫЗОВЫ API НА JavaScript. async/await | fetch | XmlHttpRequest | Promise
РЕАЛЬНОЕ WEB ПРИЛОЖЕНИЕ С НУЛЯ: react, hooks, redux, redux-saga, material-ui.
Переглядів 20 тис.3 роки тому
РЕАЛЬНОЕ WEB ПРИЛОЖЕНИЕ С НУЛЯ: react, hooks, redux, redux-saga, material-ui.
ЯЗЫК РАЗМЕТКИ HTML ЗА 40 МИНУТ ДЛЯ НАЧИНАЮЩИХ. ВСЕ ТЕГИ ВКЛЮЧЕНЫ.
Переглядів 62 тис.3 роки тому
ЯЗЫК РАЗМЕТКИ HTML ЗА 40 МИНУТ ДЛЯ НАЧИНАЮЩИХ. ВСЕ ТЕГИ ВКЛЮЧЕНЫ.
СВЯЗЫВАЕМ HTML Form C JavaScript. ВСЕ СПОСОБЫ ПОЛУЧЕНИЯ ДАННЫХ. FormData.
Переглядів 23 тис.3 роки тому
СВЯЗЫВАЕМ HTML Form C JavaScript. ВСЕ СПОСОБЫ ПОЛУЧЕНИЯ ДАННЫХ. FormData.

КОМЕНТАРІ

  • @DreamingDolphing
    @DreamingDolphing 4 дні тому

    Смотрящим через 2 года: нет, настолько простые задачи вас на собеседовании решать не попросят.

  • @webdeveloper5770
    @webdeveloper5770 4 дні тому

    Кратко и понятно. Для тех кто знал да забыл.

  • @user-ps6hu8qs8z
    @user-ps6hu8qs8z 5 днів тому

    perfect

  • @N5O1
    @N5O1 6 днів тому

    0:25 для этих целей так же можно использовать и class и typeof любього объекта (но это считай будет type, только без присвоенного типа)

  • @N5O1
    @N5O1 6 днів тому

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

  • @user-ud7qu1lv8x
    @user-ud7qu1lv8x 8 днів тому

    30:50 как так быстро закоментировать ? p.s досмотрел весь ролик, все четко,понятно, без воды. Хз почему так мало лайков за такой контент

  • @IgorBobyrev
    @IgorBobyrev 14 днів тому

    Мне 51. Хочу пойти по стопам Александра :) Ява-пкрипт на минимальном уровне изучил, но пока сложно именно писать код - обычно просто копирую чужой (забываю правила написания функций, забываю методы и тд). Поэтому не знаю, получится ли выйти к React и Angular

  • @IgorBobyrev
    @IgorBobyrev 14 днів тому

    Спасибо большое за такой подробный рассказ! Было бы хорошо сделать логическое продолжение этой темы: отправка по php со связкой через json - мне непонятно, неужели без этого json нельзя обойтись при связывании с php?

  • @zergzerg4844
    @zergzerg4844 20 днів тому

    Как хук afterCreate() { self.load(); } может вызвать load если его нет в объекте? Он даже тебе подсвечивает, в typescript вобще ругается нет такого метода в объекте

  • @_DiMoN__-js9mu
    @_DiMoN__-js9mu 26 днів тому

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

  • @phat80
    @phat80 Місяць тому

    Такой легкотни на собеседовании быть просто не может. Это даже не уровень джуна. Да, задачи тоже на массивы могут быть, но они будут куда сложнее и не такими очевидными, да еще и с особыми требованиями, типа сделать то-то, не используя что-то (например, какие-то стандартные методы) или не используя дополнительную память, либо показать алгоритм с заданной сложностью. В общем, такие задачи могут быть лишь на собеседовании в какой-то сказочной компании. А таковых давно не существует.

  • @user-jf3uf2ur4e
    @user-jf3uf2ur4e Місяць тому

    eval это прикол конечно, думаю лучше так не делать на собеседовании 😅

  • @Leonidn1972
    @Leonidn1972 Місяць тому

    ua-cam.com/video/IHQcma93fpE/v-deo.html

  • @kihawi1627
    @kihawi1627 Місяць тому

    как я могу получить https сертификат и использовать его?

  • @elenap.7341
    @elenap.7341 Місяць тому

    почему работает только на Локал хосте? может это я дурак...

  • @VeynShot
    @VeynShot Місяць тому

    Спасибо за видео, полезно, побольше бы таких по Angular. Удобные таймкоды!

  • @Luke-vd8es
    @Luke-vd8es Місяць тому

    Спасибо, за этот ролик!! Все максимально понятно и наглядно! После просмотра наконец-то понял как это работает WebRTC и смог реализовать видеозвонки в своем курсовом проекте.

  • @mishaban3469
    @mishaban3469 2 місяці тому

    спс большое

  • @user-pq1nv8cz7h
    @user-pq1nv8cz7h 2 місяці тому

    А нельзя это в одной функции писать? Зачем в вложенные делать

  • @user-vm2db5cq1g
    @user-vm2db5cq1g 2 місяці тому

    Это крутой контент! Спасибо!! Очень подробно и понятно!! Ещё раз спасибо, продолжай в том же духе))

  • @user-xn2cr5oe4p
    @user-xn2cr5oe4p 2 місяці тому

    Зашёл увидел старющий как мир цикл и сразу закрыл видео 🤮

  • @user-fq4pc7fm2z
    @user-fq4pc7fm2z 2 місяці тому

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

  • @pherum
    @pherum 2 місяці тому

    теперь понял. спасибо

  • @easycrazy709
    @easycrazy709 2 місяці тому

    Очень кратко быстро но достаточно много показал. Хорошее видео.

  • @user-lq3dh7rb9v
    @user-lq3dh7rb9v 2 місяці тому

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

  • @19Sanji
    @19Sanji 2 місяці тому

    🫡

  • @getshou
    @getshou 2 місяці тому

    а почему, если не использовать деструктуризацию в выражении array.map(array.pop, array), вернет [6,6,5,4,,,] ?

  • @user-yr5cp3pd1c
    @user-yr5cp3pd1c 2 місяці тому

    Спасибо, ибо это действительно сложно, мало где понятно и коротко объяснено, "спрашиваемо" на собесах, видано в кучках популярных либ, но не особо "используемо"))))))))) 👍👍👍👍👍👍👍👍👍👍👍👍👍👍

  • @voronko100
    @voronko100 2 місяці тому

    Полезно, спасибо

  • @admenmod
    @admenmod 2 місяці тому

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

  • @frostichekk
    @frostichekk 3 місяці тому

    Даже в 2024 году этот гайд еще актуален, спасибо огромное! Но у меня проблема, устройства которые не имеют камеры/микрофона не могут видеть других участников. Как сделать чтобы даже если у пользователя отсутствует камера/микрофон он все равно видел других участников?

  • @user-wv9ds4ft6d
    @user-wv9ds4ft6d 3 місяці тому

    Что-то я смотрю одной мне непонятна разница между Omit и Exclude. несколько раз пересмотрела и совершенно не увидела разницы. Что тот что тот исключает ключи из первого объекта и только те, которые переданы во втором

  • @fazzzy3160
    @fazzzy3160 3 місяці тому

    Респект за сохраненное время!

  • @oleksandrdemchenko482
    @oleksandrdemchenko482 3 місяці тому

    Яб тому хто це все придумав башню відбив би)))) Ми получаем Дани ми достаєм Дани які нам нафіг не потрібні виявляється ці дані потрібні сeрваку! курва.. Це якась OSINTщина))))

  • @ArtemSopun
    @ArtemSopun 3 місяці тому

    просто вау! очень крутое видео!

  • @user-cb8nd7yk5u
    @user-cb8nd7yk5u 3 місяці тому

    всего 3 урока в серии Redux-Saga?

  • @user-zs4bs3yp3h
    @user-zs4bs3yp3h 3 місяці тому

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

  • @romanpit4you361
    @romanpit4you361 3 місяці тому

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

  • @user-mc5ly8nn6e
    @user-mc5ly8nn6e 3 місяці тому

    а зачем нужен тег header если шапку уже создали при помощи тегов head и title?

    • @user-be4jr9kr7z
      @user-be4jr9kr7z 3 місяці тому

      В <head> техническая информация для поисковых систем и браузеров. Она не отображается на странице. Только название страницы, заключенное в тег <tittle>, отобразиться в верхней вкладке браузера. А <header> - это шапка страницы. Может содержать название сайта, логотип, лозунг, навигационные ссылки и т.д. Содержимое данного тега видно пользователю.

  • @MrStereolight
    @MrStereolight 3 місяці тому

    офигительная лекция. Просто супер. Процветания тебе, Автор!

  • @yabadababy3204
    @yabadababy3204 3 місяці тому

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

  • @user-mv4xj3je3r
    @user-mv4xj3je3r 3 місяці тому

    Благодарю Вас! Все так структурированно, понятно, голос очень приятный! Большая благодарность за всю информацию!💗💗💗

  • @ko22012
    @ko22012 3 місяці тому

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

  • @zergzerg4844
    @zergzerg4844 4 місяці тому

    Пардон, но я что-то не догнал вашего утверждения о том что длинна кортежа не меняется,. Почему тогда основываясь на вашем примере могу пушить данные в переменную с типом State и длинна массива меняется?

  • @zergzerg4844
    @zergzerg4844 4 місяці тому

    Можете объяснить , что это за запись такая "declare function" ? Гугл совпадений не нашел. Это по типу интерфейсов , задаешь сигнатуру функции и должен ее реализовать и возвратить объект с булевым значением? .А то компиллер не ругается на запись, а в браузере пишет что validate is not defined

  • @zergzerg4844
    @zergzerg4844 4 місяці тому

    9:32 - Скорее лучше ответить , что сигнатуры "a" (точнее из чего он создан) это класс String и этот класс разрешает обращать к его значениям по индексу но не менять их. Если подключить typescript он так и напишет , что запрещено изменять индекс в строке

  • @user-xw8ur4sc6t
    @user-xw8ur4sc6t 4 місяці тому

    крутатошка!!!!

  • @user-gx9gq6fl7q
    @user-gx9gq6fl7q 4 місяці тому

    Парень, гигантское тебе спасибище, ты просто лучший! Дай Бог тебе здоровья и процветания твоему каналу 🙂

  • @risselify
    @risselify 4 місяці тому

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

  • @grigoriymartynov8010
    @grigoriymartynov8010 4 місяці тому

    написано правильно, а сказал чуток не так: Readonly - делает поля объекта доступными только для чтения, а не обязательными а так большое спасибо за видео и примеры, все очень доступно и понятно!)