0: Или там, может, а, да, вместе. Ну давайте буквально минутку подождём, может ещё кто-то приконнектится и начнём.

1: Печально, конечно, что не со своих ноутбуков все потому, что мы планировали воркшопы все-таки, а не лекции.

2: Когда воркшоп это гораздо интереснее, сразу че то пробуешь, че то получается, че то нет в таком формате.

3: Не так прикольно. Ну да ладно.

4: Что имеем, то имеем так, где мой экранчик?

5: Так.

6: Что у меня тут то? Ладно, давайте начинать время у нас мало.

7: Запустим проект, который с прошлого раза остался после сашиного, здесь открываешься ну че то новое, видимо, занесли в squad, такого ещё недавно не было.

8: Не хочу так.

9: Так, напомню, на чем мы остановились. У нас есть какое-то количество приложенек, и вы сделали на прошлом фильтр к ним. То есть есть поиск по названию, по платно.

10: И по категориям, да, все это работает. Надеюсь, вы до этого уровня дошли, потому что если не дошли, догоняйте. Чем дальше, тем сложнее. У нас лекции. Я об этом говорил. Так что мы

11: Сегодня разбираем, разбираем тайп скрипт. Так, свои тоже есть. Ага. Окей. Что такое тайп скрипт. Так, это где мы?

12: Да, компонент разбита, процы получаем стейт есть, то есть теперь мы, по сути, не меняем ничего в коде, то есть с точки зрения нового функционала фичей и так далее. Мы просто внедряем тайп скрипт. Давайте сейчас пройдёмся. Что это?

13: Такое, что у меня тут проверяем до запуска. Смотрите, что такое тест. Скрипт. Вообще это надстройка над

14: Джаваскриптом. То есть это не самостоятельный язык, это внедрение типизации, по сути, и проверок. Ну плюс там ещё пачка маленьких бонусов, о которых сейчас не буду говорить. Но, в общем, это современный стандарт разработки и

15: Если ты не пишешь на тайпскрипте, ты работу сейчас скорее всего никакую. Фронтендовский ешь. Это важная штука, она не сильно сложная, там главное понять парадигму, как это работает, че, зачем, почему? А потом уже какие-то кейсы.

16: Будут тонкие, их нужно будет вкуривать отдельно. Там будут вопросики. В целом кривая обучения, она такая, что на старте вроде бы 80%, понимаешь, очень быстро, а оставшиеся 20 очень долго и сложно.

17: Вот, значит, что это такое. Так jazz у нас имеет динамическую типизацию. То есть что это такое, если мы перейдём

18: Проектик просто консольку, да, откроем и напишем, что

19: Какой-нибудь, а это 5 об это.

20: Давайте, не знаю, строка string какой-то и теоретически, когда мы делаем, а плюс б, то это же не валидная операция, да, потому что, а это число, а, б, это строка, но java script.

21: Динамически он пытается как-то помочь и пытается вот в данном случае пытается склеить, да, 5 string, он приводит все к типу строки. То есть, видите, на выходе у нас строка получилась, хотя как бы это должно, по идее, быть ошибкой, потому что складывать и

22: Или даже вот так вот, да, конс равно 5 в кавычках, а плюс ц, это будет 55 строкой. Хотя, по идее, как бы, ну, наверное, когда ты складываешь 5 и 5, ожидаешь получить 10.

23: И джаваскрипт это вообще никак не проверяет, это просто как верхний уровне примерчик, но давайте копнём чуть глубже сейчас преза вернусь. Что у нас тут? Да?

24: Тайпскрипт вообще придумал майкрософт, и это была их личная разработка. Изначально они внедряли только в своих проектах, и потом они лет 10, может побольше 12, наверное, назад засорили это и постепенно завоевали рынок.

25: Всех конкурентов они оставили за бортом.

26: То есть смотрите пример, да, джаваскрипт, вот такой можем сделать. Сейчас скопируем тоже код вот сюда вот у нас есть функция, давайте разберём, что она делает. Она получает на вход какое-то значение.

27: Эта строка должна быть от строки, она просто откидывает 1, 1 символ. То есть если мы запускаем вот 1, 2, 3 строкой, то на выходе мы получаем 2, 3 и вот

28: Проблема сразу, да, мы же можем сюда и число передать, и у нас в итоге в рантайме возникнет ошибка, и мы предварительно её вообще никак не знаем. То есть, если мы вот этот код сейчас целиком ещё раз скопируем,

29: И вставим какой-нибудь java script file.

30: Тут у нас все хорошо. Че покрупнее сделаю? Как бы ни ошибок, ничего нету, если мы этот же код сделаем скриптовым файлом.

31: Во первых, у нас подсветка сразу говорит о том, что не хватает.

32: А, наверное, из за одинакового имени.

33: Сейчас не понял. Перезагрузим. Так, скрипт сервис не понял все равно. Ну ладно, сейчас попробуем разобраться дальше.

34: Так, если вообще это удалю. А, ну вот че то он связал с джаваскрипт файлом.

35: Значит в чем отличие да, мы пишем не точка джис, а точка ттс, то есть start скрипт файл и типизация что такое мы через двоеточие в каких-то местах прописываем типы значения у нас есть например же.

36: Всякие типы данных в java скрипте, какие это там numbers, ну строка, объект, null undefined symbol, там ещё что-то могу забыть, сейчас не суть важно. Разные типы данных и тайпскрипт.

37: Как раз он отвечает, что типизирован. Я за за всеми этими параметрами слежу. И вот это вот невалидный код для браузера. То есть тайпскрипт файл не валиден для браузера, да, потому что

38: Вот так вот ставим функцию, он скажет, что вот эта вот вещь вообще для него невалидная ну действительно с точки зрения java script синтаксис здесь неправильный, но в чем фишка да, вот мы пишем скрипт файл и мы ещё вообще ничего

39: Не скомпилили, ничего не запустили, но нам уже вот здесь в подсветке скрипт говорит то, что мы передаём намбер. Вот тут вот намбер ожидается только string. То есть так передавать нельзя. То есть, если мы

40: Расширить, допустим, да?

41: Вот, вот эту ошибку мы порешали. Мы говорим о том, что numbers может пойти то ещё раз, что мы пишем. Это строка или число, поэтому это уже валидное, но вот здесь сабстринг нету у нам

42: Да, у нас есть у каких-то строк свои методы. Вот это эта строка рандомная, да, и у неё вот есть какое-то количество своих функций, если это число, надо вот так обернуть скобочки.

43: То у него какой-то свой набор методов и вот сабстринг у него нету.

44: Кстати, если вот, например, взять локал стринг, то здесь ошибки не будет, потому что local стринг есть и у строки, и у числа сейчас, может быть не совсем понятно все это звучит, но в процессе при

45: Сейчас все разберём, все станет проще. То есть ещё раз. Главное запомнить, что тайп скрипт это просто проверка типов, подсветка ошибок и автокомплит.

46: Вот этот пример мы разобрали на java скрипте на тайпскрипте о том что ошибка сразу видна в коде так ну да, я сказал что type script это надстройка, то есть код в целом похожий, но добавляется через двоеточие там типы.

47: Сейчас мы все это на примерах проверим да, то что type script невалидный файл сам по себе я сказал он преобразуется в итоге в java script то есть у нас специальные сборщики которые смотрят на тайп, скрипт, файлы и

48: Генерирует из них нормальный джиэс, который браузер понимает, он в итоге его и получает.

49: Так, сегодня столкнёмся с типизацией различных мест. Они бывают. Типы тоже разные события, там дженерики. Пойдём от простого к сложному и будем постепенно внедрять в целом.

50: Если на верхнем уровне, то вот наше приложение есть какое-то количество это уже удаляю не нужно какое-то количество файлов у нас в срц. Да, вот gs икс.

51: У нас только js x. Вот по сути, 1, 2 3 4 файла нам нужно перевести на тайп скрипт, то есть мы их переименовываем, потом подключаем тайп скрипт, начинаем разбираться с ошибками, фиксим их и постепенно добавляем типы вот.

52: Мы должны за сегодняшний воркшоп все это дело пройти.

53: Так начинаем с переименования и переименовываем по 1 файлу. Так вопросики какие-то есть.

54: Пока нет, значит, идём дальше. То есть все, что мы делаем сейчас, начинаем ещё раз. Да, как у нас. Напомню, сборка работает у нас вот здесь есть файл gs икс, мы меняем его на ттс икс и

55: Соответственно, мы x сделаем ттс, икс и все остальные давайте сразу тоже сделаем ттс, икс т. А вот джесс это теперь ттс это тоже t s. X.

56: Six и что у нас видите, появляются какие-то подсветки ошибок. Вот такая ошибка, такая ошибка сейчас мы со всеми ними разберёмся и важный момент у нас вот эта вот программ

57: В котором мы работаем вскод, её создали в майкрософте. И как раз она изначально. Почему такая популярная? Потому что в неё встроенная поддержка тайпскрипта из коробки. То есть не надо ничего ставить. Если мы вот этот проект откроем, не знаю, в блокнотике, условно говоря, то мы

58: Ещё вот этого ошибок не увидим или в каком-то другом редакторе кода тоже до тех пор, пока мы не установим тайскрипт зависимости ещё раз, просто в vs code поддержка тайпскрипта сшита из коробки, поэтому мы сразу видим эти ошибки.

59: Вот, но так как мы можем хоть и с консоли работать с проектом, то нам нужно позаботиться о том, чтобы все зависимости были установлены.

60: Итак, самая 1 зависимость устанавливаем. А скрипт?

61: Что-то такое install. Мы проходили с вами то депенденси и какую, собственно, библиотечку вот это установит нам тайп скрипт, устанавливаем сборочку, вставляем команду сюда.

62: Единственное, сейчас не по работе, кое-что нужно отключить, а то могут быть немножечко не те.

63: Сейчас 1 файл надо переименовать. Работаю с вами. Так и ещё раз перезапущу.

64: Отменю.

65: И запускаем как бы инсталл. Вот в итоге смотрим, что у нас появилось в зависимостях ещё раз, да, напомню, что у проекта 2 вида зависимостей. 1 непосредственно нужн,

66: Для того, чтобы проект работал, и депенденс те, которые нужны, чтобы проект запускался в режиме разработки. И вот здесь у нас появился тайп скрипт какой-то последней версии.

67: И теперь вместе с этим у нас ещё появляется

68: Вот такая команда тск ну давайте вот это скопирую, то есть можно добавить новую команду, у нас есть json, который говорил паспорт проекта, и в него мы сейчас добавим новую команду для проверки.

69: Идём, оо, вот где скрипты добавляем через запятую вот такую команду и сейчас разберём, что это такое. Смотрите каждый раз, когда у нас, мы инсталлируем какие-то исполн,

70: Библиотеки нот modules. Давайте дойдём до апп скрипта.

71: Там есть директория бин, и вот в ней, видите, вот это тск. И вот так вот мы к ней обращаемся, то есть пакетные менеджеры. Вот, но npm, который встроен в ноду, мы можем здесь, когда скрипты писать и указывать.

72: Вот эту команду он как раз ищет по всем бин файлам по bin папкам вот эти вот проекты, вот эти файлы и если посмотреть, то это просто java script файл который как-то там на ноде дальше исполняется.

73: Ну, давайте так, ладно, чтоб понятно было лип тск, то есть он лезет вот сюда и отсюда и вытаскивает вот этот файл. А тот, в свою очередь, ну, проверяет, что там, к чему и лезет вот в такой файл подчёркивание тск.

74: Подчеркну, да, и вот этот файл, по сути, запускается. Видите, всего лишь тут 134000 строк кода. Это по сути, есть весь наш тайп скрипт. Вот, и как это работает. То есть мы говорим, что

75: Type script компайлер, то есть тот, который проверяет и компилирует ваш проект сейчас я текущие изменения заспешу, то есть у меня есть age changes, который позволяет мне зафиксировать.

76: То, что вот на текущем шаге есть и все, что будет потом я могу легко отменить с помощью вот этой штучки. Сейчас просто флажок объясню, что такое тск. И теперь у нас появляется вот такая команда тайпчек, мы пишем ПИН.

77: Так, чек это запускает ту самую библиотечку, которую я показывал и что она делает. Вот здесь должно появиться куча мусора.

78: Не понял. А, да, у нас какая-то ошибочка. Смотрим, что не так, а у нас нет конфига. Давайте с этим разберёмся.

79: Вот нам нужен тест конфиг что такое test config это конфигурация для скрипта, у него очень много настроек всяких, но какой-то минимальный, можно дефолтный создать, просто вот такой коммандо.

80: Давайте запустим.

81: И смотрим, что у нас появился файл test config json это как бы то, что отвечает за конфигурацию скрипта в проекте вот он по дефолту создаёт тут какие-то штуки непонятные, но чтобы вас не смущать вот всем вот этим добром, давайте пойдём по этап.

82: И в целом минимальный конфиг это просто вот такой

83: Вот он есть.

84: То есть что это такое? Это файл, у которого есть какие-то опции внутри, настроечные и ещё какой-то ряд директив. Тут в принципе должна быть подсветка. Или пока мы ещё не доустановили, может быть её. Ну да нет, ещё пока попозже появится.

85: Вот, ну, как бы, самое главное, что, что мы говорим. Включи папочку срц, вот, которой мы работаем как раз вот эту вот все, что в ней есть, валидируй. И пока вот без настроек, это уже минимальная

86: Freak, который позволяет нам запустить вот такую команду type чек.

87: Нужно, не нужно. Тогда добавлю вот этот сюда этот не нужно. И что получается после того, как мы запускаем? Во первых, смотрите, она показывает, что найдено аж 22 ошибки в этом файле. 40 в этом 31. Вот тут и тут он всех

88: Расшифровывать что где не так. И более того для каждого файла он смотрите че сделал он создал ещё java script файл то есть о чем я говорил что тайпскрипт это не валидный файл для браузера и на выходе он компилируется в обычный

89: Скрипт, то есть все наши вот эти вот main апп, вот они mein апп, он создал нам java script файлы и на самом деле мне в проекте это не сильно нужно, потому что у меня срц это source, то есть исходники и

90: Я не хочу, чтоб все вот этот мусор для меня создавался. Мне он тут не нужен. И есть такой флажочек, с которого я начинал вот такой no Эмит, то сейчас я вот это все отменю.

91: И запустим ещё раз.

92: И смотрите, но Эмит флаг, который не генерирует нам java script вот здесь, то есть финальная проверка для ошибок скрипта, у нас команда уже есть.

93: Так, пойдём дальше. Минимальный конфиг и да, то есть если мы сейчас че то начнём открывать ну во первых мы увидели кучу ошибок и какой-то там, да, вот этот, а так не так, так там вот.

94: X видите сразу, сколько ошибок появилось.

95: Это когда мы тест конфиг уже добавили какой-то минимальный, здесь какое-то количество ошибок сразу вот все красное, неприятное. Сейчас мы будем с этим по очереди разбираться. То есть изначально он ничего не знает, но потом он говорит, что именно он не знает, и мы постепенно

96: Сверху вниз начинаем это дело фиксить ещё важный флажочек 1, да, который вот внутри опшенс, это строгая проверка и начинать лучше с неё, потому что в целом, так как мы внедряем типиза,

97: То мы хотим хороший результат, а не абы какой. И это более строгая проверка. Вот сюда идём и ставим вот такой флажочек сюда. То есть я рекомендую всегда включать жить с ним, потому что когда

98: Проект большой чем строже типизация строже проверки, тем меньше ошибок.

99: У вас будет.

100: Так, идём дальше. А, кстати, давайте проверим, стало ли ошибок больше с этим флагом. Нет, больше не стало. Ну ладно.

101: Так, идём дальше да, 1 из первых ошибок, то есть 2 флаг, который нам сегодня нужен это gs икс ещё раз. Что такое gs икс это вёрстка компонентов в стиле этим тегов, но.

102: Это невалидный джава скрипт и та скрипт тоже об этом ничего не знает ему нужно рассказать, что gs икс, как он должен интерпретировать мы идём в test config и добавляем ещё 1 вот такой флажочек, то есть смотри, сейчас у нас вот ругань идёт на то, чт.

103: Никакого к gsx флага нет, и он не понимает, как с этим жить и вот этим флагом мы его учим.

104: Давайте перезапустим скрипт сервис, че то не помогло.

105: А, да, все правильно.

106: Так, мы теперь сказали так, что такое джи икс файлы, но дальше возникаем. Возникает проблема типов.

107: Давайте постепенно исправлять. Ну как по презентации пойдём, да, что такое типы могут жить в отдельных файлах. То есть, вот смотрите, какой-нибудь

108: Атс я могу экспортировать просто на tape какой-нибудь my type неважно, да и тут говорю, что а это string б, это number?

109: Неважно, да, какие-то вот это вот типизация, которую можно описывать вот так строками. Сейчас пока может быть не очень понятно, но чуть чуть подождите, все пойдёт, давайте ошибочки устранять постепенно. Самая простая это вот css.

110: Естественно что ни java script, ни тайскрипт не знает что такое css файлы а мы импортируем это в проект и он не знает что с этим делать он говорит ребят, я вообще не в теме, я с этим работать не умею и бывает часто в библиотечке вот допустим если на react наведём он гоо.

111: Говорит, что для реакта нет типов сейчас. То есть мы библиотеку реакта импортируем сюда, в проект скрипту нужны какие-то конкретные целеуказания о том, как с этим жить. И в данном месте он этого не знает, и он просит добавить типы.

112: Ну, к этому сейчас перейдём. Я просто к тому сейчас, что у некоторых файлов, у расширений файлов, у библиотек некоторые

113: Или даже всем, ну, скорее даже всем необходима типовая поддержка. Давайте начнём со стиля, потому что это чуть проще для того, чтобы вот такие кейсы решать, нужно создать глобал ттс файл.

114: Что такое дтс? Название может быть любое там common абв. Неважно, что, ну, как-то вот принято писать глобал, потому что это глобальная глобальная типизация на проект и из чего она состоит. Точка д точка тст тст это скрипт файл а точка д.

115: Это декларейшн. Ну вот такая такое соглашение, конвеншн есть о том, что точка дтс это как раз декларация для тайскрипта, и сюда мы можем написать что-то, и это что-то считается, потому что в конфиге у нас стоит

116: Срц, глобал ттс у нас внутри срц, и он по любому прочитается. И как мы работаем со стилями, мы копируем вот эти 2 определения, сейчас разберём, что это такое.

117: Мир.

118: О чем это говорит сейчас? Что мы говорим? Ну, проще всего, что presto существует любой, точка ссс файл. Вот он просто есть, что внутри, я не знаю, относись к

119: Поэтому неважно как, но просто это нормально. И я гарантирую, что как разработчик, что с этим файлом все в порядке. Если мы сюда перейдём, видите, тут ругань уже пропала, он просто его импортирует, а так как инструкций никаких нет, он просто пропускает и билдит потом и

120: А если у нас вот есть апп модуль, например, вот здесь, да, давайте ещё чуть чуть откатимся глобал дтс и вот эту штуку удалим пока и так как у нас вот здесь

121: Внедряется стайлс через модуль сисс, и эта точка сисс файл, то по текущей инструкции он смотрит сюда и просто его говорит, типа, ну что-то как бы и ладно, что там, я не знаю, мне все равно, ну вот ты мне отвечаешь, что там это есть.

122: И, пожалуйста, я на это больше не ругаюсь, но в чем прикол? Да, мы же хотим, чтобы стили у нас были более типизированны. И вот этот вот css можно немножко расширить, внедрить такой точка модуль сисс, который говорит о том, что

123: Внутри объекта стайлс, который проще будет сделать открыть 2 рядом. Вот мы импортируем стайлс и мы говорим, что stels будет типа класса, потому что export default

124: Абв, можно писать тоже самое. Да, неважно, что, ну просто класс это вот, и это объект, внутри которого строковые ключи и значение.

125: Строки.

126: То есть типизация идёт через вот такой объект. Таким образом, тайпскрипт понимает, что если файл точка модуль сиэсэс, то внутри него какое-то содержимое из строк, как бы и все на этом этапе больше нам глобал не понадобитс.

127: Ну, главное, что мы теперь уже устранили. Вот несколько ошибок. Давайте посмотрим, насколько меньше их стало, было. 99, стало 69. Уже уже интересно. Так.

128: Что там дальше? С этим мы разобрались. А ещё вот эта вот запись эквивалентна.

129: То есть вместо вот такой штуки можно написать вот такую, это более современный синтаксис. Рекард это по сути, объект. И дальше говорится, что у него может быть ключами, а что значениями. То есть вот такая вот конструкция через

130: Угловые скобочки, угловые скобочки это дженерики. Мы их будем часто употреблять. Сейчас просто прям затравочка на будущее. Лёгкая, беглая. Что давайте вот так и вот это вот

131: Вот это вот 1 и та же запись, то есть объект, внутри которого ключ является строкой, и значение строкой. И вот это тоже самое объект, в котором ключ является строкой, значение тоже строкой.

132: Ну, пока не акцентируйтесь, просто дженерики это такой чуть чуть следующий шаг уже потрогали. Так почему же здесь сейчас что-то я пропустил?

133: Все.

134: Да, слушайте, кажется, я пропустил 1 штуку.

135: Да, что-то у меня потерялся слайдик 1. Ну я потом исправлю презентацию и обновлю её здесь. Нет, да, не хватает.

136: X. Потерялся слайд после этого, о чем он? Если мы перейдём вот сюда, в main, да, верхний уровневый файл, то мы говорим, что так скрипт говорит, я типа не понимаю, что так.

137: React и он сам подсказывает, что можно сделать вот эту команду.

138: Запускаем и тоже самое для 2 библиотеки.

139: Он говорит, видите, у нас уже пропала ругань вот здесь теперь мы знаем, что такое react. Ещё раз, что это такое. Он говорит, что у меня в самой библиотеке, если мы внутрь неё погрузимся, вот тот же реакт.

140: Тогда прям сразу посмотрим, тут вообще нету никаких типов, тут только java script e type script говорит я ничего не знаю про этот java script, потому что мне нужны декларации помните мы писали дтс вот такие вот декларации ему и нужны и теперь?

141: Посмотрим, вот сюда собака тайпс, у нас появился реакт, и вот они дтс файлы, как бы, не будем внедряться, из чего они состоят. Ну, какие-то вот декларации для него, которые он понимает, есть, интересно, вот.

142: Дтс какой-нибудь, ну вот какие-то интерфейсы, типы. В общем точка дтс это файлы, по которым тайпскрипт может понять, что в библиотеке лежит и как это использовать.

143: Итак, тоже самое делаем для 2.

144: Рядом вставляем, выполняем, и теперь у нас ещё и это пропадёт.

145: Угу. И теперь давайте разберёмся, что это такое. Да, я напомню, я рассказывал, осталась 1 ошибка здесь у нас. Я рассказывал вам на 1 из первых уроков, что, что это все означает. То есть мы говорим, найди в браузере уже

146: Элемент с идентификатором рут и в него рендерит все наше реактовского ение и что здесь ругается да, давайте разберём. Он говорит то, что результат выполнения вот этой функции гет элемент бай айди может быть

147: Либо элемент, либо now, потому что если вот это вот скопируем

148: И вставим вот сюда. Тут мы нашли, а допустим, какую-нибудь такую мы не нашли. Видите, получили нау. То есть ещё раз у нас вот это живёт в браузере, а вот это живёт в коде и в коде мы вообще не знаем.

149: Что нам вернёт браузер, потому что какая-нибудь библиотека может условно взять и вот этот дифф нам просто удалить отсюда. И теперь мы раз такие попробуем ру найти, а его нету. И так скрипт честно говорит, ребята, вот эта функция

150: Вернуть нам нал. Соответственно, я не могу реак зарендерить, в элемент, которого не существует. Как это решается, мы заводим промежуточную константу, давайте.

151: И в неё вот этот результат засунем, видите, наводим это либо элемент, либо now. Теперь просто оборачиваем в их, если существует рут.

152: Все.

153: Вот сюда.

154: Форматирование слетает. Ну да ладно, пока поправлю. Вот. И что получается ещё раз мы находим рут элемент, если он есть, то мы говорим реакт приложение. Действуй, если нет, то ничего. Вот уже 1 файл исправили. Давайте посмотрим скольк

155: Ошибок стало, осталось.

156: Уже осталось всего 15, а было 99 на старте. Видите, как быстро мы большой пак ошибок исправили.

157: Так, это все пока не нужно. Давайте перейдём сюда. О, здесь вообще ошибок нет. Видите, в этом файле? То есть ошибки остались только там, так что у нас тут дальше идёт за данных. Так?

158: Скажите, пожалуйста, есть ли пока вопросики на текущий момент или в целом все ясно, что происходит?

159: Если вдруг кто-то со своим ноутом и может ещё нет, это в смысле нет вопросов или нет ничего не ясно.

160: Нет, надеюсь, что-то нет вопросов. Угу. Спасибо. Хорошо. Ну да, я неправильно вопрос задал. Как задал, так и получил ответ. Норм. Так, давай тогда пойдём усложняться. То есть ещё раз фиксируем, что мы сейчас понял.

161: Да, а скрипт это та вещь, которая позволяет вам не ошибаться ну ошибаться меньше то есть она проверяет ваш код ещё в момент его существования это дизайн тайм называется не runtime, а design time.

162: Вот, и тут у нас все хорошо. Давайте смотреть, где у нас остались ошибки, наверное, где-то здесь.

163: У нас фильтры, да, переходим к типизации аргументов.

164: У нас функция фильтр давайте с акарта начнём может попроще будет давайте с Апкар одни и те же ошибки по сути Апкар это функция которая принимает на вход какой-то объект, но для type script.

165: Это неизвестный объект, потому что его, мы его не объяснили, что это такое в целом это пишется. Либо вот так вот.

166: Ну, по сути, все тоже самое копируем, вставляем и, условно говоря, пишем типизацию спринг, что это строка. Давайте пока с ошибками наделаем, а потом все поправим.

167: Видите, вот здесь у нас уже

168: Формат. Вот, и у нас уже вот здесь как бы и куча ошибок ушла и вот тут их стало ещё сильно меньше. Осталось уже всего лишь 9. То есть что мы сделали мы сказали что

169: Вот эти вот аргументы соответствуют Такому типу, но это очень тяжело читается, поэтому обычно делают вот так пишут type, копируют это название и добавляют пропс, и вот он уже

170: Вот этот самый объект и есть, и теперь этот просто вставляют сюда ещё раз. Мы заводим тип апп карт, он обычно совпадает с названием, чтобы не путаться, и добавляет слово пропс внутри мы описываем какие-то аргументы.

171: Говорим, что тип вот этого объекта входящего, это вот такой. И тут мы просто рендерим уже и

172: Все отлично.

173: Так, до ошибок, наверное. Да, давайте сразу. Теперь интересный момент. У нас вот этот тип, он же используется ещё и в данных вот здесь.

174: Но пока что у нас у этого массива нет типизации никакой, это просто java script file, тут видите, двоеточия никакого нету, поэтому все подвержено проблемкам. То есть это мы создали как перейдём.

175: Чуть позже.

176: Да, я намеренно сейчас оставил везде стринги вот здесь, чтобы вы увидели потом им типовые ошибки.

177: Так, к этому чуть позже перейдём и нам нужно вот эту типизацию смотрите в чем логика поэтапно да, у нас есть a g6 оо начались проблемы уже кото?

178: Говорит, что для каждого апп карда, то есть для вот этого файла он передаёт объект с каким-то набором свойств, который он берет вот отсюда фильтра, апс, фильтра.

179: У нас берётся это фильтрация по массиву апс ups у нас как раз лежит вот здесь, то есть мы берём вот этот вот массив по нему пробегаемся и результаты его как каждый вот это вот 1.

180: Передаём вот сюда, в апп карт и тут получается проблема, потому что вот здесь, если мы наведём, он начнёт говорить, что цена не соответствует, потому что цена у нас, например, вот

181: Приходит как number, а мы пишем что это стринг или из фри, это блин, а мы пишем что это string.

182: Вот, и как мы это будем решать? Во первых, мы можем завести. Ну давайте прям здесь наверное приложение небольшое. Заведём файл. Types ттс.

183: Вот эту штуку отсюда вытащим, вставим сюда и напишем слово экспорт.

184: И так как это общий файл типов на все приложение, это уже не пропс, это просто

185: Ну как это скорее назвать?

186: Давайте вот так вот, чтоб было попонятнее. То есть это типизация для, ну, абкара есть акард, у каждого карда есть какой-то заголовок, цена и так далее. Вот эти вот все 6 наших пунктов. И теперь мы вот эту вещь можем отсюда

187: Экспортировать и вот сюда вставить.

188: То есть, смотри, что получается, мы импортируем тайп из типов. То есть, если мы нажмём вот сюда же и попадём. Здесь все хорошо, а теперь мы идём в данные вот сюда и говорим, что каждый вот этот вот объект

189: Должен быть типа апп карт. То есть это массив у нас это вот так делается. Пишем аррей, это системное слово скрипта. И в дженерике передаём ему вот этот аккарт, та ще.

190: А что получилось?

191: Raye это вот эти вот наши скобочки вот ray. Блин рей это массив. Вот он начинается, вот заканчивается и содержимое каждого элемента массива должно быть вот такого плана то есть мы это присвоили и

192: Тут все хорошо, кроме того, что нас начинают ругаться, да что цена

193: Мы здесь пишем намбер, ну, число, а вот здесь оно типизировано как строка. Видите, прайс, прайс это string, а мы пишем намбер. И если мы как бы сделаем вот так вот, то все хорошо, но

194: Это неправильно, потому что исправлять нужно вот эту типизацию, то есть мы в неё заходим и говорим, что прайс это number.

195: Вот у нас уже все ошибочки ушли, кроме из фри, а из фри это Булин. То есть мы заходим сюда типы и говорим, что это Булин. И теперь опа, у нас чёткая типизация, да, у нас обкат.

196: Берет наши типы, чётко их проверяет и все нормально. Рендерит у нас аджи икс берет типизацию для каждого абкара из вот этого списка.

197: И он проверяет, и все хорошо. Почему? Потому что мы из этого массива и из этого компонента ссылаемся на один и тот же тип. То есть вот он лежит. И тут даже, видите, 4 референса появилось.

198: Показано, где он используется. Вот он импортируется вот тут он используется привьюшки можно сразу смотреть двойной клик сюда делает переход. Так

199: Сейчас посложнее стало понятно пока что происходит.

200: Нет вопросов.

201: Ещё раз на руках, на пальцах. Да, мы говорим, что у нас компонент должен поддерживать определённый тип и данные для этого компонента определённого типа. И мы делаем единый источник правды. Вот в этом файле тайп ттс говорим, что вот типиза,

202: Вот этого массива, она вот такая и типизация нашего компонента, она тоже такая же. И мы просто ссылаемся на одно и то же определение с 2 разных мест. То есть у нас единый источник правды.

203: Мы меняем в 1 месте, сразу видим результат везде.

204: Так, а сколько нам в целом ещё осталось?

205: Сейчас пробегусь. Ага. Тут бы, конечно, хотелось сейчас, чтобы вы

206: Все это дело попробовали сами, насколько я понимаю, то интернета нет, то ещё чего-то и воркшопа не получится.

207: Аида, я правильно понимаю, да, что ничего не изменилось?

208: Так, кто-то, а кто-то повторяет, слушайте, офигенно, если кто-то повторяет, напишите, пожалуйста че-нибудь получается или че-нибудь не получается. Ну а я сейчас и не планировал, чтоб все успевали. Я как бы логик.

209: Такая была, что я объясняю, а потом мы, типа, все делаем, как раз вот сейчас было время, если кто-то сейчас за мной повторяет, то

210: Давайте я вам дам минут 10 до повторить, тогда оставлю на экране, сейчас вот эти вот то уберу.

211: То есть сам тип вот такой сюда его сдвинул, так как импортируется оо, все, что нужно здесь нам ещё вот так.

212: Вот так же можно сделать то сами импорты, типы.

213: Так, наверное.

214: То есть самое важное, да, что вы.

215: Здесь, по сути, ничё мы не меняли. Кстати, да, нам тут не надо, вот здесь надо.

216: То есть важно, да, что у нас есть тайпс вот таким объектом мы его пишем экспорт, далее мы его подцепляем для Апсов и ставим рей от этого типа и его же мы

217: Импортируем вот здесь вот. А все.

218: Давай чуть чуть масштаб уменьши, наверное, чтоб влезло.

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

220: Маргарит, да только у тебя не хватает ееще селекта вот такого.

221: Так, сейчас запущу.

222: Вот такого ещё не хватает у тебя. А так, да, вот эта штука, вот эта. Хорошо. Если все работает, то молодец.

223: Так.

224: Все, давайте оставляю вас с этим экраном и попробуйте пока повторить.

225: Если есть вопросы, то задавайте, пишите лучше голосом, а то я не вижу чатик.

226: А, Маргарита, ну, то, с чего я начинал то что?

227: Видим, обновился вскод. Раньше такого не было, когда нажимаешь вот на эту ссылку, она открывается прямо здесь, поэтому мы просто берём её, копируем и открываем её. Вот тут. Ну, в целом можно

228: Как бы в vscode работать я думаю разницы никакой, только здесь есть дету который вам помогает разбираться что к чему в с коде этого нет.

229: Если открыть, то тут непонятно, как его дебажить.

230: Вот, вот так, да, через 3 точки можно, видимо, вот это открыть.

231: Открывается в другом окошке.

232: А это видимо для ишк че то понапридумывали.

233: Ну да.

234: Так, ну давайте, кто сейчас делает? Напишите, пожалуйста. Плюс, если что-то получилось, это будет нифига себе. Ну или вопросики, если что-то не получается, можем прям сейчас и порешат.

235: Сколько у нас время ещё?

236: Маргарита, у тебя получилось все.

237: Очень круто. Фига, Рома, Вадим, спасибо.

238: Ну, тогда идём дальше.

239: Здорово, молодцы.

240: Так что у нас дальше это мы описали минимальные типы, и давайте пройдёмся по типам скрипта, какие у него есть свои собственные, условно говоря, которых нет в java скрипте, ну вот это вот общий, да.

241: Все что есть в скрипте оно есть и в тайпскрипте, но у type script есть ещё 2 своих типа это энни и unknown как бы и то и другое это неизвестно что, но есть небольшая разница есть.

242: У вас ne такой локальный фикс, который вот так можно, например, прайс. Да, мы пишем. Эни, давай тогда увеличу уже.

243: И anne это что угодно, да, с английского переводится, и теперь я могу в прайс вот здесь вот написать.

244: Хочешь строку, хочешь андефайнд андефайнд, хочешь на тот скрипт не будет ругаться. Это такая временная мера для того, чтобы что-то быстренько пофиксить, а потом вернуться и доделать нормально, но это как?

245: Понимаете, какой-то, ха, то есть если мы внедряем типизацию для проверок, то тут мы по сути нарушаем. А ещё бывает тип, ну и давайте дальше уже, да, к чему это ведёт? Если у нас стоит, то где мы

246: Тут.

247: Price мы поставили вот прайс.

248: И, условно говоря, видите, прайс, нет никакой типизации. То есть, так как это эникрипт вообще не знает, какие методы. Допустим, я хочу обрезать там и сделать какой-нибудь там, не

249: Можно, да, какой-то метод вызвать. Вот скрипт говорит, я вообще ничего не знаю, потому что это anne. То есть если мы возвращаем сейчас на number, то у прайса появляются методы, это подсказки, которые

250: Нам помогают, поэтому any это такой хак, который можно объявить, но лучше не делать, но просто вы должны о нём знать. И 2 вариант это ном.

251: Это почти тоже самое, но наоборот, если any разрешает быть чем угодно. То есть я могу быть и bully андефайнд на чем угодно, да, то unknown. Это я не знаю, что мне может прийти.

252: И, условно говоря, когда у вас на странице какое-нибудь взаимодействие с бэкендом или с какой-нибудь другой библиотекой, то слепо доверять этому нельзя, нужно к этому относиться как к unknown типа, я не знаю, что я получу и дальше, когда мы получаем в коде вот эти вещи, то есть

253: Мы тут тоже можем написать что угодно, но так как это unknown, то мы тоже не можем использовать дальше ничего, блин, тут, наверное, не очень хорошо объясняю. У вас, наверное, кле.

254: Что оно, что anny это как будто бы одно и то же. Да, вот в чем разница, смотрите.

255: И давайте для вот 3 поставим.

256: X фри вот в чем разница, видите, для any вот у нас x фри поставлен как ne скрипт, говорит пиши че хочешь, мне вообще все равно, может, после этого ещё что-то написать, не знаю.

257: Ещё что-то, да, и так далее. И скрипт говорит, ты декларируешь энни, значит, сам за это отвечаешь. То есть я тебе тут не помощник, а вот с ноном пока оставлю. То есть он говорит то, что, а, а, не существует, потому что я не знаю,

258: Что это ты мне определи, что такое?

259: Но и тогда я смогу и так, давайте, давайте покажу, как с этим можно дальше работать. Например, у нас есть какой-нибудь условно ответ.

260: Да, это оно так. Даже напишем кент ансер.

261: И пусть это будет пустой объект на старте. И дальше мне, допустим, из этого объекта нужны, а я ожидаю, что тут могут быть, не знаю, нейм стринг, например, должно мне прийти. Да, и я хочу из этого поля.

262: Сделать вот это поле, вытащить, но я не могу почему? Потому что нету проверки и для таких вещей пишут, называется type гварды.

263: Чек из бэкенда, то есть функция, которая проверяет, а валидный ли это бэкенд ответ, надеюсь, сейчас не ошибусь. То есть мы говорим, что какой-то в эту функции

264: Изначально оно, оно неизвестное, а на выходе мы должны получить, что подтверждение велью это давайте напишем.

265: Type норма лансер?

266: Равно вот эту фигню сюда.

267: Мы говорим, что на выходе мы хотим получить так это тогда убираю. Уже не нужно.

268: Допустим, 0 из вот пишут вот такие хелперы, то есть функция, которая принимает на вход велью в виде анона и

269: Возвращает она проверку, что вот этот велью, который пришёл, он соответствует какому-то типу. Ну, в данном случае вот мы хотим знать, что у нас есть поле строка и как мы это проверяем, да, так как это none нам сначала нужно, да, возвращает

270: Настроили фолс, соответственно. Дальше что если

271: Вот вызов этой функции что-то нам возвращает.

272: Не знаю.

273: Давайте пустой объект отдадим, то вот здесь это уже ругаться не будет. Так странно сейчас, если

274: Почему оно?

275: Так что я делаю не так?

276: Проверяю сам себя.

277: Р. Это более если.

278: Так что-то я не пойму, что я делаю не так. То есть мы говорим, что есть тип. Я утверждаю, что эта функция вернёт true если true велью это значит у нас такое.

279: Объект.

280: А, ну да, передать надо вот этот сюда.

281: Все это не нужно. То есть, видите, у нас есть backend трансфер, заведённая константа, она пришла с бэкенда, и неважно, что в ней лежит. И если я просто обращаюсь к полю, то мне так скрипт говорит, я не могу

282: Тебе вернуть, потому что я ничего про это поле не знаю. Мы пишем хелпер, который получает на вход. Этот самый трансфер, как unknown, и на выходе мы декларируем, является ли он вот такого типа и теперь.

283: 3 уже на нашей совесть на уровне java script мы должны написать полноценную проверку, то есть это вот true или false она должна вернуть ну как это по правильному должно быть значит, 1 мы проверяем.

284: То объект ли это вообще.

285: Мы говорим, что type of very равно обжект, и вы знаете, что null это тоже объект, если

286: Пишем.

287: Если мы напишем

288: Так, на то это будет объект. То есть если у нас придёт нал от Кенда, то это будет фальшивая проверка, поэтому и велью не равен null, то есть мы

289: Проверяем, что является ли велью объектом уже половинка, да и возвращаем как бы true или false. И 2 нам нужно проверить, а есть ли в этом объекте поле name, и мы возвращаем.

290: Что из object и поле name in велью, вот это полноценный хелпер, правильный с точки зрения java script. То есть что он делает, он проверяет, что велью при

291: Пришедший это объект, он не now, и в этом объекте есть поле name, и тогда это true и, соответственно, скрипт говорит, что окей, я проверяю что-то хелпер, засовываю пришедший объект.

292: Если он говорит, что все в порядке, значит, у него есть поле name. Это я вам сейчас рассказал про

293: Встроенные типы тайпскрипта так пока нету, но ещё раз стараемся да что anny это как временный фикс, который обязательно нужно поправить, никогда такой код оставлять нельзя, а unknown.

294: Для тех вещей, которые мы в реальности не знаем, что придёт к нам в рантайме.

295: Так, а, ну массив то мы уже типизировали, да, кстати, вот есть такой кейс написать, вот, вот эта запись идентична вот такой, то есть это массив карта.

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

297: Ничего, то есть тут как-то более очевидно.

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

299: Так, так, так, что дальше что это даёт?

300: Ну, как бы даёт это меньшее количество ошибок, понятное дело. То есть мы не можем здесь ошибиться, не можем ошибиться ни в типизации данных, ни в использовании. То есть дальше мы когда используем какие-то наши пришедшие, я

301: Допустим, не могу написать дискрипшн плюс строку строкой могу плюс.

302: Так, че могу?

303: Строгий, что ли? У нас ещё прайс.

304: Так, а price при вот например, да, и говорит, что нельзя более сложить с намбером, типа это невалидное поведение, мы получаем строгость вот такую ещё.

305: Ну, как бы да, ошибки не долетают до прода, вы их ловите в момент создания приложения, а до прода доезжает уже все без ошибок.

306: Так это мы тоже уже разобрали типизация пропсов. То есть мы заводим тип и присвоим ему к компоненту, и компонент чётко знает, что он получит.

307: Типами, да, это пишется вот так. То есть, собственно, сам объект, который и к нему присваиваем, что именно тоже уже прошли типизация стейт, давайте ещё, да, с фильтром разберёмся, а

308: О, смотрите, проблема у нас же ещё вот здесь нету. А что такое я?

309: Ошибки нет, чек. Да у нас ошибки здесь ещё. Ой ой ой, вот это дело. Копируем, заводим тайп филтер.

310: Props равно объект и теперь проставляем ему давайте также пока стринги все проставим, а потом просто копипастить проще.

311: И теперь говорим, что это вот у нас.

312: Вот такой объект и пошли смотреть, что не так, так он серч. Текст вот у нас есть, это самая простая ошибка. У нас чекатт должен принять Булин, а у нас и only

313: Строка, что неправильно меняем на блин, 1 ошибку исправили. Дальше у нас категорияс и по ним идёт map. То есть категорияс это массив, а я говорю, что это строка, это неправильно. Категорияс у нас

314: Этой массив строк.

315: Это исправили и осталось у нас только 3 хелпера теперь, которые говорят, что типа ты меня стрингом считаешь, а я вообще то функция, типа, я не согласен с этим. Все валидно. Значит, как типизируется функция и что?

316: Возвращает, допустим, пока строку, то есть такая типизация. Говорю о том, что это функция, которая вернёт пустую строку. И опять же, она ругается о том, что у меня есть аргумент. То есть вот

317: Её. Вот он, текст энджайн, я что-то передаю. Да, я сейчас это сотру.

318: То вроде все валидно, но я передаю туда значение, это значение. У нас строка.

319: То есть вот здесь вот должна быть.

320: Спринг и мы везде копируем, так что не так. Ага. А вот для вот этой функции он мы получаем не string, а Булин. То есть в эту функцию ко кликом на неё нажимаем, попадаем сюда.

321: И смотрим вот сюда типизацию. Да, у нас були, а не строка. Вот теперь, если нету ошибок, давайте проверим. Так, 3 ошибки у нас осталось где?

322: Идём в него.

323: Так что у нас не так.

324: Сейчас будем разбираться.

325: Ага, ага, это что у нас она принимает?

326: Текст на входе, то есть строку.

327: Так.

328: Это получает тайп войд. Ага. У нас, может быть, ещё, ну, начинаем разбираться, да, что это, реакторский, как бы, нотация.

329: Возвращает нам пустую стро. А, ну да, там дурак сейчас вот здесь фильтры, я вот здесь, конечно, не исправил. То есть нам вот эта функция на выходе ничего не возвращает, а у меня стоит пустая

330: Я вот здесь пишу войд это та скрипт нотации, она в джесе тоже есть слово void, но его как бы мало используют это по сути как undefined можно писать и если не ошибаюсь, вот так. Нет, нельзя.

331: Вот и теперь, видите все, у нас ошибок нету.

332: Все, ни 1 ошибки. Все в нашем приложении отлично работает. И давайте ещё немножко про типизацию собственно состояния. Что там дальше? Да, это дженерики. То есть, смотрите, у нас стейт используется 3 раза.

333: Строки здесь для блин, здесь для строки мы вот здесь вот можем написать

334: А что же будет у нас на выходе, и это позволяет нам жёстко типизировать, то есть если мы так напишем, то уже получается, что undefined и мы так не можем.

335: А мы говорим, что

336: Вот в таком вызове смотрите первичное значение мы говорим, что с текст это undefined почему? Потому что мы вот сюда ничего не передали, ставим строку, все хорошо и а можно написать, допустим, вот так вот, или number

337: И тогда вот здесь это будет валидно вот так вот проставить. Вот тут начинается, видите, проблема, что у намбера нету функции 3.

338: И также со временем стал гораздо умнее, чем раньше. То есть раньше вот так вот писать нельзя было. В смысле, вот, вот так, потому что он ничего не понимал, а теперь он, по сути, в generic автоматом сам выводит, он смотрит первичное значение, это как написать?

339: Ааа, равно строка какая-то. А потом сказать, что давайте, чтоб можно было переопределять и are равно. Вот он говорит, так нельзя, потому что, а это задано.

340: Строка и видите, хотя я не пишу вот так вот, что это string.

341: Что в этом случае он говорит number число нельзя присвоить к строке, то без этого стринга он все равно это понимает, он сам выводит сейчас он достаточно умный уже скрипт он.

342: Понимает, что вот эта вот типизация, она не сильно нужна, просто вы должны об этом знать, как с этим работать. Вот, и если напишу стринг сюда, то, конечно, что-то начнёт ломаться. Во первых, тут, во вторых, тут

343: То есть это можно дописать, но не обязательно, если у вас полностью совпадение, да, то есть для

344: Этого только строка, для этого только Булин, для этого только строка.

345: Так, так, это прошли про дженерики я говорил уже.

346: Так, это в целом так, так. А, ну в общем, да, тогда финализирую. И готов подождать, если кто-то че то сейчас сделает, да, если ошибок много, идём от общего к частному, смотрим на верхнеуровневый компонент, то есть в нашем

347: А это как бы такой гайд по фиксу ошибок у нас начинается. Отсюда делаем, чтобы в нём не было красного. Потом здесь, потом здесь, а потом уже тут.

348: Так, ani используем только временно и потом any заменяем если что и ещё раз да, фиксируем что мы сегодня прошли тай скрипт это не самостоятельный язык, это java script.

349: Поверх него просто типы в определённом синтаксисе. И, да, типы описывают форму данных. И действительно, сначала это может быть немножко непонятно и сложно, но потом ошибок становится меньше. Видите ли, мы там буквально чуть Чут.

350: Исправили и сразу там - 50 ошибок, но потом становится легче, когда все это понимаешь. Так, у нас че, осталось уже не так много времени. Давайте тогда. Так что там вот сюда, сначала вот сюда.

351: Значит, ваше домашнее задание сделать то, что мы сделали сегодня, кто делал на уроке. Молодцы. И, собственно, да, теперь время для ваших вопросиков осталось. Есть ли они у вас?

352: Может кто-то что то пытался делать вместе со мной, что-то не получается.

353: Нет вопросов круто.

354: Если кто-то хочет сейчас доделать что-то дотипа ь можем подождать, напишите если кто-то хочет, если нет и нет других вопросов, то не вижу смысла вас задерживать более.

355: У вас все равно воркшоп нормальный не получается.

356: Давайте так. Если кто-то собирается сейчас что-то доделывать и хочет, чтобы я подождал, напишите плюсик.

357: Пока никто. Ну, ясно. Ну, раз вопросов других нету, да, и спасибо, что ответили. Тогда я с вами прощаюсь. Завтра будет, завтра будет, что среда, и

358: Если не ошибаюсь, у меня завтра.

359: С вами сессия вопросов, ответов. Сейчас я это проверю. Так, да, да. Завтра в 5:30 приходите с вашими вопросиками.

360: И 2 группа у меня тоже завтра.

361: С утра 12, 10, как сегодня, если кто-то че то не понял, хочет ещё раз зафиксировать, можете прийти завтра тоже.

362: И таким образом, да, тогда я с вами прощаюсь всем.