javascript - React - Typescript 接口(interface) - 从联合类型获取 Prop 时出错

Question

我用 typescript 使用react。

我希望只接受 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 <></>
}

编辑 :当我使用变量执行此操作时，没有错误，但让我通过 prop3还有 prop4 ，我想得到一个关于它的错误( Option1 或 Option2 )。

var data: Option1orOtion2 = {prop3: false, prop4: false}

有什么建议吗？

提前致谢!

Answer 1

这类问题可以使用函数原型(prototype)来解决，函数原型(prototype)用于在 ts 中进行重载。
对于您的情况，我有 2 个解决方案

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

使用函数原型(prototype)来限制可以给出的参数类型。 (我假设返回类型为字符串，只需将其更改为您想要的)

export default function test(param: Option1): string;
export default function test(param: Option2): string;

第一个解决方案:使用联合

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 ''
}

我制作了另一个接口(interface)，其中 prop3 和 prop4 设置为可选属性。
由于函数原型(prototype)，如果我像下面这样调用它，它会导致错误

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