How do I type this callback function using typescript

Question

In the code below I typed the dispatch function as "any". I am doing this to clear the error I get if I don't type it.

What is the correct way to type it with Typescript ?

export function doThing() {
  console.log("works")
  return (dispatch:any) => {  // any ?       
    fetch('https://whatever.com/some-api').then((response) => {
      return response.json()
    }).then((data) => {

      dispatch(pingApiAction(data))
    })
  };
}

Does this answer your question? [Typescript: How to type the Dispatch in Redux](https://stackoverflow.com/questions/54844839/typescript-how-to-type-the-dispatch-in-redux) — usafder, Nov 05 '20 at 19:12

Jamiec · Answer 1 · 2020-11-06T08:27:25.917

You should specify an interface for the return from pingActionResult and then use that in the definition of dispatch

Given, for example:

interface PingActionResult
{
    field1: string;
    field2: string;
}

Your code might look like:

export function doThing() {
  console.log("works")
  return (dispatch:(result:PingActionResult) => void) => {  // any ?       
    fetch('https://whatever.com/some-api').then((response) => {
      return response.json()
    }).then((data) => {

      dispatch(pingApiAction(data))
    })
  };
}

// just for illustration
function pingApiAction(data:{}): PingActionResult{
    return {field1: "foo", field2: "bar"}
}

How do I type this callback function using typescript

1 Answers1