TypeScript 和 Vue 类 - TS7053 索引签名

Posted 2023-02-23

【中文标题】TypeScript 和 Vue 类 - TS7053 索引签名

【英文标题】：TypeScript and Vue class - TS7053 index signatures

【发布时间】：2020-02-21 03:08:00

【问题描述】：

带有 vue 类组件（和 typescript）的 Vue 2.6。

实际代码：

private validateField(fieldType: string, e: string) 
  this[fieldType] = e.length > 0

给出错误：

TS7053：元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“索引”。 在“Index”类型上找不到带有“string”类型参数的索引签名。

在我的案例中添加签名的推荐方法是什么？

【参考方案1】：

我要做的是创建一个索引器接口：

interface ILookup<T> 
    [key: string]: T;

然后让Vue类实现这个接口：

export default class App extends Vue implements ILookup<any>  

    [index: string]: any;

    private validateField(fieldType: string, e: string) 
        this[fieldType] = e.length > 0
    

我们必须使用any 作为类型参数，因为 Vue 内部使用了各种不同的类型，这些类型可以在你的组件对象上被索引。例如，当我们使用boolean 作为类型参数时：

interface ILookup<T> 
    [key: string]: T;


export default class App extends Vue implements ILookup<boolean>  

    [index: string]: boolean;

    private validateField(fieldType: string, e: string) 
        this[fieldType] = e.length > 0
    

我们得到以下（和其他）编译错误：

TS2411：“记录”类型的属性“$attrs”不是 可分配给字符串索引类型“布尔”。

和：

TS2411：“Vue[]”类型的属性“$children”不可分配给 字符串索引类型“布尔”。

【讨论】：

和(this as any)[fieldType]一样吗？

不，我想说的不一样。因为通过使用(this as any)[fieldType]，您将整个组件转换为any，在我的示例中，我仅将索引器的返回类型声明为any。我用更多信息更新了我的答案。