Ошибка типа при использовании useReducer в сочетании с деструктуризацией массива

Question

useAuthService.tsx

import { createStore } from 'reusable';
import { useReducer, useEffect } from 'react';

export type AuthenticationState = {
    user: any,
}

export type AuthenticationAction = {
    type: 'UPDATE_USER',
    payload: any,
}

const initialState = {
    user: null,
}

const reducer = (state: AuthenticationState, action: AuthenticationAction) => {

    switch (action.type) {
        case 'UPDATE_USER':
            return { ...state, user: action.payload };
        default:
            throw new Error();
    }
}

export const useAuthenticationState = createStore(() => {
    const [state, dispatch] = useReducer(reducer, initialState);

    return [state, dispatch]

})

Внутри этого файла состояние имеет тип {user: any;}, а переменная диспетчеризации имеет React.Dispatch<AuthenticationAction>. Но при их использовании в компоненте машинописный код выдает ошибку в VS C.

Auth.tsx:

const Authentication = () => {
    const [state, dispatch] = useAuthenticationState();

    return (
            <div className="bg-red-500 text-white">
                {state.user?.email}
            </div>
    );
};

При попытке использовать «пользователь» из состояния Typescript выдает ошибку:

Property 'user' does not exist on type '{ user: any; } | Dispatch<AuthenticationAction>'.
  Property 'user' does not exist on type 'Dispatch<AuthenticationAction>'.ts(2339)

Однако отображается. Использование VS C с Typescript 3.8.3.

Answer 1

Я не уверен, почему createStore не может сделать вывод, каким должен быть его параметр типа, глядя на возвращаемый тип его функции, но, несмотря на это, вы можете помочь ему, явно передав ему параметр типа:

const useAuthenticationState = createStore<[AuthenticationState, any]>(() => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return [state, dispatch]
})

В этом примере я установил для параметра типа значение [AuthenticationState, any], потому что я хочу, чтобы он возвращал кортеж с двумя членами, первым из которых является ваш AuthenticationState Теперь, когда он знает это, вы может безопасно получить доступ к state.user в вашем компоненте React.

Ссылка на игровую площадку