Forwarded from Полка Разработчика
📖 Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, Python, Django, and Docker, 2nd Edition
Автор: Rod Stephens, 2022
Описание: Изучите, что могут предложить React, Node, Python, Django, TypeScript, Webpack и Docker по отдельности, и как они все вместе подходят для разработки современных приложений.
Вы начнете с создания прочного фундамента знаний и быстро расширите его, создав три различных реальных приложения. Это не просто простые, надуманные примеры, а реальные приложения, которые вы можете установить на свои серверы и использовать в реальных условиях. Вы также поймете, как можно использовать Docker для запуска приложений, которые вы создаете, ясным и четко определенным способом, и все это поможет вам перейти к созданию более продвинутых приложений самостоятельно.
• Скачать книгу из архива
• Стоимость в магазине
📚 Полка Разработчика |#ENG #TypeScript #React #Node
Автор: Rod Stephens, 2022
Описание: Изучите, что могут предложить React, Node, Python, Django, TypeScript, Webpack и Docker по отдельности, и как они все вместе подходят для разработки современных приложений.
Вы начнете с создания прочного фундамента знаний и быстро расширите его, создав три различных реальных приложения. Это не просто простые, надуманные примеры, а реальные приложения, которые вы можете установить на свои серверы и использовать в реальных условиях. Вы также поймете, как можно использовать Docker для запуска приложений, которые вы создаете, ясным и четко определенным способом, и все это поможет вам перейти к созданию более продвинутых приложений самостоятельно.
• Скачать книгу из архива
• Стоимость в магазине
📚 Полка Разработчика |#ENG #TypeScript #React #Node
Forwarded from IT Stack | Technologies
Процесс компиляции TypeScript - JavaScript
- Начинаем с написания исходного кода на TypeScript. Это может включать в себя классы, интерфейсы, типы и другие особенности TypeScript.
- Исходный код TypeScript компилируется с помощью компилятора TypeScript (TSC). Этот процесс можно запустить, например, командой tsc filename.ts.
- Компилятор TypeScript преобразует код TypeScript в чистый JavaScript. Все типы и специфические для TypeScript конструкции удаляются, оставляя чистый JS-код, который можно выполнить в браузере или среде выполнения Node.js.
- Полученный JavaScript код можно теперь запустить в любом JS окружении. Он полностью совместим с браузерами и Node.js.
#compile #typescript #javascript
- Начинаем с написания исходного кода на TypeScript. Это может включать в себя классы, интерфейсы, типы и другие особенности TypeScript.
- Исходный код TypeScript компилируется с помощью компилятора TypeScript (TSC). Этот процесс можно запустить, например, командой tsc filename.ts.
- Компилятор TypeScript преобразует код TypeScript в чистый JavaScript. Все типы и специфические для TypeScript конструкции удаляются, оставляя чистый JS-код, который можно выполнить в браузере или среде выполнения Node.js.
- Полученный JavaScript код можно теперь запустить в любом JS окружении. Он полностью совместим с браузерами и Node.js.
#compile #typescript #javascript
Type Guards - это выражения, проверяющие тип в runtime. Они позволяют сузить тип переменной в блоке кода.
typeof проверяет тип значения во время выполнения. Если val - строка, выполняется первый блок, где доступны строковые методы. Иначе val считается числом, и доступны числовые методы.
function processValue(val: string | number) {
if (typeof val === "string") {
console.log(val.toUpperCase()); // val имеет тип string
} else {
console.log(val.toFixed(2)); // val имеет тип number
}
}
instanceof проверяет, является ли объект экземпляром определённого класса. Если animal - экземпляр Dog, вызывается bark(). В противном случае считается, что это Cat, и вызывается meow().
class Dog {
bark() {}
}
class Cat {
meow() {}
}
function makeSound(animal: Dog | Cat) {
if (animal instanceof Dog) {
animal.bark(); // animal имеет тип Dog
} else {
animal.meow(); // animal имеет тип Cat
}
}
isFish - это пользовательская функция-проверка типа. Она проверяет наличие метода swim. Если метод есть, функция возвращает true, и TypeScript считает pet объектом типа Fish. Иначе pet считается Bird.
interface Fish { swim: () => void; }
interface Bird { fly: () => void; }
function isFish(pet: Fish | Bird): pet is Fish {
return (pet as Fish).swim !== undefined;
}
function move(pet: Fish | Bird) {
if (isFish(pet)) {
pet.swim(); // pet имеет тип Fish
} else {
pet.fly(); // pet имеет тип Bird
}
}
#frontend #react #typescript
Please open Telegram to view this post
VIEW IN TELEGRAM
В этом видео рассмотрена одна из ключевых тем в TypeScript — Дженерики (Generics). Вы узнаете, как использовать дженерики для создания универсального и переиспользуемого кода.
Мы подробно разберем:
- Примеры работы с дженериками на функциях, классах, интерфейсах, типах, компонентах и хуках.
- Условные типы (conditional types) и ограничения через extends.
- Логику использования дженериков, чтобы вы могли применять их эффективно и уверенно.
Дженерики — это основа современного программирования в TypeScript, позволяющая писать чистый, безопасный и гибкий код. Умение работать с дженериками помогает создавать сложные и масштабируемые проекты.
После просмотра этого видео вы сможете:
- Разрабатывать универсальные функции и компоненты.
- Переиспользовать код без потери строгой типизации.
- Понимать сложные структуры и писать более читаемый и надежный код.
Этот курс подходит для всех, кто хочет углубить свои знания в TypeScript и научиться писать действительно крутой код.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#typescript #frontend #generics #дженерики
Please open Telegram to view this post
VIEW IN TELEGRAM
Посмотрите видео -> Выполните задания самостоятельно.
Задание 1
Создайте функцию
createArray
с использованием дженериков. Функция должна принимать два аргумента:- Тип элемента
T
,- Количество элементов
length
— число, указывающее количество элементов в массиве.Функция должна возвращать массив из указанного числа элементов типа
T
. Все элементы массива должны быть равными null
.Напишите тесты для функции:
- Проверьте, что она корректно создаёт массивы для различных типов (`number`,
string
, `boolean`).- Проверьте, что длина массива соответствует указанному числу
length
.
function createArray(length: any): any {
// Реализуйте функцию
}
// Пример теста
const numberArray = createArray(3); // Ожидается: [null, null, null]
const stringArray = createArray(2); // Ожидается: [null, null]
Задание 2
Создайте дженерик
Box<T>
для упаковки значений. Функция должна принимать значение типа T
и возвращать объект с этим значением в свойстве value
.Напишите функцию
getBoxValue(box)
для извлечения значения из упакованного объекта. Функция должна:- Возвращать значение из объекта,
- Выбрасывать ошибку, если тип
T
не соответствует ожидаемому.Например, если тип в коробке — это строка, функция должна извлечь строку, но выбросить ошибку, если тип окажется другим.
type Box = {
// Реализуйте дженерик
};
function getBoxValue(box: any): any {
// Реализуйте функцию
}
// Пример теста
const stringBox = { value: 'Hello' };
const extractedValue = getBoxValue(stringBox); // Ожидается: 'Hello'
Задание 3
Используйте дженерики для создания функции
mergeArrays<T>(arr1, arr2)
, которая сливает два массива в один.Функция должна принимать два массива типа
T[]
и возвращать новый массив, который содержит все элементы из обоих массивов.Напишите тесты для функции:
- Проверьте, что она корректно сливает массивы для различных типов (`number`, `string`).
- Проверьте, что она сохраняет правильный тип массива.
function mergeArrays(arr1: any, arr2: any): any {
// Реализуйте функцию
}
// Пример теста
const mergedNumbers = mergeArrays([1, 2], [3, 4]); // Ожидается: [1, 2, 3, 4]
const mergedStrings = mergeArrays(['a', 'b'], ['c', 'd']); // Ожидается: ['a', 'b', 'c', 'd']
#typescript #frontend #generics #дженерики
Please open Telegram to view this post
VIEW IN TELEGRAM
В этом видео мы разберем 5 типичных задач по TypeScript, которые могут встретиться на собеседовании на фронтенд-разработчика!
- Типизация функций
- Дженерики (Generics)
- Extends, keyof, typeof
- Утилитарные типы (Utility Types)
- Маппинг типов (Mapped Types)
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #typescript
Please open Telegram to view this post
VIEW IN TELEGRAM
#typescript #livecoding #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
Вот код из видео, который вызывает вопросы:
type Status = 'success' | 'error' | 'loading';
type StatusWithBrackets = {
[K in Status]: `[${K}]`
}[Status];
💡 Что здесь происходит?
1️⃣ **[K in Status]: \[${K}]`** Мы создаем объект на уровне типов. Для каждого значения из Status ('success' | 'error' | 'loading'`) генерируются ключи и их значения. Например:
{
success: "[success]",
error: "[error]",
loading: "[loading]"
}
2️⃣ [Status]
Эта часть "вытаскивает" все значения, которые соответствуют ключам Status.
То есть:
"[success]" | "[error]" | "[loading]"
🛠️ Итог: StatusWithBrackets превращается в объединение строк:
"[success]" | "[error]" | "[loading]".
#typescript
Please open Telegram to view this post
VIEW IN TELEGRAM
На позицию Middle Frontend Разработчик
Большая часть собеседования состоит из кодинга в перемешку с теоретическими вопросами.
1. В каком порядке будут выведены логи?
console.log('1')
Promise.resolve('2')
.then((res) => {
console.log(res);
Promise.resolve('3')
.then((res) => {
console.log(res);
setTimeout(() => {console.log('4')}, 0);
})
})
.then((res) => console.log(res))
.finally((res) => {
console.log(res);
setTimeout(() => {console.log('5')}, 0);
});
console.log('6');
2. А если изменив первый Promise?
console.log('1')
Promise.reject('2')
.then((res) => {
console.log(res);
Promise.resolve('3')
.then((res) => {
console.log(res);
setTimeout(() => {console.log('4')}, 0);
})
})
.catch((res) => console.log(res))
.then((res) => console.log(res))
.finally((res) => {
console.log(res);
setTimeout(() => {console.log('5')}, 0);
});
console.log('6');
3. Что выведет этот код?
function foo() {
const x = 10;
return {
x: 20,
bar: () => {
console.log(this.x)
},
baz: function() {
console.log(this.x)
}
};
}
const obj1 = foo();
obj1.bar(); // ...
obj1.baz(); // ...
const obj2 = foo.call({ x: 30 });
obj2.bar(); // ..
obj2.baz(); // ...
4. Напиши и типизируй функцию для определения типа фигуры
type Rectangle = {
width: number ;
height: number ;
};
type Circle = {
radius: number;
};
type AvailableFigure = Rectangle | Circle;
function isCircle(figure) {
...
}
function getCircleArea(figure: Circle): number {
return Math.pow(figure.radius, 2) * Math.PI
}
function getRectangleArea(figure: Rectangle): number {
return figure.width * figure.height
}
function getArea(figure: AvailableFigure): number {
return isCircle(figure)
? getCircleArea(figure)
: getRectangleArea(figure);
}
5. Напиши нативный Pick<>
type MyPick<T, U extends keyof T> = {
[key in U]: T[key]
}
Все эти задачи мы разбирали в видео:
- 5 типичных задач по TypeScript для Frontend собеседований
- Разбор задач по Event Loop с собеседований
- 5 типичных задач по JavaScript на собеседовании
#interview
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
5 типичных задач по TypeScript для Frontend собеседований
В этом видео мы разберем 5 типичных задач по TypeScript, которые могут встретиться на собеседовании на фронтенд-разработчика!
- Типизация функций
- Дженерики (Generics)
- Extends, keyof, typeof
- Утилитарные типы (Utility Types)
- Маппинг типов (Mapped Types)…
- Типизация функций
- Дженерики (Generics)
- Extends, keyof, typeof
- Утилитарные типы (Utility Types)
- Маппинг типов (Mapped Types)…
🤯 Подборка сложных вопросов с собеседований
1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.
CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.
2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.
3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).
4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.
5. Как в runtime проверить поддержку CSS-свойства?
Альтернатива: @supports в CSS.
6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.
7. Как определить системную тему (dark/light)?
В JS:
В CSS:
8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).
9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.
Вывод: так писать нельзя, только padding: 1.5px.
10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?
Без as const тип будет number[].
11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:
Импорт типа (TypeScript 4.5+):
Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).
#собеседования #react #javascript #typescript
1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.
CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.
2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.
3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).
4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.
<base href="https://example.com/assets/">
<img src="logo.png"> <!-- Загрузится https://example.com/assets/logo.png -->
5. Как в runtime проверить поддержку CSS-свойства?
if (CSS.supports('display', 'grid')) {
console.log('Grid поддерживается!');
}
Альтернатива: @supports в CSS.
6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.
7. Как определить системную тему (dark/light)?
В JS:
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Следить за изменением темы
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
console.log(e.matches ? 'Тёмная тема' : 'Светлая тема');
});
В CSS:
@media (prefers-color-scheme: dark) {
body { background: #000; color: #fff; }
}
8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).
.container { container-type: inline-size; }
@container (max-width: 500px) {
.card { flex-direction: column; }
}
9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.
Вывод: так писать нельзя, только padding: 1.5px.
10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?
const arr = [1, 2, 3] as const; // Делаем кортеж
type T = typeof arr[number]; // 1 | 2 | 3
Без as const тип будет number[].
11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:
import { ReactNode } from 'react'; // Может попасть в бандл.
Импорт типа (TypeScript 4.5+):
import { type ReactNode } from 'react'; // Удаляется при компиляции.
Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).
#собеседования #react #javascript #typescript