Question

我正在构建一个带有结构和值参数的react组件

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

其中，如果multi为true，则值为string[] | undefined类型，如果其false值为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

您应该能够通过道具的联合类型，单的特定类型和 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>;
}

反应打字稿组件的条件道具

1 个答案: