更新打字稿版本时反应 useState 钩子上的打字稿错误

Question

I developed a react typescript application with react 16.9 and typescript 3.5.2. It uses react state hooks like

const [hValue, setHValue] = useState();

type of the hValue is IValue

So the setHValue has return type React.Dispatch<any>

Then I updated the typescript version to 3.9.7 and it gives compilation errors and it seems that now the return type of setHValue has changed to React.Dispatch<React.SetStateAction<undefined>>

Why is that? and how to resolve this issue?

Answer 1

Let's have a look at the type of useState

    function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

It is to say, if you didn't specify any S , it will be undefined by default.

So you will need to specify your initial type, say if hValue is a number , you can do

const [hValue, setHValue] = useState<number>();

In this way, setValue will be React.Dispatch<SetStateAction<number>> type