How to type an observable using an async pipe within Angular

Question

I am trying to type an observable that utilizes the async pipe. Right now I am currently getting the error:

Property 'meatCount' does not exist on type 'unknown'.

<ng-template let-wowzers>
  <my-component
    class="my-component-class"
    [myProp]="(wowzers.testObservable$ | async)?.meatCount"
  >
  </my-component>
</ng-template>

The async pipe returns an object of type: Store

class Store {
   meatCount: number;
}

I know that there is a workaround where we would simply do something like:

<ng-template let-wowzers>
  <my-component
    class="my-component-class"
    [myProp]="getTypeStore(wowzers.testObservable$ | async)?.meatCount"
  >
  </my-component>
</ng-template>

Where the getTypeStore would return something like so:

  public getTypeStore = (store: Store): Store => store;

But is there another way to more effectively handle this problem? I am a little lost on how to type the observable using the async pipe within the html page within Angular?

Answer 1

Have you tried giving a type to your observable in the component

wowzeers: {testObservable$: Observable<Store>} | undefined;