Деконструкция реквизита из компонента React с использованием Typescript и интерфейса Union

Question

Мой интерфейс Props разделен на базовый интерфейс и два типа объединения:

interface BaseProps {
  ...
}

interface ControlledInput extends BaseProps {
  value: string;
  onChange: ...;
}

interface UncontrolledInput extends BaseProps {
  defaultValue: string;
  ref: string;
}

export const TextInput:
  React.SFC<ControlledInput | UncontrolledInput> = ({
  type,
  label,
  value,
  ...rest
}) => {

Однако деконструкция значение дает мне массив, так как он не существуетна UncontrolledInputProps.

Я считаю, что мне понадобится типографская защита, что-то вроде:

if (typeof rest.value === 'string') {

Я действительно не могу обернуть ее вокруг.Любая помощь приветствуется!

Answer 1

Нашел ответ в официальных документах: http://www.typescriptlang.org/docs/handbook/advanced-types.html

Таким образом, тип для написания выглядит следующим образом:

export function isControlled(input: ITextInputControlledProps | 
ITextInputUncontrolledProps):
  input is ITextInputControlledProps {
    return (input as ITextInputControlledProps).value !== undefined;
}

Тогда в моем компоненте я могу перейти:

if (isControlled(rest)) {
  const { value, onChange } = rest;
  valueProps = { value, onChange };
} else {
  const { defaultValue, ref } = rest as ITextInputUncontrolledProps;
  valueProps = { defaultValue, ref };
}