如何解决TS7053错误？动态调用Angular服务方法类型报错

方案1：限制onChange的类型为允许的方法名字面量联合类型 #

先定义一个包含SharedService中可被动态调用的方法名的联合类型，把组件里onChange的输入类型从string改成这个联合类型，TypeScript就能识别合法的索引，同时模板传值时也会做类型校验：

// 定义允许调用的方法名联合类型
type SharedServiceCallableMethod = 'onMetadataEmpty' | 'onSingleInputChange';

// 修改RegistrationComponent的@Input()类型
@Component({
    selector: 'app-registration',
    templateUrl: './registration.html',
    styleUrls: ['./registration.css'],
})
export class RegistrationComponent implements OnInit {
    // ...其他输入属性
    @Input() onChange?: SharedServiceCallableMethod; // 改为可选的联合类型
    @Input() control!: FormControl;

    constructor(private readonly sharedService: SharedService) {}

    onClick(event: any) {
        const value = event.target.innerHTML.trim();
        this.control.setValue(value);
        if (this.onChange) {
            const method = this.sharedService[this.onChange];
            // 根据方法签名处理参数：onMetadataEmpty不需要参数，onSingleInputChange需要
            method.length === 1 ? method(value) : method();
        }
    }
}

这个方案从源头限制了输入合法性，模板里如果传了不存在的方法名，TypeScript会直接报错。

方案2：创建方法映射对象 #

在组件内创建一个映射对象，把允许的方法名字符串和对应的服务方法绑定，通过映射调用方法，完全规避索引类型问题：

@Component({
    selector: 'app-registration',
    templateUrl: './registration.html',
    styleUrls: ['./registration.css'],
})
export class RegistrationComponent implements OnInit {
    // ...其他输入属性
    @Input() onChange?: string;
    @Input() control!: FormControl;

    // 定义方法映射，统一处理传参逻辑
    private methodMap = {
        onMetadataEmpty: () => this.sharedService.onMetadataEmpty(),
        onSingleInputChange: (val: string) => this.sharedService.onSingleInputChange(val)
    };

    constructor(private readonly sharedService: SharedService) {}

    onClick(event: any) {
        const value = event.target.innerHTML.trim();
        this.control.setValue(value);
        if (this.onChange && this.methodMap[this.onChange]) {
            this.methodMap[this.onChange](value);
        }
    }
}

这个方案灵活性更高，后续服务方法签名变化时，只需要修改映射对象即可。

方案3：安全类型断言（不推荐但可用） #

如果不想大幅修改代码，可以用类型断言告诉TypeScript，传入的字符串是合法的方法名且对应属性是函数：

onClick(event: any) {
    const value = event.target.innerHTML.trim();
    this.control.setValue(value);
    if (this.onChange) {
        // 断言onChange是SharedService的方法名，且对应属性是函数
        const method = this.sharedService[this.onChange as keyof SharedService] as (...args: any[]) => void;
        method(value);
    }
}

注意：这个方案需要自行保证传入的onChange确实是服务中存在的方法名，否则运行时会触发错误。

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