Серия «Тайпскрипт» — Выбираем утилитарный тип

Я хотел бы начать с того, что делаю эту серию, чтобы лучше изучить и понять Typescript, поэтому не стесняйтесь поправлять меня или обращаться ко мне.

Что такое тип утилиты Pick?

Pick <Type, Keys> Создает тип, выбирая набор свойств Keys (строковый литерал или объединение строковых литералов) из Type. Другими словами, новый тип является подгруппой свойств, которые извлекаются из свойств Type свойствами Docs.

Вот как это работает:

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};
Войти в полноэкранный режим Выход из полноэкранного режима

Итак, как вы видите, мы выбрали только 2 ключа, которые нам нужны, из предварительного просмотра Todo Type.

Но как это работает под капотом?

type Pick<Type, Key extends keyof Type> = {
    [k in Key]: Type[k];
};
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, давайте разберемся с самыми сложными частями.

Key extends keyof Type Ключевое слово extends в данном случае означает, что Key должен существовать в своем родителе, а keyof Type — это родитель. Если взять в качестве примера интерфейс Todo, описанный выше, то ключами будут «title» | «description» | «completed»

[k в Key] Ключевое слово in означает, что K должен быть одним из ключей, извлеченных из Key («title» | «description» | «completed»).

Type[k] Наконец, здесь мы просто получаем доступ к типу свойства. Аналогично тому, как мы получаем доступ к значениям в объекте, давайте рассмотрим следующий пример.

interface Person {
   name: string;
   age: number;
}

// Access the type of name
Person['name'] // string

// Like saying Type[K] where Type is Person and name is K
Вход в полноэкранный режим Выйти из полноэкранного режима

Ну, вот и все, теперь вы знаете, как работает тип утилиты Pick!

Заключение

Тип утилиты Pick очень удобен, поскольку позволяет динамически конструировать новые типы из существующих,

Спасибо!

Вы можете найти меня здесь Мой Twitter

Оцените статью
devanswers.ru
Добавить комментарий