Ну что? Погнали? JS/TS

Урок 1 (TypeScript)

Настройка окружения (NodeJS, npm, npx) и основные команды

Ссылка на видео
Методичка в notion: Окружение

Это первый урок по JS/TS. В этом уроке мы настроим окружение для работы. Также мы рассмотрим основные команды NodeJS, научимся управлять пакетами пакетами (npm - Node Package Manager) и рассмотрим npx (Node Package Execute)

00:00 - что будем делать?
01:44 - полезные материалы по JS/TS
03:01 - с чего начать изучение JS/TS?
04:13 - редакторы кода JS/TS
05:19 - консоль разработчика
06:21 - установка окружения для работы с JS/TS
06:43 - что такое NodeJS?
07:38 - основные команды NodeJS
09:29 - создание файла package.json
13:11 - установка сторонних пакетов через npm
16:07 - основные команды для работы с пакетами
18:37 - запуск скриптов из package.json
20:30 - утилита npx
22:08 - установка пакетов глобально
22:59 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 2 (TypeScript)

console.log(), точка с запятой, переменные и константы

Ссылка на видео
Методичка в notion: Hello world!!

Добро пожаловать на второй урок по JS/TS. В этом уроке мы узнаем что делает console.log(), когда нужно ставить точку с запятой (а когда можно не ставить), узнаем как писать комментарии к коду, научимся правильно создавать и называть переменные и константы

00:00 - что будем делать
00:56 - console.log()
03:22 - точка с запятой
09:05 - комментарии в JS/TS
13:23 - создание переменных
18:02 - strict mode
19:59 - var VS let
20:50 - константы в JS/TS
25:27 - как называть переменные в JS/TS
28:35 - ссылка на практику
28:59 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 3 (TypeScript)

Установка TypeScript, компиляция кода, файл tsconfig.json

В этом уроке мы узнаем чем TS отличается от JS, установим TypeScript на вашу ОС, разберем основные команды компилятора, разберем конфигурационный файл tsconfig.json и поговорим про импорты и экспорты модулей в TS

Ссылка на видео
Методичка в notion: TypeScript

00:00 - что будем делать?
00:40 - что такое TypeScript (TypeScript VS JavaScript)
05:20 - установка TypeScript
06:07 - основные команды компиляции
07:35 - инициализация проекта TypeScript (создание файла tsconfig.json)
08:38 - основнаы опции компилятора tsc
12:10 - подробный разбор файла tsconfig.json
13:50 - что такое target и какой выбрать
15:48 - что такое module и какой выбрать
20:10 - import, export, require в TypeScript
27:27 - продолжаем разбор файла tsconfig.json
29:59 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 4 (TypeScript)

Типы данных, оператор typeof, аннотации типов в typescript

В этом уроке мы познакомимся со всем основными типами данных в JS/TS, разберемся с тем, как пользоваться оператором typeof и разберем основные аннотации типов для структур данных, функций, интерфейсов и отдельных переменных

Ссылка на видео
Методичка в notion: Типы данных

Общая часть:
00:00 - что будем делать
01:45 - основные типы данных
02:15 - тип данных number
03:49 - Infinity, -Infinity, NaN
07:47 - bigint
12:08 - string
14:35 - boolean
14:35 - null, undefined
19:12 - symbol
19:50 - object
23:32 - оператор typeof

Для опытных:
25:11 - array
27:30 - tuple
28:42 - enum
31:05 - any
32:23 - void
33:32 - never
34:34 - unknown
37:12 - literal types
38:24 - union types
39:24 - type aliases
40:31 - interfaces
42:50 - intersection types
45:05 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 5 (TypeScript)

Приведение типов, generics, custom type guards

В уроке рассмотрены основные способы приведения типов в TypeScripts для примитивных типов данных, а также представлены более сложные техники для работы с интерфейсами, классами и массивами. Также в уроке затронута тема дженериков и custom type guards

Ссылка на видео
Методичка в notion: Преобразование типов

Общая часть:
00:00 - что будем делать
00:35 - явное приведение типа
01:29 - создание скрипта для запуска в package.json
03:39 - как работает явное приведение типа
06:59 - альтернативный синтаксис явного приведения типа
09:26 - конвертация через функции

Для опытных:
15:00 - interface casting
18:16 - generics (шаблонные функции) в typescript
23:09 - class casting
27:08 - array casting
30:03 - custom type guards
33:14 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 6 (TypeScript)

Математические операторы, приоритеты, инкремент/декремент

Ссылка на видео
Методичка в notion: Базовые математические операторы

00:00 - что будем делать
00:40 - основные понятия
02:24 - базовая математика (+, -, *, /, %, **)
03:25 - остаток от деления
05:35 - потеря точности при получении остатка от деления
06:37 - конкатенация строк
07:13 - унарный плюс (приведение к number)
08:19 - приоритеты математических операторов
10:07 - возвращаемое значения оператора присваивания
12:09 - сокращенная арифметика с присваиванием
16:12 - префиксный и постфиксный инкремент и декремент
23:04 - побитовые операторы
24:55 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 7 (TypeScript)

Операторы сравнения, строгое сравнение ===

Ссылка на видео
Методичка в notion: Операторы сравнения

00:00 - что будем делать
00:32 - операторы сравнения
01:48 - сравнение строк
05:45 - строгое сравнение ===
08:16 - сравнение с null и undefined
10:44 - странные результат сравнения null и 0
12:38 - несравненное значение undefined
13:43 - как избежать проблем
16:03 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 8 (TypeScript)

Ветвление if, else, else if, тернарный оператор ?

Ссылка на видео
Методичка в notion: Условное ветвление: if, ‘?’

00:00 - что будем делать
00:26 - инструкция "if"
04:18 - фигурные скобки
06:06 - блок "else"
07:13 - несколько условий "else if"
09:50 - сравнение "if" с "else if"
14:14 - преобразование к логическому типу
16:39 - тернарный оператор "?"
19:49 - несколько тернарных операторов "?"
23:54 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 9 (TypeScript)

Циклы (while, do while, for). Операторы break, continue

Ссылка на видео
Методичка в notion: Циклы while и for

00:00 - что будем делать
00:42 - зачем нужны циклы
01:15 - синтаксис цикла while
01:47 - пример цикла while
02:40 - подрбный разбор цикла while
05:55 - как написать условие для цикла while
10:02 - решаем тупую задачу
11:09 - бесконечный цикл
11:40 - задачка
12:59 - преобразование в bool внутри while
14:01 - цикл while в одну строчку
14:43 - цикл do while
18:13 - цикл for
21:28 - области видимости
24:19 - теория цикла for
25:53 - пропуск частей цикла for
28:05 - прерывание цикла через break
29:02 - пропуск итераций через continue
33:50 - break/continue после тернарного оператора
35:39 - метки для break и continue
40:53 - метки для областей видимости
42:25 - практика
42:40 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 10 (TypeScript)

Оператор switch. Группировка case

Ссылка на видео
Методичка в notion: Конструкция switch

00:00 - что будем делать
00:45 - синтаксис switch
01:38 - особенности switch
03:07 - switch без break
04:53 - группировка case
06:28 - практика
06:44 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 11 (TypeScript)

Функции. Создание, вызов, параметры, return

Ссылка на видео
Методичка в notion: Функции

00:00 - что будем делать
00:47 - для чего нужны функции
04:05 - синтаксис создания функции
04:44 - вызов функции
07:03 - поиск функций по коду
07:27 - локальные и глобальные переменные
11:22 - порядок объявление и вызова функции
12:43 - внешние переменные
14:13 - пареметры функции
15:29 - передача аргументов "по-значению"
18:11 - параметры со значением "по-умолчанию"
22:05 - вычисление параметров со значением "по-умолчанию"
23:32 - возврат значений из функции (return)
27:55 - сокращение кода с помощью return
30:58 - return без значения
31:28 - ещё один пример
32:40 - разрыв строки после return
33:32 - выбор имени функции
35:00 - одна функция = одно действие
37:37 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 12 (TypeScript)

Анонимные функции (Function Expression), callback функции

Ссылка на видео
Методичка в notion: Function Expression

00:00 - что будем делать
01:52 - Function Declaration
02:32 - синтаксис Function Expression
03:34 - функция = объект
06:52 - точка с запятой в конце Function Expression
08:05 - функции callback
12:19 - сравнение Function Declaration и Function Expression
17:23 - итоги

SemolinaCode | Chat | YouTube | Arbuzers | HowToCode | Prop

Урок 13 (TypeScript)

Стрелочные функции. Аннотации к функциям в TypeScript

Ссылка на видео
Методичка в notion: Стрелочные функции

00:00 - что такое стрелочные функции
00:53 - что будем делать?
01:43 - синтаксис стрелочной функции
03:16 - пример стрелочной функции
04:59 - стрелочная функция без параметров
06:58 - стрелочные функции в тернарном операторе
09:17 - многострочные стрелочные функции
10:51 - аннотация функции без параметров
12:12 - аннотация стрелочной функции без параметров
13:00 - аннотация функции с параметрами
14:07 - аннотация стрелочной функции с параметрами
15:36 - практика
15:50 - повторение материала и качество кода
17:25 - итоги

SemolinaCode | Chat | YouTube | HowToCode | Prop

Урок 14 (TypeScript)

Объекты, индексный тип, оператор "in", цикл "for ... in"

Ссылка на видео
Методичка в notion: Объекты

00:00 - что будем делать
00:41 - что такое объект
02:46 - синтаксис создания объекта
03:40 - добавляем информацию в объект
04:43 - аннотация типов к объекту
05:48 - получение значений по ключу "через точку"
06:42 - индексный тип
12:53 - добавление свойств в объект (3 способа)
16:21 - удаление свойств
17:33 - ключ из нескольких слов. Получение значений по ключу "через квадратные скобки"
P.S. "квадратные кавычки" обозвал как только мог. Получилось забавно
20:01 - висячая запятая
21:08 - изменение константных объектов
22:04 - вычисляемые свойства объекта
23:52 - выражения внутри ключей
24:42 - свойства из переменной
27:38 - ограничения на название ключей
29:25 - почему нельзя использовать proto как ключ
30:25 - оператор in
32:38 - перебор ключей объекта циклом for ... in
37:06 - как работает as keyof
38:49 - дополнительные материалы и практика
40:18 - итоги

SemolinaCode | Chat | YouTube | HowToCode | Prop

Урок 15 (TypeScript)

Копирование объектов (поверхностное и глубокое)

Ссылка на видео
Методичка в notion: Копирование объектов

00:00 - что будем делать
01:06 - проблема при копировании объектов (копирование по ссылке)
03:54 - сравнение объектов по ссылке
04:52 - поверхностное копирование через оператор "..." (spread)
09:11 - поверхностное копирование через Object.assign()
10:26 - глубокое копирование через преобразование к JSON
13:55 - глубокое копирование через рекурсивную функцию
15:15 - глубокое копирование через функцию structuredClone()
16:21 - глубокое копирование через метод cloneDeep() из библиотеки lodash
18:00 - сравнение всех изученых методов
20:00 - итоги

SemolinaCode | Chat | YouTube | HowToCode | Prop

Урок 16 (TypeScript)

Методы объекта, this, this в стрелочных функциях

Ссылка на видео
Методичка в notion: Методы объекта, "this"

00:00 - что будем делать
00:46 - что такое методы объекта
02 :00 - синтаксис метода объекта
03:29 - второй синтаксис создания метода объекта
04:33 - вызов метода объекта
05:30 - динамическое добавление методов объекта
07:33 - доступ в методам объекта через квадратные скобки
08:14 - отличие методов объекта от обычных функций
09:30 - this в методах объекта и обычных функциях
13:57 - this в стрелочных функциях
15:20 - доступ к внешнему this из стрелочной функции
18:00 - итоги

SemolinaCode | Chat | YouTube | HowToCode | Prop

Урок 17 (TypeScript)

Сборка мусора, Конструктор объекта, Опциональная цепочка

Ссылка на видео
Методичка в notion: То, что не попало

00:00 - что будем делать

01:00 - сборка мусора
01:30 - достижимость
02:29 - пример сборки мусора
03:04 - второй пример сборки мусора
03:35 - взаимосвязанные объекты
06:38 - недостижимый остров
07:09 - как работает сборка мусора "под капотом"

08:22 - Конструктор объекта, оператор "new"
09:38 - Проблема конструктора объекта в TypeScript
10:32 - Костыль для конструктора объекта в TypeScript
12:08 - Конструктор объекта в JavaScript
12:40 - Почему пропускаем тему с конструктором объекта в TypeScript

13:30 - Опциональная цепочка "?." для свойств
17:24 - Опциональная цепочка для функций
19:07 - Опциональная цепочка для квадратных скобок

21:03 - Итоги

SemolinaCode | Chat | YouTube | HowToCode | Prop