如何根据另一种类型正确推断类型?
How to infer type correctly based on another type?
我想将 tab
对象的类型推断为 {leftText: string, rightText?: string}
类型,当 props.group
为 true
时,推断为 {title: string}
类型,当 props.group
是 false
.
type ButtonTab =
| {
leftText: string;
rightText?: string;
}
| { title: string };
interface ButtonTabsProps {
tabsList: ButtonTab[];
group?: boolean;
}
function ButtonTabs(props: Readonly<ButtonTabsProps>) {
return props.tabsList.map((tab: ButtonTab) => {
if(props.group) {
return `${tab.leftText} ${tab.rightText}`
}
return `${tab.title}`
})
}
目前,TSC 抛出错误:
Property 'leftText' does not exist on type 'ButtonTab'.
Property 'leftText' does not exist on type '{ title: string; }'.
在您的代码中,props.group
属性与 ButtonTab
类型无关。
而且props.group
应该搬出去了。
type ButtonTab<G extends boolean = true> = G extends true
? {
leftText: string;
rightText?: string;
}
: {title: string};
type ButtonTabsProps =
| {
tabsList: ButtonTab<true>[];
group: true;
}
| {
tabsList: ButtonTab<false>[];
group: false;
};
function ButtonTabs(props: ButtonTabsProps) {
if (props.group) {
return props.tabsList.map(tab => {
return `${tab.leftText} ${tab.rightText}`;
});
}
return props.tabsList.map(tab => {
return `${tab.title}`;
});
}
interface ButtonTabText {
leftText: string
rightText?: string
}
interface ButtonTabTitle {
title: string
}
interface ButtonTabsText {
group: true
tabsList: ButtonTabText[]
}
interface ButtonTabsTitle {
group: false
tabsList: ButtonTabTitle[]
}
type Props = ButtonTabsTitle | ButtonTabsText
const renderTabsText = (tabsList: ButtonTabText[]): string[] =>
tabsList.map((tab) => `${tab.leftText} ${tab.rightText}`)
const renderTabsTitle = (tabsList: ButtonTabTitle[]): string[] =>
tabsList.map((tab) => tab.title)
function ButtonTabs(props: Readonly<Props>) {
return props.group
? renderTabsText(props.tabsList)
: renderTabsTitle(props.tabsList)
}
我想将 tab
对象的类型推断为 {leftText: string, rightText?: string}
类型,当 props.group
为 true
时,推断为 {title: string}
类型,当 props.group
是 false
.
type ButtonTab =
| {
leftText: string;
rightText?: string;
}
| { title: string };
interface ButtonTabsProps {
tabsList: ButtonTab[];
group?: boolean;
}
function ButtonTabs(props: Readonly<ButtonTabsProps>) {
return props.tabsList.map((tab: ButtonTab) => {
if(props.group) {
return `${tab.leftText} ${tab.rightText}`
}
return `${tab.title}`
})
}
目前,TSC 抛出错误:
Property 'leftText' does not exist on type 'ButtonTab'. Property 'leftText' does not exist on type '{ title: string; }'.
在您的代码中,props.group
属性与 ButtonTab
类型无关。
而且props.group
应该搬出去了。
type ButtonTab<G extends boolean = true> = G extends true
? {
leftText: string;
rightText?: string;
}
: {title: string};
type ButtonTabsProps =
| {
tabsList: ButtonTab<true>[];
group: true;
}
| {
tabsList: ButtonTab<false>[];
group: false;
};
function ButtonTabs(props: ButtonTabsProps) {
if (props.group) {
return props.tabsList.map(tab => {
return `${tab.leftText} ${tab.rightText}`;
});
}
return props.tabsList.map(tab => {
return `${tab.title}`;
});
}
interface ButtonTabText {
leftText: string
rightText?: string
}
interface ButtonTabTitle {
title: string
}
interface ButtonTabsText {
group: true
tabsList: ButtonTabText[]
}
interface ButtonTabsTitle {
group: false
tabsList: ButtonTabTitle[]
}
type Props = ButtonTabsTitle | ButtonTabsText
const renderTabsText = (tabsList: ButtonTabText[]): string[] =>
tabsList.map((tab) => `${tab.leftText} ${tab.rightText}`)
const renderTabsTitle = (tabsList: ButtonTabTitle[]): string[] =>
tabsList.map((tab) => tab.title)
function ButtonTabs(props: Readonly<Props>) {
return props.group
? renderTabsText(props.tabsList)
: renderTabsTitle(props.tabsList)
}