TypeScript с 0 до Профи. Полный курс + Практика [2023]

  Рет қаралды 39,422

Reactify

Reactify

Күн бұрын

В этом курсе понятно разобраны все темы TypeScript на примере React приложения. Курс подойдет не только для новичков, он остается актуальным для всех уровней. Основы TypeScript, Базовые типы, Интерфейсы, Классы, Функции, Generics (Обобщения), Enums (Перечисления), Type assertions (Утверждения типов), Типы объединения и пересечения, Типы-литералы, Модули и пространства имен, Декораторы, Mixins, Advanced Types (Расширенные типы), Type Guards, Условные типы, Mapped Types (Сопоставленные типы), Type Aliases и другие.
Мой телеграмм канал с заметками, обзорами, мыслями и историями:
t.me/reactify_IT
Мой GitHub с первыми проектами:
github.com/MirgradR
0:00 - Введение. Для чего нужен.
1:15 - Как начать. Компиляция. Файлы и настройки
6:40 - Виды типизаций (Сильная, слабая, явная, неявная...)
9:40 - Структурная типизация. (Утиная)
11:05 - Типы данных
12:35 - Анотация типов
12:52 - Enum (Перечисления)
15:15 - Интерфейсы и Типы (Введение)
18:48 - Алиасы типов (псевдонимы, конкретизация, составные, простые)
20:32 - Объединение типов
22:00 - Пересечение типов
23:02 - Types Queries (Запросы типов, typeof)
24:55 - Литеральные типы (строковые, числовые)
27:00 - Типизация объектов
29:02 - Типизация массивов
30:10 - Типизация кортеж
33:31 - Типизация функций
35:33 - Extends Интерфейсы
37:50 - Implements Интерфейсы
38:16 - Индексные члены типов
41:22 - Модификаторы доступа. Классы. (public, private, protected)
44:34 - Операторы Optional, Not-Null, Not-Undefined
48:24 - Generics (Обобщения) (Promise, axios, api)
56:48 - Generic Constraints (Параметры типа, Extends)
58:52 - Generic parameter defaults (Значение по умолчанию, условные типы)
1:00:30 - Дискриминантное объединение
1:05:00 - Type assertions (Утверждения типов)
1:07:05 - Type Guards (Защитники типов)
1:08:36 - Оператор keyof, lookup types, mapped types, mapped types - префиксы + и -
1:13:14 - Утилитарные типы (Readonly, Partial, Required, Pick, Record)
1:18:27 - Утилитарные типы (Exclude, Extract, Nonnullable, Returntype, Instancetype, Omit)
1:22:00 - Массивоподобные Readonly типы (ReadonlyArray, ReadonlyMap, ReadonlySet)
1:24:16 - Заключение, Практика, Планы
#typescript #react #generics #interfaces #types #Фронтенд #Разработка #Программист #WebDevelopment #JavaScript #ВебРазработка #ОбучениеПрограммированию #ВидеоУроки #IT #айтишник #junior #реакт #практика

Пікірлер: 106
@r1cro
@r1cro 6 ай бұрын
Если кто не понял что такое TypeScript, то есть одно очень правильное высказывание: "TypeScript делает из простого сложное, а из сложного - ANY".
@reactify-it
@reactify-it 6 ай бұрын
В видео же сказано - Тайпскрипт это улучшенная версия Джаваскрипт))
@vna2re_kaban761
@vna2re_kaban761 6 ай бұрын
​@@reactify-it dushnovato
@iosswiftuipractice3793
@iosswiftuipractice3793 6 ай бұрын
@@reactify-itэто два два разных языка и у них есть свои плюсы и минусы, тайпскрипт имеет типизацию и другие фишки из других языков просто. Джава скрипт геморроем не страдает просто
@aweb_21
@aweb_21 5 ай бұрын
@@reactify-itговорить что тс это улучшеный жс, в корне не верно, за это ты получишь не мало хейта) Если хочется тс сравнить с жс, то лучше сказать, что тс это типизированный жс, а говорить что один яп лучше другого(тс улучшеный жс) не профессионально. Нужно оставаться лояльным ко всем языкам 😁
@superasync
@superasync 5 ай бұрын
​@@reactify-itне тс это прикольные подсказки в вс коде для жс)
@user-ed9oq7ii8s
@user-ed9oq7ii8s 7 ай бұрын
Спасибо за видеоурок, отлично объясняешь!
@racman9964
@racman9964 5 ай бұрын
Большое спасибо! Отличный курс, повторил все что хотел
@user-wo2jn1fb9k
@user-wo2jn1fb9k 5 ай бұрын
Спасибо большое! Очень круто, что примеры из реального программного кода, а не обстрактные, как у многих про собачек, кошечек и машин
@skyand_fly
@skyand_fly 10 күн бұрын
Годнота! Спасибо за труды! Не останавливаайся за достугнутом )
@user-kw5yy1gi7e
@user-kw5yy1gi7e 17 күн бұрын
Одно из лучших видео по typescript. Спасибо за объяснение.
@elelelelex
@elelelelex 7 ай бұрын
Спасибо большое. Подписался, годнота лютая ;)
@iiiiiuuiuiui4303
@iiiiiuuiuiui4303 Ай бұрын
очень подробно и понятно, большое спасибо
@user-artem-busyhin
@user-artem-busyhin 6 ай бұрын
Все четко и понятно. Ставлю жирный лайк!
@reactify-it
@reactify-it 6 ай бұрын
Спасибо!
@honestprogrammer
@honestprogrammer 7 ай бұрын
Самое лучшее объяснение TS! Спасибо за большой труд!
@reactify-it
@reactify-it 7 ай бұрын
Спасибо!
@sarxanabdullayev6440
@sarxanabdullayev6440 5 ай бұрын
спасибо большое! самый лучший курс про typeScript
@reactify-it
@reactify-it 5 ай бұрын
Спасибо!
@DevAccount-rq4ni
@DevAccount-rq4ni 7 ай бұрын
Отлично преподнес typescript! Талант у автора объяснять понятным языком🔥
@reactify-it
@reactify-it 7 ай бұрын
Спасибо!
@Denisqa-ke1xo
@Denisqa-ke1xo 6 ай бұрын
Отличное видео! Спасибо!
@reactify-it
@reactify-it 6 ай бұрын
Рад слышать!
@user-dl1jf8vo2q
@user-dl1jf8vo2q 5 ай бұрын
Отличный материал, спасибо!
@reactify-it
@reactify-it 5 ай бұрын
приятно слышать!
@romanpetrashkevich5292
@romanpetrashkevich5292 7 ай бұрын
спасибо, очень хорошо
@imb4293
@imb4293 5 ай бұрын
Супер огонь )) Спасибо)
@reactify-it
@reactify-it 5 ай бұрын
Приятно слышать! спасибо)
@hattori3683
@hattori3683 8 ай бұрын
Бро, ты лучший, спасибо за уроки!
@reactify-it
@reactify-it 8 ай бұрын
Спасибо!
@dimalukashenko4865
@dimalukashenko4865 3 ай бұрын
Очень хороший урок, спасибо за труд!
@reactify-it
@reactify-it 3 ай бұрын
спасибо!
@Xtemple135
@Xtemple135 6 ай бұрын
Хороший гайд, как новичку с TS было все более менее понятно, а так очень хороший материал для освежения мозгов перед собесом. Лайк + подписка.
@reactify-it
@reactify-it 6 ай бұрын
Спасибо!
@ksander1705
@ksander1705 5 ай бұрын
Благочестивый! Я восхваляю твое умение донести сложное просто! Буду слагать о тебе песни!
@ugin-nb4sy
@ugin-nb4sy 8 ай бұрын
Очень хорошо !!
@reactify-it
@reactify-it 8 ай бұрын
Спасибо)
@user-fq4pc7fm2z
@user-fq4pc7fm2z Ай бұрын
Спасибо! информативно и концентрировано!
@reactify-it
@reactify-it Ай бұрын
рад слышать!
@nursultannurlanov660
@nursultannurlanov660 4 ай бұрын
Спасибо большое за такой шикарный курс
@reactify-it
@reactify-it 3 ай бұрын
и вам!
@apkartas7416
@apkartas7416 2 ай бұрын
Спасибо!
@user-mb7kp1bl4w
@user-mb7kp1bl4w 7 ай бұрын
Большое спасибо!
@user-uf5sm8mq2q
@user-uf5sm8mq2q 8 ай бұрын
Годный контент!
@reactify-it
@reactify-it 8 ай бұрын
спасибо!)
@igorsenichev3779
@igorsenichev3779 8 ай бұрын
Отличный сюрприз в виде видео по TS
@reactify-it
@reactify-it 8 ай бұрын
наконец-то)) устал его делать. Можно уже другие видосы выпускать) ура
@user-mc1gr9hq6p
@user-mc1gr9hq6p 3 ай бұрын
Отличный гайд, пришлось смотреть в два захода, чтобы концентрация не терялась. Спасибо огромное за труд!
@reactify-it
@reactify-it 3 ай бұрын
Спасибо!
@user-mh2gt1pp9d
@user-mh2gt1pp9d 4 ай бұрын
Спасибо за хорошое объяснение.
@reactify-it
@reactify-it 3 ай бұрын
Спасибо! Приятно!
@_Froger_
@_Froger_ 2 ай бұрын
Почему-то думал что type скрипт это протсо указать тип переменной. Не ожидал что придется садиться за 1.5 часовой видос и кокретно так вникать... Материал конечно топ💗💗💗
@user-jm1wj5nn3u
@user-jm1wj5nn3u 8 ай бұрын
Бро, давай почаще такие ролики!
@reactify-it
@reactify-it 8 ай бұрын
Постараюсь!
@mike-aaa
@mike-aaa 5 ай бұрын
Класс!
@reactify-it
@reactify-it 5 ай бұрын
Спасибо!
@aibekbbic7821
@aibekbbic7821 8 ай бұрын
ты тигр, отвечаю!
@reactify-it
@reactify-it 8 ай бұрын
💪
@user-mx6vz6rq6z
@user-mx6vz6rq6z 3 ай бұрын
видео отличное. Спасибо за урок). Тайпскрипт не упрощает работу (лично мое мнение), но в работе надо использовать его, поэтому приходится страдать))))
@RaulGasanov
@RaulGasanov 7 ай бұрын
После данного курса понимаешь, что человек умеет грамотно излагать свои мысли. С удовольствием купил бы платные курсы у тебя по реакту, редаксу и т.д., если таковые имеются
@reactify-it
@reactify-it 7 ай бұрын
спасибо! таких не имею) будут бесплатные по редаксу и другим технологиям
@tonybetony
@tonybetony 7 ай бұрын
1) ItemType = INews | IBanner здесь ItemType это ОБЪЕДИНЕНИЕ типов, переменная типа ItemType может принимать значения являющиеся общими для INews и IBanner, то есть являющееся ПЕРЕСЕЧЕНИЕМ INews и IBanner. 2) также может быть ПЕРЕСЕЧЕНИЕ типов (ItemType = INews & IBaner) которое является ОБЪЕДИНЕНИЕМ значений INews и IBaner. Итого: Объединение это Пересечение, а Пересечение это Объединение. Всё понятно! спасибо TS! )
@reactify-it
@reactify-it 7 ай бұрын
🤣
@ginhop1057
@ginhop1057 4 ай бұрын
спасибо
@reactify-it
@reactify-it 3 ай бұрын
спасибо
@reactify-it
@reactify-it 8 ай бұрын
t.me/reactify_IT Авторский канал о программировании. В Telegram канале ежедневные посты с теорией и советами, примеры кода, викторины, IT-новости, короткие видео с историями и объяснениями, обсуждения технологий, анализ рынка IT, обзор книг, статей, ресурсов, вакансий и многое другое.
@sony1939
@sony1939 7 ай бұрын
Классно! но надо погромче запись, чуть не оглох от напряжения
@Elena-fe2um
@Elena-fe2um 5 ай бұрын
Спасибо, очень хороший курс, мне как старому деву повторить что нужно, хотя конечно тут не вся теория. Автору лайк и подписка.
@reactify-it
@reactify-it 5 ай бұрын
Вам спасибо! Приятно слышать
@user-ed8bw2ow1h
@user-ed8bw2ow1h 7 ай бұрын
Спасибо за видео, можете ли сделать урок по декораторам?
@reactify-it
@reactify-it 7 ай бұрын
хорошая идея
@zzeepps
@zzeepps 6 ай бұрын
Слава яйцам, новый, актуальный урок, и автор 🎉
@reactify-it
@reactify-it 6 ай бұрын
Ура! Как хорошо что есть такие люди, которые помогают другим учиться!
@tonybetony
@tonybetony 7 ай бұрын
на 21:05 говорится, что есть нюанс, если в одном интерфейсе есть поле а в другом нет, то будет ошибка. interface INews { title: string; } interface IBanner { published: boolean; } type ItemType = INews | IBanner; let item: ItemType = { published: true } console.log(item.published) // true ошибки нет. Но у вас здесь как бы Двойной Нюанс - вы перекладываете составной тип ItemType в еще один новый интерфейс Props и тогда да, уже непонятно и ошибка. но утверждать на 21:33 вновь, что если есть объединение ( | ), то нельзя использовать поля которые есть в одном интерфейсе, но нет в другом, и это вызовет ошибку - не совсем корректно, потому что см. пример выше.
@domikpriklyocheniu3611
@domikpriklyocheniu3611 3 ай бұрын
А есть видео тайпскрипт в реакте?? если нет,будет делатса?
@risselify
@risselify 4 ай бұрын
Посмотрел урок , но профи к сожалению не стал, как написано в названии. Вообще ничего не понял (((
@reactify-it
@reactify-it 3 ай бұрын
Это печально! надо делать React Новости и практикваться!
@evgen_dolf
@evgen_dolf 8 ай бұрын
каиф инфа
@reactify-it
@reactify-it 8 ай бұрын
Старался!
@LiXo1337
@LiXo1337 6 ай бұрын
Я проходил платний курс и там тема generics на 1 час была и я совсем ничего не понял, а тут за полтора часа весь тс понял.
@reactify-it
@reactify-it 6 ай бұрын
Спасибо! Приятно
@Denisqa-ke1xo
@Denisqa-ke1xo 6 ай бұрын
Что за клавиатура приятно звучит?)
@reactify-it
@reactify-it 6 ай бұрын
Logitech POP Keys
@evgeniust6328
@evgeniust6328 7 ай бұрын
чель спасибо всё круто, но почему так тихо? пришлось звук на максимум выкручивать
@reactify-it
@reactify-it 7 ай бұрын
если на микро прикручивать громкость звука то слышно дыхание(
@feruza7555
@feruza7555 5 ай бұрын
ххххаахаххаххахаха уменя такая же проблема было тока купил новй ноут думал динамик плохой а аказалос что видео такая
@user-cg1pq2kh6t
@user-cg1pq2kh6t 4 ай бұрын
свободу JS ! дядьки с майкрософт отобрали свободу
@reactify-it
@reactify-it 3 ай бұрын
Свободу!
@master-rikk2121
@master-rikk2121 8 ай бұрын
Нужная тема, при первом использовании TS были слезы боли. И такое ощущение, что он только мешает, но шло время...
@reactify-it
@reactify-it 8 ай бұрын
это да, без него непривычно писать уже
@Syberby
@Syberby 6 ай бұрын
у меня только один вопрос. почему я сам не изучил это все и не понял весь смысл, а мне должны разжевать и расставить по полочкам такие авторы?))
@Nikitosss91
@Nikitosss91 6 ай бұрын
У всех кто пишет на тс есть муж
@oleksandrvk7592
@oleksandrvk7592 2 ай бұрын
sps brad
@tonybetony
@tonybetony 7 ай бұрын
погромче бы звук
@reactify-it
@reactify-it 7 ай бұрын
делаю громче, мое дыхание слышно(
@devillyach2970
@devillyach2970 3 ай бұрын
под ulbi косишь?
@reactify-it
@reactify-it 3 ай бұрын
он под меня
@warcraft.mp4889
@warcraft.mp4889 9 күн бұрын
очень плохое обьяснение, просто читаешь что-то из вики не обьясняя это.
@reactify-it
@reactify-it 6 күн бұрын
Спасибо!
@cunning_jumper
@cunning_jumper 6 ай бұрын
Урок хороший, а вот этот ваш JS# г... полное. И как только он зашёл такому количеству разработчиков ума не приложу.
@reactify-it
@reactify-it 6 ай бұрын
Спасибо! Есть спрос - есть предложение)
@mmmm-bo9tv
@mmmm-bo9tv 7 ай бұрын
Здравствуйте, А есть ссылка конкретно на этот проект?
@reactify-it
@reactify-it 7 ай бұрын
здравствуйте, в первой серии React Новости. Да и в целом в любой серии, ссылка на гитхаб репозиторий проекта есть)
@reactify-it
@reactify-it 7 ай бұрын
github.com/MirgradR/news-reactify
@mmmm-bo9tv
@mmmm-bo9tv 7 ай бұрын
@@reactify-it благодарю за быстрый ответ и ссылку! Желаю вам успехов в развитии канала
React Новости. TypeScript Практика. React приложение новостей. [12]
30:35
Reactify | Frontend Разработка
Рет қаралды 1,5 М.
Frontend Собеседование с разбором. Путь к трудоустройству 2024
41:18
MEU IRMÃO FICOU FAMOSO
00:52
Matheus Kriwat
Рет қаралды 15 МЛН
Как написать первый проект на Vue и TypeScript
48:23
Docker Для Начинающих за 1 Час | Docker с Нуля
52:43
TypeScript - Быстрый Курс за 70 минут
1:08:00
Владилен Минин
Рет қаралды 623 М.
ПРОГРАММИСТЫ! ВСЕ СЮДА...
14:25
Winderton
Рет қаралды 310 М.