Why is BehaviorSubject<number | undefined> | async evaluating to null?

Question

I have a BehaviorSubject that is typed to emit either number | undefined:

export class MyComponent {
  indentation$ = new BehaviorSubject<number | undefined>(undefined)
  ...
}

I need to pass the emissions from this to a property that accepts either number | undefined. When connect it into the template though, it complains that it cannot accept null:

<my-other-component indent="indentation$ | async"> 
<!-- 
         Type 'number | null | undefined' is not 
         assignable to type 'number | undefined' 
-->
</my-other-component>

The error goes away with a bang!

<my-other-component indent="(indentation$ | async)!"> 
</my-other-component>

Where is the null value coming from?

Why would the template think that indentation$ | async might ever be null? It's not defined that way in the constructor so where's the gap in my understanding of how all this works?

Answer 1

From the async pipe itself. The transform method's return type is T | null. By inference, the type returned by your async pipe is indeed number | undefined (from your type declaration) | null from the async pipe.