TypeScript中传递对象作为函数参数的Angular组件问题

你遇到的核心问题是用了过于宽泛的Object类型作为@Input()的类型，TypeScript无法确认这个对象包含FirstName和LastName属性，所以编译器拒绝传递参数。下面是具体的解决步骤：

1. 定义明确的用户数据接口 #

先创建一个接口来规范用户数据的结构，让TypeScript能识别必要的属性：

// 可以在组件文件顶部或单独的类型文件中定义
interface UserData {
  FirstName: string; // 根据实际业务场景调整类型，比如string/number等
  LastName: string;
}

2. 更新@Input的类型声明 #

把原来的@Input() userdata: Object;替换成自定义接口类型：

// 若父组件可能不传这个值，可加?设为可选
@Input() userdata?: UserData;

// 或者如果允许null，可设置默认值
@Input() userdata: UserData | null = null;

3. 安全调用目标函数 #

在ngOnInit中调用NewWorkItem前，先做类型检查（如果是可选/可空类型），避免空值或类型不匹配的问题：

ngOnInit(): void {
  // 检查userdata存在且包含必要属性
  if (this.userdata && 'FirstName' in this.userdata && 'LastName' in this.userdata) {
    this.NewWorkItem(this.userdata);
  }
}

// 确保NewWorkItem的参数类型也是UserData
NewWorkItem(userData: UserData): void {
  // 这里写你的函数逻辑
}

实用提示 #

• 别再用any或Object作为业务数据的类型，它们会完全绕过TypeScript的类型检查，失去静态类型的优势。
• 如果暂时不确定属性类型，用unknown代替any，使用前必须做类型收窄。
• 开启Angular的严格模式（在tsconfig.json中设置"strict": true），能提前拦截很多类型相关的潜在问题，减少运行时错误。

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