HiveBrain v1.2.0
Get Started
← Back to all entries
patterntypescriptreactCritical

Set types on useState React Hook with TypeScript

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
typescriptwithsetusestatereacttypeshook

Problem

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.

Solution

Use this

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


See the Corresponding Type in DefinitelyTyped

Code Snippets

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

Context

Stack Overflow Q#53650468, score: 693

Revisions (0)

No revisions yet.