如何在@input() 变量上使用类型断言？

Question

I have created a union type of several interfaces that share a common parent through inheritance. That union type is passed on to specific components. Those components will only ever be one of the child types. How can I assert the type on the child component?

Example:

interface Common {
  a: string;
  b: string;
}

interface Child1 extends Common {
  c: string;
}

interface Child2 extends Common {
  d: string;
}

type Union = Child1 | Child2;

The parent component has a variable

data: Union;

and passes it to child components like so:

<app-child1 [data]="data"></app-child1>
<app-child2 [data]="data"></app-child2>

The child component will only ever be one of those types so I should be able to assert it somehow:

@Input() data: Child1;

Currently this will throw a type error claiming Child1 is missing properties.

I've tried these @Input() data: Union as Child1; and <app-child1 [data]="data as Child1"> but those just break.

How can I assert this correctly?

Answer 1

Have you tried this only in child component

@Input() data: Union;

Do not pass type while passing or calling child component

<app-child1 [data]="data as Child1"> // not this
<app-child1 [data]="data"> // pass only data 

Answer 2

Feel free to point out any problems

// You can use this setter pattern, I use this
class ChildComponent {
    data: Child1;
    @Input() set( d: Union ) {
        data = d as unknown as Child1;
        // One problem is that you can slip the 'd' prop in the UNION type object from the parent but you can always use if statement to remedy that
    }
}

and in Parent

<app-child1 [data]="data">

Answer 3

You could just cast to any:

<app-child1 [data]="$any(data)"></app-child1>
<app-child2 [data]="$any(data)"></app-child2>

---

Or cast to the expected type like this:

In your parent component:

asChildOne = (data: Union): Child1 => data as Child1;
asChildTwo = (data: Union): Child2 => data as Child2;

In the parent template:

<app-child1 [data]="asChildOne(data)"></app-child1>
<app-child2 [data]="asChildTwo(data)"></app-child2>

---

Or if you want to render the child only if the type is really the type it needs, you can do some type guards :

Somewhere near your interfaces:

export function isCommon(obj: any): obj is Common {
  return obj && 'a' in obj && 'b' in obj;
}

export function isChild1(obj: any): obj is Child1 {
  return isCommon(obj) && 'c' in obj;
}

export function isChild2(obj: any): obj is Child2 {
  return isCommon(obj) && 'd' in obj;
}

In your parent component:

isChildOne = (data: Union): data is Child1 => isChild1(data)
isChildTwo = (data: Union): data is Child2 => isChild2(data)
asChildOne = (data: Union): Child1 => data as Child1;
asChildTwo = (data: Union): Child2 => data as Child2;

In the parent template:

<app-child1 *ngIf="isChildOne(data)" [data]="asChildOne(data)"></app-child1>
<app-child2 *ngIf="isChildTwo(data)" [data]="asChildTwo(data)"></app-child2>

Answer 4

You can simply use like this,

@Input() data: Child1 | Child2;