如何将TypeScript类型传递给Angular组件的@Input装饰器

完全可以通过TypeScript泛型实现这个需求，这是Angular组件类型复用的标准方案，能完美解决父组件与子组件之间的类型冲突问题。

步骤1：改造下拉组件为泛型组件 #

首先定义一个基础接口约束选项的核心结构，再把组件类改成泛型类，让泛型参数继承这个基础接口：

import { Component, Input, Output, EventEmitter } from '@angular/core';

// 基础接口，确保所有选项都包含name和value字段
interface BaseOption {
  name: string;
  value: string;
}

@Component({
  selector: 'app-dropdown',
  template: `
    <select [(ngModel)]="selectedOption" (change)="handleSelectChange($event)">
      <option *ngFor="let option of options" [value]="option.value">
        {{ option.name }}
      </option>
    </select>
  `
})
export class DropdownComponent<T extends BaseOption> {
  // 输入参数使用泛型T，继承父组件传入的具体类型
  @Input() options: T[] = [];
  @Input() selectedOption: T = {} as T;

  // 输出事件也返回泛型T类型
  @Output() onChangeEvent = new EventEmitter<T>();

  handleSelectChange(event: Event): void {
    const selectElement = event.target as HTMLSelectElement;
    const selected = this.options.find(opt => opt.value === selectElement.value);
    
    if (selected) {
      this.selectedOption = selected;
      this.onChangeEvent.emit(selected);
    }
  }
}

步骤2：父组件中使用带具体类型的下拉组件 #

在父组件里定义自己的严格选项类型，直接传入下拉组件即可，TypeScript会自动推断泛型类型：

// 父组件中定义专属的选项类型，限制name和value的可选值
type YesNoOption = {
  name: 'Yes' | 'No';
  value: 'yes' | 'no';
};

export class ParentComponent {
  yesNoOptions: YesNoOption[] = [
    { name: 'Yes', value: 'yes' },
    { name: 'No', value: 'no' }
  ];
  selectedOption: YesNoOption = this.yesNoOptions[0];

  onDropdownChange(option: YesNoOption): void {
    // 这里option的类型是严格的YesNoOption，不会出现string与'yes'|'no'的类型冲突
    console.log(`选中值：${option.value}`); // 类型提示会自动显示'yes'或'no'
  }
}

父组件模板中正常使用即可，无需额外配置：

<app-dropdown
  [options]="yesNoOptions"
  [selectedOption]="selectedOption"
  (onChangeEvent)="onDropdownChange($event)"
></app-dropdown>

关键优势说明 #

• 类型安全：父组件的严格类型会完全传递到子组件，避免类型不匹配的报错
• 灵活性：泛型组件支持任意符合BaseOption结构的选项类型，比如可以扩展带额外字段的选项
• 自动推断：Angular会根据父组件传入的输入参数自动推断泛型T的具体类型，无需手动指定

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