Angular子组件Output绑定函数时如何隐式推断参数类型

算力阿峰

2026-9-26

结论

该场景下可以实现类型推断，需基于Angular Ivy编译器（Angular 9及以上版本默认启用）配合严格模板类型检查配置实现。

实现步骤

开启严格模板类型检查
在项目根目录的tsconfig.json（或应用级tsconfig.app.json）中添加如下配置：

{
  "angularCompilerOptions": {
    "enableIvy": true,
    "strictTemplates": true
  }
}

开启strictTemplates后，Angular会对模板内所有绑定做严格类型校验，此时子组件inputchange事件的$event会被自动推断为string类型。

两种隐式获取参数类型的方案

方案1：依赖模板校验自动提示
开启配置后，如果你在childChanged中错误使用参数类型（比如调用event.toFixed()这类数字专属方法），TypeScript会直接抛出类型错误，无需手动标注event: string也能获得完整类型校验能力。如果项目TS配置开启了noImplicitAny，方法参数不标注类型会抛出隐式any错误，这种情况优先使用方案2。
方案2：派生类型避免重复定义
如果需要显式标注参数类型又不想硬写string，可以直接从子组件的Output属性派生类型：

import type { ChildComponent } from './child.component';

@Component({
  template:`<child (inputchange)="childChanged($event)"></child>`
})
export class ParentComponent {
  // 从ChildComponent的inputchange属性自动推导参数类型
  childChanged(event: Parameters<ChildComponent['inputchange']['emit']>[0]){
    console.log(event);
  }
}

后续如果子组件inputchange的泛型类型修改，父组件参数类型会自动同步，无需手动调整。