需要至少一个道具传递给组件[打字稿] [重复]

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？

写<Component nameA={""} nameB={"John"} />感觉不好，我不想把nameA变成nameA?: string，因为我至少要传递一个props。

这是一个过于简化的 c 版本。提早提！

Answer 1

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

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

interface Props2 {
    nameB: string;
}

type Props = Props1 | Props2

意思是，如果你通过nameA，nameB 是可选的。但是如果你没有通过nameA - nameB 是必需的。