Element implicitly has an 'any' type because expression of type 'string' can't be used to index' within Object.keys

user_17139628 0
Viewed 184

Hi I'm a complete beginner to TypeScript. I've had some success converting a basic site to TS but am stuck on this one last error.

interface Data {
    data: Options;
}

interface Options {
    name: string;
    email: string;
    message: string;
}

function encode(data: Data) {
    return  Object.keys(data)
            .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
            .join('&');
}

data is an object with name: '' , email: '' and message: ''.

The following error occurs under data[key]:

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

I've found many results about this particular error but am not able to apply one that will work in this context. Any help would be appreciated.

typescript javascript
1 Answers

There are two issues with your code. Firstly the properties you want to iterate over are not in Data, they are in Options. So at the end you have to use data.data[key], not data[key].

The other issue is something that is more common. Object.keys returns an array of Strings. Mapping over it these and using them as any property say data.data[key] will cause an error because TS is not sure if key is a property of Options (not every string is right?) Only some specific strings are properties of Options. And for that you will have to use an intermediate variable and typecast it.

function encode(data: Data) {
  let objKeys = Object.keys(data) as Array<keyof Options>
  return objKeys.map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data.data[key]))
            .join('&');
}

TS Playground

user_101401240
Related