TypeScript 和 Vue class - TS7053 索引签名

Question

Vue 2.6 with vue class component (and typescript).

Actual code:

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

Gives an error:

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Index'. No index signature with a parameter of type 'string' was found on type 'Index'.

What's a recommended way to add signatures in my case?

Answer 1

What I would do is create an indexer interface:

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

And then make the Vue class implement this interface:

export default class App extends Vue implements ILookup<any> { 

    [index: string]: any;

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

We have to use an any as type parameter because Vue internally uses all kinds of different types which can be indexed on you component object. So for example when we use a boolean as type parameter:

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
    }
}

we get the following (and other) compilation errors:

TS2411: Property '$attrs' of type 'Record' is not assignable to string index type 'boolean'.

and:

TS2411: Property '$children' of type 'Vue[]' is not assignable to string index type 'boolean'.