Javascript React-Typescript接口-从联合类型获取道具时出错

我使用react with typescript

我只需要从

prop3

|

prop4

接受一个参数。我使用的联合类型如下：

interface General {
  prop1?: boolean
  prop2?: boolean
}

interface Option1 extends General {
  prop3: boolean
}

interface Option2 extends General {
  prop4: boolean
}

type Option1orOtion2 = Option1 | Option2

如果我得到

prop3

我不希望

prop4

被接受

当我这样做时，我会得到关于这些值的错误。我在做什么

export default function({
  prop1 = true,
  prop2 = true,
  prop3 = true, // error: Property 'prop3' does not exist on type 'Option1orOtion2'
  prop4 = true  // error: Property 'prop4' does not exist on type 'Option1orOtion2'
}: Option1orOtion2) {
  return <></>
}

有什么建议吗

---

提前谢谢

这类问题可以使用函数原型来解决，函数原型用于在ts中产生过载

对于你的情况，我有两个解决方案

interface General {
    prop1?: boolean
    prop2?: boolean
}
  
interface Option1 extends General {
    prop3: boolean
}
  
interface Option2 extends General {
    prop4: boolean
}

使用函数原型来限制可以给出的参数类型。（我假设返回类型为string，只需将其更改为您想要的）

第一个解决方案：使用union

export default function test({
    prop1 = true,
    prop2 = true
}: Option1 | Option2): string {
    return ''
}

对于这个解决方案，我还没有找到任何为prop3和prop4创建默认值的解决方案

第二种解决方案

interface Param extends General {
    prop3?: boolean;
    prop4?: boolean;
}
export default function test({
    prop1 = true,
    prop2 = true,
    prop3 = true,
    prop4 = true
}: Param): string {
    return ''
}

我制作了另一个界面，将prop3和prop4设置为可选属性

由于函数原型，如果我像下面这样调用它，它将导致错误

test({prop4: true, prop3: true}) // error

---

尝试->键入Option1orOtion2=Option1&option2感谢您的回复！我已经试过了，错误消失了，但这并没有阻止我像预期的那样发送

prop3

和

prop4

。有什么想法吗？我是从你那里拿的。我也有这个问题。以下是一个游乐场示例：

interface Param extends General {
    prop3?: boolean;
    prop4?: boolean;
}
export default function test({
    prop1 = true,
    prop2 = true,
    prop3 = true,
    prop4 = true
}: Param): string {
    return ''
}

test({prop4: true, prop3: true}) // error