Использование асинхронного канала теряет ссылку на тип объекта

Question

У меня простая проблема. Когда я использую асинхронный канал в шаблоне IDE, я не знаю, какой тип имеет объект из асинхронного канала.

Вот краткий пример:

  <ng-container *ngIf="(state$ | async).foo as foo">

На самом деле foo имеет тип Foo: {id:string, name:string, value: number}

Проблема в том, что когда я хочу использовать foo в шаблоне IDE, я не знаю, что foo имеет идентификатор, или имя, или значение.

Есть ли какое-нибудь чистое решение для "приведения" foo к Foo?

Answer 1

as foo оператор создает переменную шаблона не для приведения, если вы используете как это

   <ng-container *ngIf="(state$ | async).foo.id">

вы получите тип intellisense, но при создании переменной шаблона эта информация, похоже, будет потеряна.

это считается ошибкой и может быть решено в будущем.

<ng-container *ngIf="($state | async) as foo">
    {{foo | json}}
    <div>
        {{foo.id}} <!-- foo has no type information-->
    </div>

  {{value.name}} <!-- declared property has type information-->
</ng-container>

демонстрация стекаблиц