HTTP & TypeScript Flashcards

Question 1

Q

Что такое HTTP? В чём разница между HTTP и HTTPS? Из чего состоит HTTP?

Answer

A

HTTP (HyperText Transfer Protocol) — протокол для передачи данных между клиентом и сервером в интернете.
Разница между HTTP и HTTPS: HTTP передаёт данные в открытом виде, а HTTPS использует шифрование SSL/TLS.

Структура HTTP:

Запрос (Request)
* Метод: GET (получить данные), POST (отправить), PUT, DELETE и др.

*URL: Адрес ресурса (например, /index.html).

*Заголовки (Headers): Дополнительная информация (User-Agent, Cookie).

*Тело (Body): Данные (если есть, например, у POST).

Ответ (Response)

*Статус-код: 200 (OK), 404 (Not Found), 500 (Server Error).

*Заголовки: Тип данных (Content-Type), куки и др.

*Тело: HTML, JSON, картинка и т. д.

Пример использования fetch для получения данных с API: fetch(‘https://api.example.com/users’).then(res => res.json()).then(data => console.log(data));

Question 2

Q

Что означают статус-коды 100, 200, 300, 400, 500?

Answer

A

HTTP-статус-коды указывают результат обработки запроса: 100-е (информационные), 200-е (успех), 300-е (редиректы), 400-е (ошибка клиента), 500-е (ошибка сервера).

Пример обработки статусов: fetch(‘url’).then(res => { if (res.status === 200) return res.json(); if (res.status === 404) throw new Error(‘Not found’); });

Question 3

Q

Что такое CORS, и зачем он нужен?

Answer

A

CORS (Cross-Origin Resource Sharing) — механизм безопасности в браузерах, регулирующий кросс-доменные запросы. Он защищает от несанкционированных запросов, но разрешает безопасные API. Браузер проверяет заголовок Access-Control-Allow-Origin.

Пример использования fetch с CORS: fetch(‘https://api.other-domain.com’, { method: ‘POST’, headers: { ‘Custom-Header’: ‘value’ } });

Question 4

Q

Что такое REST API?

Answer

A

REST API (Representational State Transfer) — архитектурный стиль для API, использующий HTTP для работы с ресурсами. Методы: GET(получить), POST(отправить), PUT(заменить), DELETE(удалить), PATCH(частично обновить).

Пример запроса к REST API: fetch(‘https://api.example.com/users’, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({ name: ‘Alice’ }) });

Question 5

Q

Что такое preflight-запрос в контексте CORS?

Answer

A

Preflight-запрос — это HTTP-запрос с методом OPTIONS, отправляемый браузером перед сложным кросс-доменным запросом для проверки его разрешений. Сервер отвечает заголовками Access-Control-Allow-Origin и другими.

Пример использования preflight: fetch(‘https://api.other-domain.com’, { method: ‘PUT’, headers: { ‘X-Custom’: ‘value’ } });

Question 6

Q

Как защититься от CSRF и XSS на клиентской стороне?

Answer

A

CSRF (Cross-Site Request Forgery): Атака, где злоумышленник подделывает запрос от имени пользователя (например, перевод денег через форму).
Защита: CSRF-токены в заголовках/формах.

XSS (Cross-Site Scripting): Атака, где злоумышленник внедряет скрипт в страницу.

Защита: Экранировать ввод, использовать DOMPurify, избегать dangerouslySetInnerHTML.

Пример защиты от XSS: import DOMPurify from ‘dompurify’; const clean = DOMPurify.sanitize(userInput);

Question 7

Q

Какие типы запросов есть?

Answer

A

Типы HTTP-запросов: GET (получить), POST (создать), PUT (заменить), DELETE (удалить), PATCH (частично обновить), HEAD (только заголовки), OPTIONS (проверка разрешённых методов).

Пример запроса GET: fetch(‘https://api.example.com/users’, { method: ‘GET’ }).then(res => res.json());

Question 8

Q

Что такое CDN, и зачем его использовать?

Answer

A

CDN (Content Delivery Network) — сеть серверов, кэширующих статические ресурсы с ближайшего к пользователю сервера. Зачем: ускоряет загрузку страниц, снижает нагрузку на сервер, повышает надёжность.

Пример использования CDN:

Question 9

Q

Что такое TypeScript, и чем он отличается от JavaScript?

Answer

A

TypeScript — надмножество JavaScript, добавляющее статическую типизацию, компилируемое в JS. Он ловит ошибки типов на этапе компиляции, улучшая надёжность. Отличия: типы, интерфейсы, дженерики.

Пример функции в TypeScript: function greet(user: { name: string }) { return Hi, ${user.name}; }

Question 10

Q

Чем interface отличается от type?

Answer

A

interface и type в TypeScript задают типы данных.

Interface: Для объектов, можно расширять (extends) и дополнять.

interface User { name: string; }
interface User { age: number; } // Теперь { name, age }

Type: Для всего (объекты, строки, числа), поддерживает объединения (|) и пересечения (&).

type Name = string | number;
type UserWithId = User & { id: number };

Различия: interface лучше для объектов и дополнений, type — для гибких комбинаций.
Пример:

interface Car { model: string; }
type Color = 'red' | 'blue';

Пример интерфейса: interface User { name: string; }

Question 11

Q

Что такое Utility Types?

Answer

A

Utility Types — встроенные типы TypeScript для трансформации существующих типов. Например, Partial<T> делает все свойства необязательными, Pick<T, K> выбирает свойства, Omit<T, K> удаляет.</T>

Пример использования Partial: const user: Partial<User> = { name: 'Alice' };</User>

Question 12

Q

Как задать тип для объекта с необязательными полями?

Answer

A

Для объекта с необязательными полями используйте ? в интерфейсе или Partial<T>( если все поля необязательны).
?:</T>

interface User { name?: string; age?: number; }

Пример с Partial: const partial: Partial<User> = { name: 'Alice' };</User>

Question 13

Q

В чём разница между unknown и any?

Answer

A

any: Отключает проверку типов, позволяет всё, но небезопасно.
```
typescript
let x: any = 42;
x = 'text'; x.foo(); // Без ошибок, но может сломаться
```
unknown: Требует проверки типа перед использованием, безопаснее.
```
typescript
let x: unknown = 42;
if (typeof x === 'string') x.toUpperCase(); // OK
x.foo(); // Ошибка
```

Пример: fetch('url').then(res => res.json() as Promise<unknown>);

Question 14

Q

Как работает оператор as в TypeScript?

Answer

A

Оператор as указывает TypeScript, что значение имеет определённый тип.

Используется с API или DOM:

typescript
const input = document.querySelector('input') as HTMLInputElement;
input.value = 'text';

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

Опасно, если тип неверный: value as number может вызвать ошибку в runtime.

Question 15

Q

Как типизировать React-компонент с помощью TypeScript?

Answer

A

Функциональные компоненты

Используем React.FC<Props> или явно указываем тип пропсов в параметрах.</Props>

Пропсы описываем через interface или type.

Необязательные пропсы помечаем ?.

Классовые компоненты

Наследуемся от React.Component<Props, State>.

Указываем типы пропсов и состояния.

Children

Лучший тип — React.ReactNode (подходит для любого содержимого).

События

Встроенные типы: React.ChangeEvent, React.MouseEvent и др.

Пример: (e: React.ChangeEvent<HTMLInputElement>) => void.</HTMLInputElement>

Refs

useRef<HTMLInputElement>(null) + React.forwardRef для переиспользуемых компонентов.</HTMLInputElement>

Контекст

Создаём контекст с типом: React.createContext<Type | undefined>.

Проверяем undefined через хук или defaultValue.

Дженерики

Полезны для компонентов, работающих с разными типами данных.

Пример: function List<T>({ items }: { items: T[] }).</T>

Хуки

useState<Type>() — явно указываем тип состояния.</Type>

useReducer типизируем через Action и State.

React.FC добавляет тип children автоматически.

Question 16

Q

Что такое дженерик?

Answer

Study These Flashcards

A

Дженерик — это механизм в TypeScript, который позволяет создавать функции и компоненты, работающие с разными типами данных, задаваемыми при их использовании, обеспечивая безопасность типов.

function identity<T>(value: T): T {
  return value;
}
const num = identity<number>(42); // T = number
const str = identity<string>('hi'); // T = string

Для массивов:

  interface List<T> { items: T[]; }
  const numbers: List<number> = { items: [1, 2, 3] };

Используется в Array<T>, Promise<T>. Ограничения: T extends string.

Question 17

Q

Что такое кортеж?

Answer

Study These Flashcards

A

Кортеж — массив с фиксированной длиной и типами элементов.

type Point = [number, number];
const coord: Point = [10, 20]; // OK
coord[2] = 30; // Ошибка
coord[0] = 'text'; // Ошибка

Полезно для пар или координат:

type KeyValue = [string, number];
const pair: KeyValue = ['id', 1];

Кортеж проверяет порядок и длину, в отличие от Array<number>.

Question 18

Q

Что такое extends?

Answer

Study These Flashcards

A

Ключевое слово extends используется для наследования в классах и расширения типов/интерфейсов.extends используется для наследования в интерфейсах и ограничения типов в дженериках.

Для классов: class Child extends Parent → наследование методов и полей.

Для интерфейсов: interface B extends A → объединение свойств.

В условных типах: T extends string ? … → проверка типа.

В дженериках: <T> → ограничение типа.</T>

Условные типы: type IsString<T> = T extends string ? string : number;

HTTP & TypeScript Flashcards

heh (18 cards)