условные реквизиты для реагирования на компонент машинописного текста

Question

Я создаю компонент реакции, который принимает структуру и аргумент значения

interface OptionFieldProps {
    structure: { name: string; multi: boolean };
    value: string | string[] | undefined;
}

, где, если multi истинно, значение имеет тип string[] | undefined, а его ложное значение имеет тип string | undefined . Я пробовал использовать дженерики, чтобы показать эту связь ...

type FieldValue <T extends { name: string; multi: boolean }> = 
    T extends { multi: true } ? string[] | undefined : string | undefined

interface OptionFieldProps <T extends { name: string; multi: boolean }> {
    structure: T;
    value: FieldValue<T>;
}

Но когда я передаю это компоненту, он говорит, что тип значения всегда string | undefined

class OptionField extends Component<OptionFieldProps<{ name: string; multi: boolean }>>{
    render(){
        const { structure, value } = this.props
        //value: string | undefined
    }
}

Как мне написать это, чтобы машинописный текст понял эту взаимосвязь?

Answer 1

Вы должны быть в состоянии достичь этого с помощью типа объединения для ваших свойств с определенным типом c для single и определенным типом c для multi .

Пример:

interface SingleProps {
  structure: { name: string; multi: false };
  value?: string;
}

interface MultiProps {
  structure: { name: string; multi: true };
  value?: string[];
}

type MyProps = SingleProps | MultiProps;

const MyComponent = (props: MyProps) => {
  const { value } = props; // string | string[] | undefined
  return <div>...</div>;
}