1

My goal is to be able to inject new type safe functionality into modular react components.

So for example, I could do something like this:

<FooComponent
  $foo="bar"
  $inherit="border"
  $borderColor="red"
/>
// $borderColor is not a prop of FooComponent but is added from the $inherit

So I started researching how to achieve this and I came up with:

type A = Partial<{ 
  foo: number
  bar: string
}>

type B = Partial<{
  foo: number
  other: string
}>

type C = A & B & { $inherit: "b" }

const a: A = {
  foo: 3,
  other: 'cool', //'other' does not exist in type
}

const b: C = { // $inherit is missing
  foo: 3,
  other: 'cool',
}

const c: A | C = { // OK ????
  foo: 3,
  other: 'cool',
}

Here const c types checks as OK even though it does not meet the criteria of either A or C.

I submitted this as a bug on github and was told this is by design.

So if this is by design, how can I actually make a type safe union on key signatures that requires one of them to actually match? (without any excess keys, even if those keys exist somewhere else in the union)

JD Isaacks
  • 56,088
  • 93
  • 276
  • 422
  • See the [answer](https://stackoverflow.com/a/46370791/2887218) to the question this duplicates for more info. If I translate that answer here I get [this code](https://tsplay.dev/wO8A6N); good luck! – jcalz Aug 05 '21 at 18:57

0 Answers0