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.
Use this
const [user, setUser] = useState<IUser>({name: 'Jon'});