需要一个参数，具体取决于是否存在另一个参数

Question

有一些React功能组件，带有几个道具。

interface Props {
data?: any;
status?: string;
}
const Component: React.FunctionComponent<Props> = ({ data, status }) => {
...
};

我希望status道具依赖于data道具，所以没有data就不能使用status

<Component status={status} /> // error
<Component status={status} data={data} /> // ok

但你仍然可以在没有status的情况下使用data，或者在没有道具的情况下完全使用

<Component data={data} /> // ok
<Component /> // ok

有可能吗？有没有一种方法可以编写满足这些要求的接口？或者其他方式？我自己也无法找到解决方案。感谢

Answer 1

您可以使用并集类型对对象进行建模，其中如果存在status和string，则data也必须存在。

type Props = {
data: any;
status?: string;
} | {
status?: never
data?: never
}
const Component: React.FunctionComponent<Props> = ({ data, status }) => {

};
const status = "ok";
const data = [{}]
let x = <Component status={status} /> // error
let y = <Component status={status} data={data} /> // ok
let z = <Component data={data} /> // ok
let u = <Component /> // ok

游乐场链接