Прохождение курса по TypeScript
Моя основная цель - стать React-разработчиком. Я уже выучил JavaScript и теперь, чтобы приступить к React, я собираюсь пройти курс по TypeScript, так как он сейчас в тренде, активно используется во многих Frontend-проектах за счёт того, что позволяет писать более стабильный и понятный код, что прям очень важно для крупных проектов.
Чем эта цель может быть интересно вам? Ну, если вы тоже хотите прокачать свои навыки в TypeScript, вы сможете следить за моим прогрессом, получать советы и участвовать в обсуждениях. А ещё я буду делиться полезными ресурсами, смешными моментами и своими находками.
Так что если вам интересно, как я буду справляться с этим вызовом, хотите посмеяться над моими ошибками (и, надеюсь, научиться на них) или просто получить порцию мотивации для своих собственных целей — подписывайтесь на мою цель! ?
〰
Это часть моей общей и главной цели «Переезд в Австралию».
Критерій завершення
Пройдены все уроки из курса
Особисті ресурси
Курс "TypeScript с нуля" от Purpleschool
-
Введение
-
Настройка окружения
-
Основные типы
-
Продвинутые типы
-
Классы
-
Компилятор TypeScript
-
Generics
-
Манипуляция с типами
-
Служебные типы
-
Декораторы
-
Модульность и библиотеки
-
Порождающие паттерны
-
Структурные паттерны
-
Порождающие паттерны
-
Проект - Утилита выполнения команд
-
Обновления TypeScript
-
Заключение курса
-
Личный проект на TypeScript
Калькулятор
Висновок
TypeScript оказался куда сложнее, чем я себе представлял. Думал, будет достаточно указывать типы, но здесь оказалось ещё есть интерфейсы и генерики, а также куча перепроверок всего.
TypeScript сильно увеличивает сроки разработки и я теперь понял, почему некоторые разработчики его не любят, за сильное увеличивание размера кода, но он очень хорошо помогает в проверке кода на ошибки без запуска проекта.
Щоденник мети
Завершил свой мини-проект на TypeScript "Калькулятора нагрузки на оси тягача и полуприцепа".
Веб-приложение состоит из 3 шагов:
- На первом шаге пользователь указывает данные тягача и полуприцепа. При переключении радио-кнопок и выбора select, меняет изображение транспорта, данные по осям на изображении и пересоздаётся таблица.
- На втором шаге указывает данные паллет, которые будут грузиться в полуприцеп. Добавлена возможность добавление групп паллет и их удаление.
- На третьем шаге показывается расчёт нагрузки по осям транспорта. Пользователь может перемещаться паллеты в полуприцепе (drag and drop) и менять данные паллет в модальном окне. После изменений идёт перерасчёт нагрузки и сохранение новых данных в Local Storage.
Думал на этот проект у меня ушло 3 недели, но сейчас увидел, по последней записи, что прошло уже больше месяца. 😮
Но практика была хорошей. Узнал, как указывать типы для HTML-элементов, попрактиковался как с JavaScript, так с TypeScript. Попрактиковался с сохранением и работой Local Storage. Узнал, как работает Drag and Drop. Полностью привык к export/import.
Почему почти нигде не смог применить генераторы. Буду искать понимание как их применять в дальнейших видео мастер-классов по React и TypeScript.
〰
✨Перехожу к следующему шагу, к долгожданному курсу по React 🤩✨
Прошёл уроки по созданию калькулятора на JS от WebCademy. Переписывал код с использованием TypeScript.
Калькулятор считает ежемесячный платеж и переплату в зависимости от условий кредита.
Во время практики узнал, что при использовании DOM, элементам нужно указывать тип, как в этом примере `document.getElementById('orderForm') as HTMLFormElement`.
В ближайшие дни буду писать собственный калькулятор.
Прошёл тему "9. Служебные типы". Пройден 61% курса (94 из 156).
В уроках были разобраны типы: Partial, Required, Readonly, Pick, Omit, Extract, Exclude, ReturnType, Parameters, ConstructorParameters, Awaited.
〰
Следующими темами курса идут декораторы и другие паттерны программирования.
Для начала работы с TypeScript в React будет достаточно уже пройденных тем. Мне бы их до конца понять. 😊
Паттерны буду проходить после прохождения курса React, а может даже после трудоустройства.
По текущей цели пройду уроки по созданию калькулятора на JavaScript. При прохождение урока буду переписывать код с JavaScript на TypeScript. Затем начну создавать свой небольшой учебный проект на TypeScript.
Можешь теперь для закрепления материала челленж пройти: https://github.com/antfu/type-challenges
Прошёл тему "8. Манипуляция с типами".
В уроке про Infer в самом виде говорится, и в комментариях также написали, что он практически никогда не используется, НО один пользователь написал комментарий, что его часто спрашивают на собеседованиях. Поэтому с infer обязательно нужно разобраться. У автора комментария, infer спрашивали на трёх собеседованиях, при этом только в одной из компаний ему сказали, что один раз использовали его в своём проекте. Что ещё раз подтверждает, что для прохождения собеседования и для работы нужны совсем разные знания.
В качестве дополнительного материала смотрел видео с канала wise.js https://www.youtube.com/watch?v=SpQDK74vLKo , в котором разбираются Conditional Types и infer.
Начал понимать, почему некоторые фронтедеры не любят TypeScript. Код становится не кодом, а Франкенштейном 😊
Прошёл тему "7. Generics". Пройдено 49% курса (76 из 156).
Generics помогают избежать дублирования кода и делают его более универсальным.
Пройденные темы:
- Примеры встроенных generic
- Написание функции с generic
- Использование в типах
- Ограничение generic
- Generic в классах
- Mixins
Дополнительно посмотрел урок на YouTube ttps://youtu.be/L1ONtRnIxcY?si=K09hdKpE5SJxIsZ5
Считаю его лучшим уроком объясняющим тему Generics.
Почти половина курса заняла 19 дней, хотя планировал изучить TypeScript за 2 недели.
То ли TypeScript такой сложный, то ли я медленной учусь
Прошёл ещё одну тему "6. Компилятор TypeScript". Пройдено 66 уроков из 156.
В ней было 7 уроков про настройку компилятора в файле tsconfig.json, включения и выключения разных свойств. Рассказано, какие свойства рекомендуется включать.
В итоге в файле компилятора включены свойства:
- "target": "ES2015",
- "module": "commonjs",
- "inlineSourceMap": true,
- "outDir": "./build/js/",
- "removeComments": true,
- "noEmitOnError": true,
- "esModuleInterop": true,
- "strict": true,
- "strictPropertyInitialization": false,
- "noFallthroughCasesInSwitch": true,
- "noUncheckedIndexedAccess": true,
- "noImplicitOverride": true,
- "noPropertyAccessFromIndexSignature": true,
- "allowUnreachableCode": true,
- "skipLibCheck": true
Для React в будущем нужно будет поменять свойство "module" на другое. В курсе автор больше делает акцент на Node.js.
Вот бы все так темы быстро проходились, как эта. 😊 А то на классы ушла неделя.
Прошёл 5 тему курса "Классы".
По RoadMap React-разработчика не требовалось проходить классы, но я видел, что в некоторых вакансиях указывают необходимость знания ООП, поэтому перед темой в курсе я сначала прошёл классы в JavaScript, а затем уже перешёл к TypeScript.
В TypeScript они не сильно отличаются от обычных классов. Прям сильно не погружался в тему, выполняя разных задания вне курса, так как я не уверен, что точно мне понадобится знание ООП, но на собеседованиях уже смогу дать хоть какие-то ответы и если буду смотреть практические уроки с применением классов, смогу понимать о чём идёт речь.
Прошёл 4 тему курса "Продвинутые типы". Уже появились первые впечатления о курсе.
Курс в целом неплохой, но есть свои нюансы. Иногда автор пропускает важные мелочи. Например, при объявлении типов он использует разные разделители – запятые, точки с запятой, а иногда и вообще ничего. Пришлось это самостоятельно выяснять, что здесь чаще всего используют точку с запятой.
Ещё один момент – типы для функций. Автор задаёт типы функциям, но не объясняет, как это делать. Пришлось также самому разбираться.
В плюсы можно указать, что автор часто приводит примеры из своей практики, и это круто. Практика всегда помогает лучше понять материал.
〰
При прохождение тему Type Guards, не мог понять для чего он нужен. Чуть лучше понять его необходимость мне помог урок с YouTube-канала Purpleschool. Автор как раз записал его, так как к нему после курсов часто приходят с вопросами по этой теме.
Прошёл две темы:
- Настройка окружения;
- Основные типы (number, string, boolean, object, Array, Tuples, Enum).
Посмотрев уроки по типам, повторял всё в VS Code из уроков. Думал, что эти темы пролечу на одном дыхании.
Попросил chatGPT сделать мне задания по пройденным темам, чтобы лучше усвоить пройдённый материал и тут понял, что сам ничего не могу сделать 😱.
Объявить типы для переменных и функций не сложно, но начал тупить в способах передачи значений Tuples и Enum в функции. Даже с объявлением типов у объектов не справился. Вылезли наружу проблемы, которые не объяснялись в уроках.
Пришлось ещё раз пересматривать уроки про object, Tuples и Enum. Даже такие темы с первого раза не всегда понятны.Представляю, как люди удивляются, когда проходят курсы по программированию, относясь к ним как к просмотру сериала, и в конце не могут написать ни одной строчки кода. 😄
Андрей, не хватает ESlint. Пробежался глазами дважды по строчкам кода на скринах, но ничего не нашел. Увы.
Серый Гусь, я считал, что ошибка в задании "4. Массивы", и что chatGPT вывел слово `banana`, а по моему мнению должен был вывести `cherry`, так как при сравнении символов символ "c" больше "b". Я делал решение через метод `reduce`.
Но сейчас перепроверил, используя обычный цикл for, и оказалось chatGPT всё правильно вывел, а это моё решение было не правильным. Я в своём условие не указал, что должно происходить при равной длине.
〰
function findLongestWord(arr: string[]): string {
return arr.reduce((acc, item) => return arr.reduce((acc, item) => (acc.length > item.length) ? acc : item)
}
const words = ["apple", "banana", "cherry", "date"];
console.log(findLongestWord(words));
〰
Достаточно поставить знак ">=" и вернётся `banana`.
Извиняюсь, что ввёл в замешательство 😔
Если бы вы не обратили внимание на мой пост, я бы не узнал, что допустил ошибку. Спасибо!
