Я хочу написать функцию, которая возвращает мне компонент, завернутый в другой. Функция, которую я пытаюсь написать, похожа на приведенную ниже в JavaScript.
function GetGroup({ name, text, isRequired, ...props })
Здесь name, text и isRequired получаются из переданных аргументов, а другие отправляются другому компоненту как props.
Как это написать на TypeScript?
Итак, во-первых, Object Rest/Spread — это предлагаемая функция ECMAScript, которая находится на пути к стандартизации, достигнув стадии 4, и находится в процессе официального принятия.
Как вы знаете из его использования, он делает работу с простыми объектами JavaScript невероятно гибкой.
Информация о типизации функции доступна в TypeScript 2.1. документация. Как там очень красноречиво сказано:
Остатки объекта двойственны разворотам объекта, поскольку они могут извлекать любые дополнительные свойства, которые не получаются при деструктурировании элемента:
И действительно, на самом деле в игре есть две особенности, одна дополняющая другую.
Отдых объекта
Когда используется часть функции Rest, она улучшает деструктурирование объекта, позволяя нам собрать остальные свойства в новый объект, состоящий из них.
Мы можем написать аннотацию типа так же, как и для любого другого значения. Например
interface GroupProperties {
name: string;
text: string;
isRequired?: boolean;
values: string[];
flagged: boolean;
}
function Group({ name, text, isRequired, ...rest }: GroupProperties) {
console.log(rest);
}
Это информирует систему типов о том, что name и text относятся к типу string, а is required относится к типу boolean. Кроме того, система типов знает, что rest имеет два свойства, values и flagged типов boolean и string соответственно. Выводится тип rest.
Разброс объекта
Когда используется часть функции Spread, она улучшает построение объекта, обеспечивая декларативное построение объекта из нескольких источников, легкое создание производных, а также простое отмену определения и переопределение.
Система типов также понимает значение выражений Spread и определяет типы, которые они оценивают.
const o = {x: 1, y: 'hello'};
const o1 = {
...o,
y: 1
};
В приведенном выше примере o1 имеет тип {x: number, y: number}.
function Group({ name, text, ...}: {name: string, text: string, ...})
- person BallpointBen; 14.06.2020
function GetGroup({ name, text, isRequired, ...props }: { name: string; text: string; isRequired: boolean; other: number; arg: string }) {
props.other // number
props.arg // string
}
TypeScript просто добавляет типы... а name, text и isRequired являются обычными аргументами. props, с другой стороны, остальные аргументы. Итак, какими бы ни были оставшиеся аргументы, предполагается, что это остальные объявленные типы.
