Можно, и как если да, написать динамический интерфейс для React пропсов на наличие одного ключа?

Question

[igoryusha22]

Есть 2 разных интерфейса.

interface Name {
  name: string;
}

interface LastName {
  lastName: number;
}

И свойство family.

Если оно не предоставлено.

То компонент должен ожидать набор пропсов из Name.

<Component 
  name="Ivan" 
  lastName=""  // error lastName is not presented on type Name
/>

Если предоставлено, то компонент должен ожидать набор пропсов из LastName.

<Component 
  name="Ivan"  // error name is not presented on type LastName
  lastName="Fenia" 
  family={['Ivan', 'Anya']}
/>

Answer 1

[Alexandroppolus]

interface Name {
    name: string;
}

interface LastName {
    lastName: string;
    family: string[];
}

function Component(props: Name): React.ReactElement;
function Component(props: LastName): React.ReactElement;
function Component(props: Name | LastName): React.ReactElement {
    if ('family' in props) {
        return <b>{props.lastName}</b>
    } else {
        return <b>{props.name}</b>
    }
}

Comments

[Дмитрий Беляев]

зачем здесь перегрузка?

[Alexandroppolus]

Дмитрий Беляев, автор вопроса хочет, чтобы нельзя было воткнуть "смешанный" набор пропсов. То есть чтобы либо Name, либо LastName.

без перегрузки не ругается на код

<Component 
  name="Ivan"
  lastName="Fenia" 
  family={['Ivan', 'Anya']}
/>

[Дмитрий Беляев]

Alexandroppolus, для этого достаточно Name | LastName, смешенный вариант не подходит в такой тип

[Alexandroppolus]

Дмитрий Беляев,
ссылка

Answer 2

[Сергей Сунцев]

В чем проблема их объединить?

interface Name {
  name?: string;
  lastName?: number;
}

Comments

[igoryusha22]

Это не ответ на вопрос.

[edward_freedom]

1thater, твой ответ тоже не ответ, почему обьеденить нельзя

[igoryusha22]

edward_freedom, потому что постановка вопроса требует обратного?

[edward_freedom]

1thater, твой вопрос не делается двумя интерфейсами, а делается одним. И что значит ожидает? Проверяй в коде у себя и ожидай чего надо

[Сергей Сунцев]

1thater, А мне откуда знать, что это не ответ? Я не ванга.

Можешь к примеру дженериком передавать вместе с пропсами нужный интерфейс

<Component<Name>
  name="Ivan" 
  lastName=""  // error lastName is not presented on type Name
/>

<Component<LastName>
  name="Ivan"  // error name is not presented on type LastName
  lastName="Fenia" 
  family={['Ivan', 'Anya']}
/>