Typescript 如何根据其他类型正确推断类型？

当

props.group

为

true

时，我想推断

tab

对象的类型为

{leftText:string，rightext？:string}

类型，当

props.group

为

false

时，推断

{title:string}

类型

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}`
    })
}

类型按钮选项卡=
| {
leftText:字符串；
rightText？：字符串；
}
|{title:string}；
接口按钮选项卡{
标签列表：按钮选项卡[]；
组？：布尔型；
}
功能按钮选项卡（道具：只读）{
返回props.tabsList.map（（选项卡：ButtonTab）=>{
if（道具组）{
返回`${tab.leftText}${tab.rightText}`
}
返回`${tab.title}`
})
}

目前，TSC抛出一个错误：

类型“ButtonTab”上不存在属性“leftText”。 类型“{title:string；}”上不存在属性“leftText”

---

代码：

在您的代码中，

道具组

道具与

按钮选项卡

类型无关

和

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}`;
  });
}

type ButtonTab=G扩展为true
? {
leftText:字符串；
rightText？：字符串；
}
：{title:string}；
类型按钮Tabsrops=
| {
标签列表：按钮选项卡[]；
组：正确；
}
| {
标签列表：按钮选项卡[]；
组：假；
};
功能按钮选项卡（道具：按钮选项卡）{
if（道具组）{
返回props.tabsList.map（tab=>{
返回`${tab.leftText}${tab.rightText}`；
});
}
返回props.tabsList.map（tab=>{
返回`${tab.title}`；
});
}

---

在您的代码中，

props.group

prop与

按钮选项卡

类型无关

和

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}`;
  });
}

type ButtonTab=G扩展为true
? {
leftText:字符串；
rightText？：字符串；
}
：{title:string}；
类型按钮Tabsrops=
| {
标签列表：按钮选项卡[]；
组：正确；
}
| {
标签列表：按钮选项卡[]；
组：假；
};
功能按钮选项卡（道具：按钮选项卡）{
if（道具组）{
返回props.tabsList.map（tab=>{
返回`${tab.leftText}${tab.rightText}`；
});
}
返回props.tabsList.map（tab=>{
返回`${tab.title}`；
});
}

界面按钮TABTEXT{
leftText:字符串
rightText？：字符串
}
接口按钮标题{
标题：字符串
}
界面按钮文本{
小组：是的
tabsList:ButtonTabText[]
}
界面按钮标题{
组：假
tabsList:ButtonTabTitle[]
}
类型Props=ButtonTabsTitle | ButtonTabsText
const renderTableText=（选项卡列表：buttonTableText[]）：字符串[]=>
tabsList.map（（tab）=>`${tab.leftText}${tab.righText}`）
常量renderTabsTitle=（选项卡列表：buttonTabstitle[]）：字符串[]=>
tabsList.map（（tab）=>tab.title）
功能按钮选项卡（道具：只读）{
返回道具组
？RenderAbsText（props.tabsList）
：renderTabsTitle（props.tabsList）
}

界面按钮TABTEXT{
leftText:字符串
rightText？：字符串
}
接口按钮标题{
标题：字符串
}
界面按钮文本{
小组：是的
tabsList:ButtonTabText[]
}
界面按钮标题{
组：假
tabsList:ButtonTabTitle[]
}
类型Props=ButtonTabsTitle | ButtonTabsText
const renderTableText=（选项卡列表：buttonTableText[]）：字符串[]=>
tabsList.map（（tab）=>`${tab.leftText}${tab.righText}`）
常量renderTabsTitle=（选项卡列表：buttonTabstitle[]）：字符串[]=>
tabsList.map（（tab）=>tab.title）
功能按钮选项卡（道具：只读）{
返回道具组
？RenderAbsText（props.tabsList）
：renderTabsTitle（props.tabsList）
}

听起来像是希望

buttonTabsrops

成为联合类型，而不是

ButtonTab

。听起来像是希望

buttonTabsrops

成为联合类型，而不是

ButtonTab

。