TypeScript дает много утилит, которые делают разработку более гибкой и удобной. Среди них выделяются типы утилит «Partial» и «Pick», которые дают работать с объектами и их свойствами более эффективно. В этой статье мы узнаем, что представляют собой эти утилиты, как их использовать и приведем примеры их применения.

Что такое «Partial» в TypeScript?

Тип утилиты Partial используется для создания нового типа на основе существующего, при этом делая все его свойства необязательными. Это особенно полезно, когда вам нужно работать с объектами, в которых некоторые свойства могут отсутствовать.

Как работает «Partial»

Когда вы применяете Partial к типу, все его свойства становятся опциональными. Это достигается путем использования конструкции TypeScript для указания необязательных свойств:

typescript

interface User { id: number; name: string; email: string; } type PartialUser = Partial<User>; // Теперь PartialUser может содержать любое сочетание свойств User, включая пустой объект const user1: PartialUser = {}; const user2: PartialUser = { id: 1 }; const user3: PartialUser = { name: "Alice", email: "alice@example.com" };

Применение «Partial»

  1. Создание черновых объектов: часто используется при работе с формами или данными, поступающими из разных источников, где часть данных может быть неизвестной или необязательной.
  2. Обновление объектов: дает легко описывать объекты для обновления, когда только некоторые поля могут быть изменены.

Пример использования «Partial»

Рассмотрим пример, где мы создаем функцию обновления профиля пользователя, используя тип Partial:

typescript

function updateUser(user: User, updates: Partial<User>): User { return { ...user, ...updates }; } const user: User = { id: 1, name: "John Doe", email: "john.doe@example.com" }; const updatedUser = updateUser(user, { name: "Johnny Doe" }); console.log(updatedUser); // Output: { id: 1, name: "Johnny Doe", email: "john.doe@example.com" }

Что такое «Pick» в TypeScript?

Тип утилиты Pick используется для создания нового типа, выбирая определенные свойства из существующего типа. Это полезно, когда нужно работать только с частью данных объекта.

Как работает «Pick»

Утилита Pick создает тип, который включает только указанные свойства исходного типа:

typescript

interface User { id: number; name: string; email: string; } type UserPreview = Pick<User, "id" | "name">; // Теперь UserPreview содержит только свойства id и name const preview: UserPreview = { id: 1, name: "Alice" };

Применение «Pick»

  1. Создание облегченых типов: используется для создания типов, содержащих только необходимые свойства, что помогает снизить избыточность данных и уменьшить объем передаваемой информации.
  2. Типизация ответов API: полезен для типизации данных, возвращаемых API, когда только часть данных объекта нужна для конкретного запроса.

Пример использования «Pick»

Представим, что мы хотим создать функцию, которая возвращает только основные сведения о пользователе:

typescript

function getUserPreview(user: User): UserPreview { return { id: user.id, name: user.name }; } const user: User = { id: 1, name: "John Doe", email: "john.doe@example.com" }; const userPreview = getUserPreview(user); console.log(userPreview); // Output: { id: 1, name: "John Doe" }

Реальные примеры использования

Чтобы лучше понять, как утилиты Partial и Pick могут быть полезны в реальных проектах, давайте рассмотрим несколько конкретных примеров их применения.

Пример 1: форма редактирования профиля пользователя

Представьте, что у вас есть веб-приложение, где пользователи могут редактировать свои профили. Вы можете использовать Partial для создания типа данных, который будет содержать только те поля, которые могут быть изменены:

typescript

interface UserProfile { id: number; name: string; email: string; bio: string; avatarUrl: string; } type UserProfileUpdate = Partial<Pick<UserProfile, "name" | "email" | "bio" | "avatarUrl">>;

Теперь UserProfileUpdate дает указать только те поля, которые пользователь может обновить, сохраняя остальные поля неизменными.

Пример 2: фильтрация свойств объекта

Предположим, у вас есть массив объектов, и вам нужно отфильтровать их, чтобы оставить только определенные свойства. Pick может помочь в этом:

typescript

interface Product { id: number; name: string; price: number; category: string; description: string; } type ProductPreview = Pick<Product, "id" | "name" | "price">; const products: Product[] = [ { id: 1, name: "Phone", price: 599, category: "Electronics", description: "Smartphone with advanced features" }, { id: 2, name: "Laptop", price: 1299, category: "Electronics", description: "Powerful laptop for work and gaming" }, { id: 3, name: "Book", price: 19.99, category: "Books", description: "Bestseller novel by famous author" }, ]; const productPreviews: ProductPreview[] = products.map(product => ({ id: product.id, name: product.name, price: product.price, }));

Теперь productPreviews содержит массив объектов ProductPreview, содержащих только id, name и price каждого продукта.

Пример 3: типизация ответа API

Предположим, что ваше веб-приложение делает запрос к API для получения данных о пользователе. Вы можете использовать Pick, чтобы указать только необходимые свойства ответа:

typescript

interface ApiResponse { id: number; name: string; email: string; role: string; createdAt: string; } type UserResponse = Pick<ApiResponse, "id" | "name" | "email">; function fetchUserData(): Promise<UserResponse> { return fetch("/api/user") .then(response => response.json()) .then(data => ({ id: data.id, name: data.name, email: data.email, })); }

Теперь вы получаете типизированный объект UserResponse, содержащий только необходимые свойства, из ответа API.

Заключение

Утилиты Partial и Pick в TypeScript предлагают сильные инструменты для управления типами и свойствами объектов. Partial дает создавать типы с необязательными свойствами, что упрощает работу с частично заполненными объектами, а Pick помогает выделить и использовать только нужные свойства, что особенно полезно при работе с большими объектами и ответами API. Применение этих утилит делает код более чистым, гибким и удобным для поддержки.