Type T | null is not assignable to type string | null. How come?

Question

I have a parent component, that uses a child component with an input binding like so:

// parent.component.html
<my-child [myBinding]="myObserVable$ | async"></my-child>

and its controller:

// parent.component.ts
public myObservable$ = new Subject<string>();

private someFunctions(event: string) {
    this.myObservable$.next(event);
}

The child component's controller:

// my-child.component.ts
@Input()
set myBinding(value: string | null) {
    // ...
}

Everything works fine. The observable is of type string and the async pipe (can) add a null to it, but IntellJ underlines "myObservable$ | async" redly and shows up Type T | null is not assignable to type string | null on hovering.

Am I doing anything wrong and can I modify the code in order to fix the issue?

Answer 1

declaring the type of myObservable$ fixed the red underline. So I changed

// parent.component.ts
public myObservable$ = new Subject<string>();

to

// parent.component.ts
public myObservable$: Subject<string> = new Subject<string>();

and the error linting gone byebye: