Блог

Главная - Вопросы по программированию - TypeScript реагирует на контекстный API

TypeScript реагирует на контекстный API

#javascript #reactjs #typescript #redux

#javascript #reactjs #typescript #сокращение

Вопрос:

Я создал пользовательский контекстный API (код здесь:https://pastebin.pl/view/e0b5e0f4 ), тогда я могу прочитать это так:

 const { state: { user }, dispatch} = useUserContext();

но я хочу сделать это так (массив вместо объекта):

 const [{ user }, dispatch] = useUserContext();

Поэтому я меняю UserProvider на:

 export const UserProvider: React.FC<UserProviderProps> = ({
  reducer,
  initialState,
  children,
}) => (
  <UserContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </UserContext.Provider>
);

И я получил сообщение об ошибке подсказки:

 Type '[UserProps, Dispatch<UserActions>]' is not assignable to type 'UserContextProps'.ts(2322)
index.d.ts(337, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes amp; ProviderProps<UserContextProps>'

Я немного новичок в TypeScript, и я застрял здесь 🤔

Комментарии:

1. TypeScript просто сообщает вам, что ваш JavaScript неверен. Вам нужно адаптировать API следующим образом const useUserContext () => { const { state, dispatch } = useContext(UserContext); return [state, dispatch]; }

2. Спасибо, мне нужно научиться читать и адаптировать эти советы 🙂

3. @AluanHaddad Я сделал это вот так: export const useUserContext = () => { const { state, dispatch } = useContext(UserContext); return [state, dispatch] as [UserProps, Dispatch<UserActions>]; }; Это работает, но я не уверен, что это правильный синтаксис.

4. Это то, что вы хотели. Вы могли бы сократить его до return [state, dispatch] as const; , чтобы вывести тип кортежа или добавить аннотацию возвращаемого типа для целевого ввода, т.е. useUserContext(): [UserProps, Dispatch<UserActions>] => {...}

5. О, верно. Я сделал return [state, dispatch] as const; , и функция автоматически создала аннотацию const useUserContext: () => readonly [UserProps, React.Dispatch<UserActions>] , поэтому мне не нужно добавлять возвращаемый тип?