Set types on useState React Hook with TypeScript

reactjs typescript react-hooks
htaidirt picture htaidirt · Dec 6, 2018 · Viewed 50.7k times · Source

I'm migrating a React with TypeScript project to use hooks features (React v16.7.0-alpha), but I cannot figure out how to set typings of the destructured elements.

Here is an example:

interface IUser {
  name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});

I want to force user variable to be of type IUser. My only successful trial, is doing it in two phases: Typing, then initializing:

let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});

But I'm sure there is a better way. Also, setUser should be initialized as a function that takes a IUser as input, and returns nothing.

Also, worth noting that using const [user, setUser] = useState({name: 'Jon'}); without any initialization works fine, but I would like to take advantage of TypeScript to force type checking on init, especially if it depends on some props.

Thanks for your help.

Answer

Nurbol Alpysbayev picture Nurbol Alpysbayev · Dec 6, 2018

Use this

const [user, setUser] = useState<IUser>({name: 'Jon'});

See the corresponding type here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8a1b68be3a64e5d2aa1070f68cc935d668a976ad/types/react/index.d.ts#L844

Related questions

useRef "refers to a value, but is being used as a type here."

I'm trying to figure out how to tell react which element is being used as ref i.e. in my case const circleRef = useRef<AnimatedCircle>(undefined); AnimatedCircle is an SVG component from a third party library, and defining …

Read More
Testing React Functional Component with Hooks using Jest

So I'm moving away from class based components to functional components but am stuck while writing test with jest/enzyme for the methods inside the functional components which explicitly uses hooks. Here is the stripped down version of my code. …

Read More
Removing object from array using hooks (useState)

I have an array of objects. I need to add a function to remove an object from my array without using the "this" keyword. I tried using updateList(list.slice(list.indexOf(e.target.name, 1))). This removes everything but the …

Read More