要求至少有一个属性传递给组件[typescript][duplicate]

Question

快速问题 - 假设我有一个这样的组件：

interface ComponentInterface {
    nameA: string;
    nameB?: string;
}

const Component: React.FC<ComponentInterface> = (props) => {
     const { nameA, nameB } = props 
     const name = nameB || nameA;

     return <div>Hello World! Name: {name}</div>
}

如果我们不传递 nameA，有没有办法在 Typescript 中强制使用 nameB？

写起来感觉不好

这是一个过于简化的ofc版本。提前泰！




Answer 1

是的，您可以使用联合类型：

interface Props1 {
    nameA: string;
    nameB?: string;
}

interface Props2 {
    nameB: string;
}

type Props = Props1 | Props2

意思是，如果您传递名称 A，则名称 B 是可选的。但是，如果您不传递名称A - 则需要名称B。