React-redux hooks with TypeScript

Question

I am using react-redux hook useSelector with TypeScript. Is there any support for static typing? Now I have to cast using as keyword.

interface User { age: number }

const selectUser = (state): User => state.user.detail

const MyComponent = () => {

    const user1 = useSelector(selectUser)
    user1.age = 'This is not number.' // No warning or error.

    const user2 = useSelector<User>(selectUser)
    user2.age = 'This is not number.' // No warning or error.

    const user3 = useSelector(selectUser) as User
    user3.age = 'This is not number.' // TS2339 error, but with casting.

}

Remember that the react-redux hooks are still in alpha phase. — dwjohnston
– dwjohnston, Commented Jun 18, 2019 at 9:36

Michal · Accepted Answer · 2019-06-21 10:54:09Z

1

useSelector has two type parameters <TState, TSelected>, second parameter is type of selected value. So this is working:

const user = useSelector<TState, User>(selectUser)

answered Jun 21, 2019 at 10:54

Michal

2,1013 gold badges31 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. Robot Over a year ago

What is TState?

Michal Over a year ago

TState should be type of state of whole store.

Collectives™ on Stack Overflow

React-redux hooks with TypeScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related