Angular中PrimeNG p-table的let-item类型未自动推断，如何指定类型？

以下是几种可行的解决方式：

• 模板内直接类型断言
  在使用item的位置，通过as关键字显式指定类型，让IDE识别变量类型：

  <ng-template pTemplate="body" let-item>
      <tr>
          <td>{{ (item as customType).yourProperty }}</td>
      </tr>
  </ng-template>
  

  这种方式无需修改组件类代码，适合快速解决单处使用的类型提示问题。

• 组件类辅助类型推导
  在组件类中定义一个类型标识函数，帮助IDE自动推断模板变量的类型：

  // 组件对应的.ts文件
  identifyItem(item: customType): customType {
      return item;
  }
  

  随后在模板中调用该函数，item的类型会被自动识别：

  <ng-template pTemplate="body" let-item>
      <tr>
          <td>{{ identifyItem(item).yourProperty }}</td>
      </tr>
  </ng-template>
  

  适合需要多次使用item属性的场景，能在整个模板块中获得完整的类型提示。

• 显式指定Table组件泛型
  导入PrimeNG的Table组件，在组件类中声明带泛型的Table引用，强化类型推导：

  // 组件对应的.ts文件
  import { Table } from 'primeng/table';
  import { ViewChild } from '@angular/core';
  
  export class YourComponent {
      items: customType[] = [];
      @ViewChild('table') table?: Table<customType>;
  }
  

  然后在模板中给p-table添加模板引用：

  <p-table [value]="items" #table>
      <ng-template pTemplate="header">
          <tr>
              <th></th>
          </tr>
      </ng-template>
      <ng-template pTemplate="body" let-item>
          <tr>
              <td>{{ item.yourProperty }}</td>
          </tr>
      </ng-template>
  </p-table>
  

  这种方式完全贴合Angular的类型系统，能让模板自动推断item的类型，是最规范的解决方案。

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