Типи утиліт

TypeScript надає кілька глобальних типів утиліт для полегшення загальних перетворень типів. Ці типи є загальними і дозволяють вам декларативно створювати нові типи з існуючих.

Чотири найбільш часто використовувані типи утиліт:

1. Partial<T>

Робить усі властивості типу T необов’язковими. Це надзвичайно корисно для функцій оновлення/виправлення, де абонент може надати лише підмножину полів:

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

// All properties of User become optional: { id?: number; name?: string; email?: string; }
type UserUpdate = Partial<User>;

2. Readonly<T>

Робить усі властивості типу T лише для читання. Будь-яка спроба перепризначити властивість викличе помилку компілятора під час компіляції:

interface Point {
  x: number;
  y: number;
}

const p: Readonly<Point> = { x: 10, y: 20 };
// p.x = 5; // Error: cannot assign to 'x' because it is a read-only property

3. Pick<T, Keys>

Створює тип, вибираючи лише певний набір ключів (представлений об’єднанням рядків) із типу T:

interface Article {
  id: number;
  title: string;
  content: string;
  views: number;
}

// Selects only 'title' and 'views': { title: string; views: number; }
type ArticlePreview = Pick<Article, 'title' | 'views'>;

4. Omit<T, Keys>

Створює тип шляхом видалення певного набору ключів із типу T. Це двійник Pick:

interface Product {
  id: number;
  name: string;
  price: number;
  secretVendorCode: string;
}

// Removes 'secretVendorCode': { id: number; name: string; price: number; }
type PublicProduct = Omit<Product, 'secretVendorCode'>;

5. Record<Keys, Type>

Створює тип об’єкта, ключі властивостей якого Keys та значення властивостей Type. Це надзвичайно корисно для зіставлення ключів зі значеннями, що представляють словники або хеш-таблиці (карти ключ-значення):

type Page = 'home' | 'about' | 'contact';

interface PageInfo {
  title: string;
}

// Creates a dictionary with keys 'home' | 'about' | 'contact' and values PageInfo
const nav: Record<Page, PageInfo> = {
  home: { title: 'Home Page' },
  about: { title: 'About Us' },
  contact: { title: 'Contact Us' },
};

Спробуйте самі

Вправа 1: часткове оновлення профілю

Вправа 2: Видалення чутливих полів із пропуском

Вправа 3: публічна конфігурація з вибором і лише для читання

Вправа 4: Реєстр користувачів із записом і лише для читання