如何在Angular 2+中为@Input()定义类型安全的函数入参

你可以直接使用TypeScript的函数类型签名来替代泛用的Function类型，精准约束入参、返回值格式，不符合要求的函数在编译阶段就会触发类型报错。

基础示例：无参数、返回布尔值的回调约束 #

@Input() callback: () => boolean;

上述写法就可以严格限制该输入属性只能接收「无入参、返回值为布尔类型」的函数，完全符合你的需求。

带参数的函数约束场景 #

如果你的回调需要接收参数，直接在括号内定义对应参数的类型即可：

// 示例1：接收1个字符串类型参数，返回布尔值
@Input() callback: (inputStr: string) => boolean;

// 示例2：接收2个数字类型参数，返回布尔值
@Input() compareCallback: (num1: number, num2: number) => boolean;

可选回调、默认值配置 #

如果该输入是可选属性，可以给属性加?标记，也可以同时配置默认函数：

// 可选回调，默认返回true
@Input() callback?: () => boolean = () => true;

异步函数的约束 #

如果需要接收返回异步布尔结果的函数，直接修改返回值类型即可：

// 约束返回Promise<boolean>的异步函数
@Input() asyncCallback: () => Promise<boolean>;

// 约束返回Observable<boolean>的响应式函数
@Input() rxjsCallback: () => Observable<boolean>;

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