Angular 17中WebStorm提示Unresolved variable quotationId问题求助

场景重现 #

在Angular 17项目中使用@for遍历notifications：

@for (notification of notifications; track notification) {
   <i>{{notification.quotationId}}</i> 
}

WebStorm弹出警告：

Unresolved variable quotationId

相关代码定义 #

类型声明 #

export type PendingQuotations = {
  quotationId: number,
  sender: string,
  date: string
}[]

组件赋值逻辑 #

export class HeaderComponent implements OnInit {
  public notifications?: PendingQuotations;

  constructor(private generalService: GeneralService) { }

  ngOnInit(): void {
    this.$getNotifications().subscribe((pendingQuotations: PendingQuotations) => {
      if (pendingQuotations.length > 0) {
        this.notifications = pendingQuotations;
      }
    });
  }

  $getNotifications(): Observable<PendingQuotations> {
    return this.generalService.get<Response>('/quotation/pending-quotations')
      .pipe(
        map((res: Response) => res.messages[0] as unknown as PendingQuotations)
      );
  }
}

接口返回实际数据结构 #

{
    "code": "PENDING_QUOTATIONS",
    "status": "OK",
    "timestamp": "13.01.2024, 14:33:24",
    "messages": [
        [
            {
                "id": 1,
                "quotationId": 2,
                "receiver": "receiver@example.com",
                "sender": "sender@example.com",
                "date": "2024-01-13T09:27:59.256+00:00"
            }
        ],
        "I am a string"
    ],
    "token": null
}

问题原因 #

1. 数据结构与类型断言不匹配
   接口返回的res.messages[0]是二维数组，但你直接将其断言为一维数组类型PendingQuotations。实际赋值给notifications的是二维数组，遍历出的notification是包含单个对象的子数组，而非预期的对象本身，WebStorm无法识别数组内部的对象属性，因此抛出警告。

2. 可选类型导致的类型推导失效
   组件中notifications被声明为可选类型PendingQuotations?，WebStorm在模板中无法确定其是否存在有效数据，进一步影响了属性的类型识别。

解决办法 #

修正数据提取逻辑 #

调整map操作，正确取出二维数组中的目标对象数组：

$getNotifications(): Observable<PendingQuotations> {
  return this.generalService.get<Response>('/quotation/pending-quotations')
    .pipe(
      // 取出messages[0]中的内部对象数组
      map((res: Response) => res.messages[0] as PendingQuotations)
    );
}

如果messages[0]内部只有单个对象，需进一步提取：

map((res: Response) => [res.messages[0][0]] as PendingQuotations)

强化类型断言或消除可选性 #

• 在模板中给notification显式指定类型：

@for (notification of notifications; track notification) {
   <i>{{(notification as PendingQuotations[0]).quotationId}}</i> 
}

• 给notifications添加非空断言，明确其会被赋值：

public notifications!: PendingQuotations;

优化响应类型定义（可选） #

定义匹配接口返回的完整类型，避免unknown断言带来的模糊性：

interface QuotationApiResponse {
  code: string;
  status: string;
  timestamp: string;
  messages: (PendingQuotations | string)[];
  token: null | string;
}

$getNotifications(): Observable<PendingQuotations> {
  return this.generalService.get<QuotationApiResponse>('/quotation/pending-quotations')
    .pipe(
      map(res => res.messages[0] as PendingQuotations)
    );
}

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