Migrating to Typescript from React.Js New to TS learning as I go

I have 2 errors that say the exact thing and I can figure out what I need to place for them to be correct and clear up.

Error:
> Property 'value' does not exist on type 'never'.

 useEffect(() => {
    // @ts-expect-error -- TODO: Variable 'cities' implicitly has type 'any[]' in some locations where its type cannot be determined.
    const cities = [];
    selectedStates.forEach((state) =>
      cities.push(...getCityByState(state.value).map((city) => city.name)) // Error on .value
    );
    // @ts-expect-error -- TODO: Variable 'cities' implicitly has an 'any[]' type.
    setCities(cities);
  }, [selectedStates]);

The Error is for the .value in the middle line. (state.value), just the .value gives me the error though.

Here is the other area I get the same Error:

  const getSearchQuery = (zipCodes: string[]) => {
    let query = Default_Search + `sort=breed:${selectedSort.value}&`;
    query += selectedBreeds
      .map((breed) => `dogBreeds=${breed.value}&`) //Error .value
      .join("");
    query += zipCodes.map((zipcode) => `zipCodes=${zipcode}&`).join("");
    return query + `ageMin=${minAge.value}&ageMax=${maxAge.value}&`;
  };

I get the Error on this one with .value on the middle line again. (breed.value), just the .value gives me the error though.

I am not sure what I am missing with setting this type.

You have to assign type to state, like,

const type State = {
  value: string;
}

const type City = {
  name: string;
}

useEffect(() => {
  const cities = [] as City[];
  selectedStates.forEach((state: State) =>
    cities.push(...getCityByState(state.value).map((city: City) => city.name)))
setCities(cities);
}, [selectedStates]);

This is typescript, so you have to assign type to the variable; otherwise, it'll give errors like this.

You have to do the same for the second one.

You're getting those errors because of two things:

1. You probably declared the variable "state" as an empty Object;
   So, the type inference can't do its magic because there's not much information about "state".

2. You didn't make a type declaration for "state". That's conflictive for TS when trying to access properties that only you as dev know will populate your object such as "value".

How to solve it?

type City = {
  name: string;
  ...etc
}

type State = {
  value: Array<City>;
}

useEffect(() => {
  const cities:Array<string> = []; /*You will be populating this arr with names of cities */
  selectedStates.forEach((state: State) =>
  cities.push(...getCityByState(state.value).map((city: City) => city.name)))
  setCities(cities);
}, [selectedStates]);