Що робить Required<T>?

TypeScriptJunior~1 хв читання

1. Що робить `Required<T>`

Required<T> - це вбудований Utility Type, який робить усі властивості типу T обов'язковими (тобто прибирає ?).

Приклад

javascript

interface User {
  id: number;
  name?: string;
  email?: string;
}

type FullUser = Required<User>;

Тепер FullUser виглядає так:

javascript

{
  id: number;
  name: string;   // більше не опціонально
  email: string;  // більше не опціонально
}

Усі поля тепер обов'язкові, незалежно від того, чи були вони ?.

2. Як `Required<T>` реалізований

Усередині TypeScript він визначений приблизно так:

javascript

type Required<T> = {
  [P in keyof T]-?: T[P];
};

Пояснення:

keyof T - прохід по всіх ключах типу T;
-? - оператор, який прибирає модифікатор ? (робить властивість обов'язковою);
T[P] - зберігає оригінальний тип значення.

3. Чим `Required<T>` протилежний `Partial<T>`

Утиліта	Що робить	Приклад результату
`Partial<T>`	Робить усі властивості необов'язковими	`{ id?: number; name?: string }`
`Required<T>`	Робить усі властивості обов'язковими	`{ id: number; name: string }`

Приклад порівняння

javascript

interface Profile {
  username?: string;
  age?: number;
}

// Partial - послаблює вимоги:
type OptionalProfile = Partial<Profile>;
// { username?: string; age?: number }

// Required - посилює вимоги:
type StrictProfile = Required<Profile>;
// { username: string; age: number }

4. Як `Required<T>` впливає на опціональні властивості

Він примусово прибирає знак ? з усіх властивостей інтерфейсу. Навіть якщо властивість була опціональною, вона стає обов'язковою при використанні Required.

Приклад

javascript

interface Config {
  port?: number;
  host?: string;
}

type FullConfig = Required<Config>;

const cfg: FullConfig = {
  port: 8080,
  host: "localhost",
}; // усе повинно бути вказано

Якщо спробувати пропустити поле:

javascript

const bad: FullConfig = { port: 8080 };
// Помилка: властивість "host" відсутня

5. Можна комбінувати `Partial` і `Required`

Іноді потрібно "повернути" обов'язковість лише частині полів:

javascript

interface User {
  id: number;
  name?: string;
  email?: string;
}

// Усі поля необов'язкові
type OptionalUser = Partial<User>;

// Лише name знову обов'язкове
type PartiallyRequired = Required<Pick<User, "name">> & Partial<User>;

Тепер name обов'язкове, а решта опціональні.

6. Приклад із практики

Використання при валідації форми:

javascript

interface FormData {
  name?: string;
  email?: string;
  age?: number;
}

function validate(data: Required<FormData>) {
  // усі поля гарантовано є
  console.log(data.name.toUpperCase());
}

validate({ name: "Tim", email: "tim@mail.com", age: 30 }); // OK
validate({ name: "Tim" }); // Помилка - email і age обов'язкові

Підсумок

Питання	Відповідь
Що робить `Required<T>`	Робить усі властивості обов'язковими, прибираючи `?`
Чим відрізняється від `Partial<T>`	Це зворотний ефект - `Partial` робить усе опціональним, `Required` робить усе обов'язковим
Як впливає на опціональні властивості	Перетворює їх на обов'язкові (`?` прибирається у всіх ключів)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.