如何指定Angular中"async as"变量类型？Observable报错原因解析

为什么直接在模板中调用服务方法会报错？ #

问题的核心出在你传递给async管道的内容上：

• 你的deviceStoreService.getDevices是一个返回Observable的函数，而非Observable本身。当你在模板里写(deviceStoreService.getDevices | async)时，你把函数本身传给了async管道，但async管道只接受Observable或Promise类型的值，完全不支持函数类型，所以TypeScript直接抛出了类型不匹配的错误。
• 而在组件类中，你调用了this.deviceStoreService.getDevices()（注意末尾的括号），这才真正执行了函数，拿到了Observable<Device[]>类型的返回值，并赋值给了devices变量。此时模板里的(devices | async)传递的是正确的Observable类型，自然不会报错。

简单说：你漏写了函数调用的括号！如果一定要在模板里直接使用服务的方法，应该写成(deviceStoreService.getDevices() | async)（加上()调用函数，拿到返回的Observable），而不是deviceStoreService.getDevices。

如何指定async as变量的类型？ #

Angular模板本身不支持直接写类型注解，但有几种实用方式可以让TypeScript正确推断或指定变量类型：

1. 利用组件类的类型化属性（推荐）
   像你现在做的一样，在组件类中定义类型明确的Observable属性：

   devices: Observable<Device[]>; // 这里已经明确了类型
   

   然后在模板里使用async as时，TypeScript会自动推断出变量的类型：

   <tr *ngFor="let device of (devices | async) as deviceList">
     <!-- 这里的deviceList会被自动推断为Device[]类型 -->
     <td>{{device.name}} <midi-keyboard [device]="device"></midi-keyboard></td>
   </tr>
   

2. 在模板中显式断言类型
   如果你需要在模板里直接调用服务方法（不推荐，模板应尽量简洁，逻辑放在组件类中），可以通过as语法结合类型断言：

   <div *ngIf="(deviceStoreService.getDevices() | async) as devices">
     <!-- 显式指定devices为Device[]类型 -->
     <tr *ngFor="let device of devices as Device[]">
       <td>{{device.name}} <midi-keyboard [device]="device"></midi-keyboard></td>
     </tr>
   </div>
   

   若只是临时绕过类型检查（不推荐，会丢失类型安全），可以用$any()：

   <div *ngIf="$any(deviceStoreService.getDevices() | async) as devices">
     <tr *ngFor="let device of devices">
       <td>{{device.name}} <midi-keyboard [device]="device"></midi-keyboard></td>
     </tr>
   </div>
   

3. 使用组件getter封装服务调用
   如果你想在模板里用简洁的方式调用服务方法，同时保持类型安全，可以在组件类中定义一个getter：

   get devices$(): Observable<Device[]> {
     return this.deviceStoreService.getDevices();
   }
   

   然后在模板里使用：

   <tr *ngFor="let device of (devices$ | async) as deviceList">
     <td>{{device.name}} <midi-keyboard [device]="device"></midi-keyboard></td>
   </tr>
   

   这样devices$是类型明确的Observable，模板里的deviceList也会被正确推断为Device[]。

内容的提问来源于stack exchange，提问作者Stephane