TypeScript装饰器新增类方法提示属性不存在如何保留类型?
问题本质
TypeScript 类装饰器默认不会根据运行时对原型的修改自动更新被装饰类的静态类型,即使运行时原型上已经挂载了对应方法,类型检查阶段仍会判定类实例不存在该成员,抛出Property 'xxx' does not exist on type 'xxx'报错。
可行方案
不需要使用// @ts-ignore绕过检查,有两种成熟方案可以保留完整类型提示:
方案1:装饰器返回扩展后的派生类(推荐,自维护装饰器首选)
给装饰器补充泛型构造函数约束,让装饰器返回继承自原类的派生类,在派生类中声明新增的方法,TypeScript会自动识别装饰器返回的新类型,多层装饰器叠加时会自动合并所有新增成员的类型,不需要手动维护类型声明。
运行时逻辑和直接修改原型完全一致,不会改变原有执行效果。
// 定义通用构造函数类型 type Constructor<T = object> = new (...args: any[]) => T; function A<T extends Constructor>(constructor: T) { return class extends constructor { getAge = (age: number) => age; } } function B<T extends Constructor>(constructor: T) { return class extends constructor { getName = (name: string) => name; } } @A @B class C {} const c = new C(); // 无类型报错,getAge、getName均有完整类型提示 console.log(c.getAge(10)); console.log(c.getName("Andrew"));
方案2:接口声明合并(适合无法修改装饰器实现的场景)
如果使用的是第三方装饰器、无法调整装饰器内部直接修改原型的写法,可以利用TypeScript的声明合并特性,在被装饰类的同作用域下声明同名接口,手动补充装饰器新增的方法类型,TS会自动将接口成员合并到类的实例类型中。
function A(constructor: Function) { constructor.prototype.getAge = (age: number) => { return age } } function B(constructor: Function) { constructor.prototype.getName = (name: string) => { return name } } @A @B class C {} // 与类同名的接口会和类实例类型自动合并 interface C { getAge(age: number): number; getName(name: string): string; } const c = new C(); // 无类型报错,方法提示完整 console.log(c.getAge(10)); console.log(c.getName("Andrew"));
方案选择建议
- 装饰器为自行维护的代码时,优先选方案1,类型自动推导,后续给装饰器新增方法时不需要额外同步修改类型定义,多层装饰器叠加也不会出现类型遗漏。
- 装饰器来自第三方库、无法修改内部实现时,选方案2手动补充类型即可。
内容的提问来源于stack exchange,提问作者Andrii Radkevych
相关产品推荐
相关产品推荐

