Make interface for a function that doesn't return anything

Question

In the code below, I get an error when I try to setCountryToSearch() saying Argument of type 'void' is not assignable to parameter of type 'Country | ((currVal: Country) => Country)'.

I understand I get the error because searchCountry does not return anything. So how can I fix this? What changes can I make to the interface? I tried putting a return and I still had the same error.

Interface

export interface SearchCountryProp {
  searchCountry: (country: string) => void;
}

Function

 const [countryToSearch, setCountryToSearch] = useRecoilState(countryState);
 const searchCountry = (country: string) => {
    Rest.getCountry(country).then((returnedCountry) => {
      setCountryToSearch(returnedCountry);
    });
  };

Rest

import Axios from "axios";

const Rest = {
  async getCountry(nation: string) {
    Axios.get(`https://restcountries.com/v3.1/name/${nation}`).then(
      (response) => {
        const countryObject = {
          captial: response.data[0].capital,
          continent: response.data[0].continents,
        };
        console.log(countryObject);
        return countryObject;
      }
    );
  },
};

export default Rest;

Can we get a [MRE](https://stackoverflow.com/help/minimal-reproducible-example)? — kelsny, Mar 20 '23 at 19:25
it seems to me that `Rest.getCountry` typings are incorrect. it returns `Promise` while correct return type should be `Promise` — Andrei, Mar 20 '23 at 19:28
@andrei how should the syntax for that look? Where should I put Promise? — Michael Horvilleur, Mar 20 '23 at 19:32
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Heretic Monkey, Mar 20 '23 at 19:49

score 0 · Answer 1 · answered Mar 20 '23 at 19:49

0

you should just fix your getCountry function by returning the result of the call. here I've added return keyword in the right place

const Rest = {
  async getCountry(nation: string) {
    // return here
    return Axios.get(`https://restcountries.com/v3.1/name/${nation}`).then(
      (response) => {
        const countryObject = {
          captial: response.data[0].capital,
          continent: response.data[0].continents,
        };
        console.log(countryObject);
        return countryObject;
      }
    );
  },
};

answered Mar 20 '23 at 19:49

Andrei

10,117
13
21

I did that and now I got a different error when I hover over setCountryToSearch(returnedCountry) : Argument of type '{ captial: any; continent: any; }' is not assignable to parameter of type 'Country | ((currVal: Country) => Country)'. Type '{ captial: any; continent: any; }' is not assignable to type '(currVal: Country) => Country'. Type '{ captial: any; continent: any; }' provides no match for the signature '(currVal: Country): Country'. – Michael Horvilleur Mar 20 '23 at 20:18
could you provide Country type? – Andrei Mar 20 '23 at 21:02

Make interface for a function that doesn't return anything

1 Answers1