Partial

Тренажер по TypeScript для пользователей с начальным уровнем подготовки.

Тренажер по TypeScript

Utility Type Partial — это встроенный тип TypeScript, который делает все свойства переданного типа T необязательными. Он полезен, когда вам нужно создать объект на основе какого-то интерфейса, но заполнять все поля сразу не требуется.

Синтаксис: type PartialUser = Partial;. Теперь все поля из User в PartialUser будут иметь модификатор ?. Это часто используется в функциях обновления, где нужно передать только изменённые поля, или при инициализации объекта по частям.

Изучение TypeScript, включая такие utility types, делает ваш код более типобезопасным и выразительным. Наш онлайн тренажер с интерактивными заданиями поможет закрепить тему на практике без скучной теории.

Список тем

1. Определение типа

id: 40721_partial_01_basic

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

Нужно правильно расставить в пропуски предложенные варианты

1. У вас есть интерфейс User с обязательными полями. Вам нужно создать функцию обновления, которая принимает объект с необязательными полями, чтобы можно было обновлять только часть данных пользователя. Какой utility type следует использовать для типа параметра этой функции? — input1S

2. Вы хотите гарантировать, что при создании нового объекта конфигурации все поля, определённые в интерфейсе Config, будут переданы. Однако в самом интерфейсе некоторые поля помечены как необязательные. Какой utility type превратит все свойства в обязательные? — input2S

3. Вам нужно создать тип для объекта, который будет использоваться только для чтения — его поля нельзя изменять после инициализации. Какой utility type сделает все свойства readonly? — input3S

Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Синтаксис Partial

id: 40721_partial_02_syntax

Дополните фрагмент кода на TypeScript, чтобы создать Partial-версию интерфейса User. Partial — это утилитарный тип, который делает все свойства переданного типа необязательными. В коде пропущены ключевые элементы синтаксиса: название типа и угловые скобки. Заполните пропуски так, чтобы переменная partialUser имела тип Partial и могла содержать только часть свойств исходного интерфейса.

Заполните пропуски
interface User {
  id: number;
  name: string;
  email: string;
}

// Создаём Partial-версию пользователя
const partialUser: input1S input2S = {
  name: "Alice"
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Исправление ошибки

id: 40721_partial_03_error

В этом фрагменте TypeScript-кода допущена ошибка, связанная с использованием utility-типа Partial. Разработчик пытается присвоить переменной с обязательными полями объект, где эти поля могут отсутствовать. Найдите и исправьте одну ошибку в строке с присваиванием или объявлении типа, чтобы код стал корректным.

Найдите ошибку и исправьте
interface User {
  name: string;
  age: number;
}
 
let user: User;
let partialUser: Partial<User> = { name: 'Alice' };
user = partialUser;
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Сопоставление свойств

id: 40721_partial_04_compare

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

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
interface User {
  name: string;
  age: number;
}
interface Product {
  id: number;
  title: string;
  price: number;
}
interface Book {
  title: string;
  author: string;
  pages: number;
}
interface Car {
  brand: string;
  model: string;
  year: number;
}
interface Point {
  x: number;
  y: number;
}
{
  brand?: string;
  model?: string;
  year?: number;
}
{
  title?: string;
  author?: string;
  pages?: number;
}
{
  id?: number;
  title?: string;
  price?: number;
}
{
  name?: string;
  age?: number;
}
{
  x?: number;
  y?: number;
}
Сообщения
Проверить
Показать подсказку

5. Что допустит компилятор?

id: 40721_partial_05_predict

Проанализируйте код TypeScript с использованием типа Partial. Ниже приведено несколько операций присваивания для переменной типа Partial. Выберите все присваивания, которые TypeScript сочтёт корректными (не вызовут ошибки компиляции). Обратите внимание на допустимость свойств и их типов.

Выберите правильный вариант ответа
interface User {
  id: number;
  name: string;
  email: string;
}

let partialUser: Partial<User>;

// Присваивание 1:
partialUser = { id: 1, name: 'Alice', email: 'alice@example.com' };

// Присваивание 2:
partialUser = { id: 2 };

// Присваивание 3:
partialUser = { name: 'Bob', age: 30 };

// Присваивание 4:
partialUser = { email: 123 };

// Присваивание 5:
partialUser = {};

// Присваивание 6:
partialUser = { id: 3, name: 'Charlie', email: 'charlie@example.com', isActive: true };
Сообщения
Проверить
Показать подсказку

6. Собери функцию обновления

id: 40721_partial_06_build

Из предложенных строк соберите корректную typescript-функцию, которая принимает объект типа User и объект с частичными обновлениями типа Partial, а затем возвращает обновлённый объект. Функция должна корректно обрабатывать частичные изменения полей. Одна из строк лишняя и не должна входить в решение. Порядок строк должен соответствовать логике TypeScript: объявление типа, объявление функции, обработка аргументов и возврат результата.

Перетяните в правильном порядке строки из одного блока в другой
type User = {
    id: number;
    name: string;
    email: string;
};
function updateUser(user: User, updates: Partial<User>): User {
    return {
        ...user,
        ...updates
    };
}
    user = { ...user, ...updates };
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

7. Результат чтения свойства

id: 40721_partial_07_give

В данном задании рассматривается использование утилитарного типа Partial в TypeScript. В приведённом фрагменте кода объявлен интерфейс, создан объект с применением типа Partial, а затем выполняется чтение одного из его свойств. Определите, какое значение будет выведено в консоль при выполнении этого кода. Введите результат в поле ответа в виде одного слова или числа (например, undefined, 42, 'текст').

Что должно получиться?
interface User {
  id: number;
  name: string;
  email: string;
}

const partialUser: Partial<User> = { name: "Alice" };
console.log(partialUser.email);
Сообщения
Проверить
Показать подсказку

TypeScript: компиляция и запуск

id: 40721_compiler

Этот пример демонстрирует работу с типом Partial<T>, который делает все свойства объекта необязательными. Попробуйте: измените значения полей в объекте userUpdate, добавьте новые свойства, удалите существующие. Увидите, как TypeScript позволяет гибко обновлять объекты без необходимости указывать все поля. Экспериментируйте с разными комбинациями — создайте свой собственный интерфейс и примените к нему Partial!

TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру