提问人：Blackbetty 提问时间：10/26/2023 最后编辑：katnissBlackbetty 更新时间：10/27/2023 访问量：30
Typescript - 依赖于另一个可选属性的属性类型
Typescript - the type of property that depends on another optional property
问：
我在 React 中有一个组件
const Faq = ({ shortVersion, data }: FaqProps) => { }
使用定义的类型
type FaqProps =
| {
shortVersion: true;
data: ShortFaqData[];
}
| {
shortVersion: false;
data: ExtendedFaqData[];
};
它有效
const testDataShort: ShortFaqData[]
const testDataExtended: ExtendedFaqData[]
<Faq shortVersion={false} data={testDataExtended} />
<Faq shortVersion data={testDataShort} />
但我希望 shortVersion 不必是假的，也可以是可选的
所以我试了这个
type FaqProps =
| {
shortVersion: true;
data: ShortFaqData[];
}
| {
shortVersion?: false;
data: ExtendedFaqData[];
};
还有这个
type FaqProps =
| {
shortVersion: true;
data: ShortFaqData[];
}
| {
shortVersion: false | undefined;
data: ExtendedFaqData[];
};
它不适用于没有 shortVersion 的情况（当我传递 shortVersion 时它有效）
是否可以使 IDE 建议正确的数据类型？
答：
0赞
katniss
10/27/2023
#1
它是，有过载。这是我对你的现实世界问题的简化版本：
type Props = {
flag: true;
data: number;
} | {
flag?: false;
data: string;
};
通常，你会有这样的东西：
function Comp(props: Props) {
使用重载来描述道具（而不是依赖有区别的并集）：
function Comp(props: { flag?: false; data: string }): JSX.Element;
function Comp(props: { flag: true; data: number }): JSX.Element;
function Comp(props: Props) {
现在，您将获得正确建议的类型：
<Comp data={} />; // hover over 'data' - it's shown as `string`!
但是，我认为您不应该依赖这种解决方法。相反，您应该将此问题作为问题提交给维护者并修复它。这种行为显然不理想，应该纠正。我真的想不出为什么这是理想的行为。
希望你能把这个例子应用到你的现实世界中。
评论
0赞
Blackbetty
10/27/2023
是的，就是这样！我能够将其应用于我的情况。谢谢。
评论