javascript - React - Typescript-gränssnitt - fel när man hämtar props från unionstyper

Jag använder React med TypeScript.

Jag vill kräva att endast en parameter accepteras från prop3 | prop4. Jag använder en unionstyp på detta sätt:

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

interface Option1 extends General {
  prop3: boolean
}

interface Option2 extends General {
  prop4: boolean
}

type Option1orOtion2 = Option1 | Option2

Om jag får prop3 vill jag inte att prop4 accepteras.

När jag gör det får jag felmeddelanden om de värdena. Vad gör jag fel?

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

REDIGERA: När jag gör det med variabeln finns det inga fel, men låt mig skicka prop3 och även prop4, och jag vill få ett fel om det (Option1 eller Option2 ).

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

Några förslag?

Tack i förväg!

Svar #1

Denna typ av problem kan lösas med funktionsprototyper, som används för att göra överlagring i ts.

För ditt fall har jag 2 lösningar

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

Att använda funktionsprototyper för att begränsa typen av parameter som kan ges. (Jag antar att returtypen är string, byt bara till vad du vill)

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

Första lösningen: att använda union

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

För denna lösning har jag inte hittat någon lösning för att skapa standardvärde för prop3 och prop4.

Andra lösningen

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

Jag skapar ett annat gränssnitt som har prop3 och prop4 inställda som valfria attribut.

På grund av funktionsprototyperna, om jag kallar den som nedan, kommer det att orsaka ett fel

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

Relaterade artiklar