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

Question

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.

github.com/microsoft/TypeScript/issues/35101

Hend El-Sahli
– Hend El-Sahli

2022-12-17 17:18:01 +00:00
Commented Dec 17, 2022 at 17:18 — Hend El-Sahli
– Hend El-Sahli, Commented Dec 17, 2022 at 17:18

Linda Paiste · Accepted Answer · 2022-12-17 20:45:56Z

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

bogdanoff · Accepted Answer · 2022-12-17 16:56:09Z

0

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]

  // ...
}

answered Dec 17, 2022 at 16:56

bogdanoff

2,4421 gold badge14 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related