Typescript -> 'value' is of type 'unknown'. in a React Native project-CodePudding

I am converting a JS file to TS, in my react native project but have stumbled accross this issue that I can't resolve where the value['flag'] is showing the following error, 'value' is of type 'unknown'.ts(18046). Any idea on how to solve this will be much appreciated.

The code block is the following:

    for (const [key, value] of Object.entries(orderedCities)) {
      if (
        key.startsWith(userInput.toLowerCase()) &&
        userInput != '' &&
        value !== typeof undefined
      ) {
        const inputObject = {city: '', flag: ''};
        inputObject.city = key;
        inputObject.flag = value['flag'];
        creationArray.push(inputObject);
        setElementArray(creationArray);
      }
    }

I tried declaring a type in the const [key, value] but this triggers a different error, I added the value !== typeof undefined but this has not changed the error showen.

CodePudding user response：

Use for..in when you wan to iterate over object.

for (const key in orderedCities) {
  // const k = key as keyof typeof orderedCities
  // const value = orderedCities[k]
  // or
  const value = orderedCities[key as keyof typeof orderedCities]

  // ...
}

CodePudding user response：

You are expecting value to be an object with a property { flag: string }. Right now the entire value has type unknown. It's not even know that it is an object.

This means that something is wrong with the type of your orderedCities variable. That is, the problem is somewhere higher up in your code.

Perhaps you initialized an empty dictionary without declaring its type. I can reproduce your 'value' is of type 'unknown' error if I create orderedCities as:

const orderedCities = {};

I can get rid of the error by creating orderedCities with a proper type:

const orderedCities: Record<string, { flag: string }> = {};

You will want to remove your attempted solution && value !== typeof undefined. This doesn't make sense as typeof undefined is a string. It will give you an error of its own once you have a proper type on orderedCities.

Corrected code:

// Dummy variables with correct types to avoid errors
const creationArray: Array<{ city: string; flag: string }> = [];
const setElementArray: (array: Array<{ city: string; flag: string }>) => void = () => { };
const userInput = '';

// THIS IS THE TYPE WHICH MATTERS
const orderedCities: Record<string, { flag: string }> = {};

// No errors in your code
for (const [key, value] of Object.entries(orderedCities)) {
    if (
        key.startsWith(userInput.toLowerCase()) &&
        userInput != ''
    ) {
        const inputObject = { city: '', flag: '' };
        inputObject.city = key;
        inputObject.flag = value['flag'];
        creationArray.push(inputObject);
        setElementArray(creationArray);
    }
}

TS Playground Link

CodePudding user response：

Cast value to typeof city, Assume it's called ICity:

for (const [key, value] of Object.entries(orderedCities)) {
  const typedValue = value as ICityObjectType;
  /** use typedValue instead of value */
}