Angular通用自定义列表组件：如何移除any并保留元素类型信息

要解决类型丢失的问题，核心是用TypeScript泛型定义列表项和组件，既能保持组件通用性，又能在使用时保留具体对象的类型信息。

1. 改造ListItem为泛型接口 #

把原ListItem改成支持泛型的接口，让innerElement的类型可动态指定：

export interface ListItem<T> {
  title: string;
  innerElement: T;
}

2. 让CustomList组件支持泛型 #

修改组件类，声明泛型参数T，将输入的itemList和输出事件的类型绑定到该泛型：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ListItem } from './list-item.interface';

@Component({
  selector: 'custom-list',
  templateUrl: './custom-list.component.html'
})
export class CustomListComponent<T> {
  @Input() itemList: ListItem<T>[] = [];
  @Output() itemClicked = new EventEmitter<ListItem<T>>();

  onItemClick(item: ListItem<T>) {
    this.itemClicked.emit(item);
  }
}

同步调整组件模板（Angular模板中无需加this，直接访问组件属性即可）：

<div>
  <ul>
    <li 
      *ngFor="let item of itemList"
      (click)="onItemClick(item)"
    >
      {{ item.title }}
    </li>
  </ul>
</div>

3. 使用组件时指定具体类型 #

在父组件中，针对不同对象类型（比如Mailbox）创建带类型的列表项数组，使用组件时自动保留类型：

interface Mailbox {
  mailboxName: string;
  mailboxEmails: number;
}

export class ParentComponent {
  mailboxes: Mailbox[] = [
    { mailboxName: "Mailbox one", mailboxEmails: 43 },
    { mailboxName: "Mailbox two", mailboxEmails: 3 }
  ];

  // 生成带Mailbox类型的ListItem数组
  mailboxListItems: ListItem<Mailbox>[] = this.mailboxes.map(x => ({
    title: x.mailboxName,
    innerElement: x
  }));

  handleMailboxClick(item: ListItem<Mailbox>) {
    // 此处item.innerElement会被TypeScript识别为Mailbox类型，支持智能提示和类型检查
    console.log(`邮箱${item.innerElement.mailboxName}有${item.innerElement.mailboxEmails}封邮件`);
  }
}

父组件模板中使用组件：

<custom-list 
  [itemList]="mailboxListItems"
  (itemClicked)="handleMailboxClick($event)"
></custom-list>

方案优势 #

泛型让custom-list组件适配任意类型对象的同时，TypeScript能全程跟踪具体类型，避免any导致的类型丢失，既保证组件复用性，又保留类型安全。

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