У меня есть очень простой проект React Typescript, использующий Context API для передачи хука useState.
export const AppContext = React.createContext(null);
function App() {
const [value, setValue] = React.useState(3);
return (
<AppContext.Provider
value={{
value,
setValue
}}
>
<div>
<h1>App</h1>
<Child />
</div>
</AppContext.Provider>
);
}
Он отлично работает в песочнице кода: https://codesandbox.io/s/interesting-lamarr-fyy1b
Однако, когда я создаю проект с помощью приложения Create React (npx create-react-app project-name --typescript
) и пробую тот же код, я получаю сообщение об ошибке:
Тип '{значение: число;setValue: Dispatch>;} 'нельзя присвоить типу' null '.TS2322
Я думаю, что это происходит, поскольку null
является начальным значением для AppContext
, но затем переопределяется value
, передаваемым Provider
?
Если это так, как я могу это исправить?Я предполагаю, один способ так расслабить настройки TypeScript?Однако существует ли более элегантный способ написания кода, который позволяет избежать этой проблемы?Я новичок в TypeScript и Context API, поэтому не уверен, что делаю один или оба незаметным способом.