Problem using React createContext and typescript - reactjs

Question

I'm working on a simple calculator made on react + typescript using vite. It's my first time using react + typescript so I don't know the right way to use the ContextAPI. I got this error trying to build the aplication with yarn build.
src/components/Screen.tsx:5:11 - error TS2339: Property 'showOnScreen' does not exist on type '{}'.
const { showOnScreen, onDeleteButton } = useContext(AppContext);
AppContext.tsx
import { createContext } from 'react';
export const AppContext = createContext({});
ContextProvider.tsx
import { useState } from 'react';
import { AppContext } from './';
type Props = {
children: React.ReactNode;
};
export const ContextProvider: React.FC<Props> = ({ children }) => {
const [showOnScreen, setShowOnScreen] = useState('0');
const [isLastAResult, setIsLastAResult] = useState(false);
const onDeleteButton = () => {
if (showOnScreen.length === 1 || isLastAResult) {
setShowOnScreen('0');
setIsLastAResult(false);
return;
}
setShowOnScreen(showOnScreen.substring(0, showOnScreen.length - 1));
};
return (
<AppContext.Provider
value={{
onDeleteButton,
showOnScreen,
}}
>
{children}
</AppContext.Provider>
);
};
Screen.tsx
import { useContext } from 'react';
import { AppContext } from '../context';
export const Screen = () => {
const { showOnScreen, onDeleteButton } = useContext(AppContext);
return (
<div className='row bg-white rounded-4'>
<div className='col-12 pe-0 d-flex justify-content-between align-items-center'>
<span className='py-2 fs-4'>{showOnScreen}</span>
<button
className='text-danger rounded-start btn rounded-4 h-100 fs-5'
onClick={onDeleteButton}
>
DEL
</button>
</div>
</div>
);
};

Answer 1

In TypeScript, createContext uses generics ie it is a createContext<T> that automatically adapts to your type when you don't specify anything else. It propagates the type to your variable - AppContext which gets assigned {} as a type.
There are various ways to assign it a type, like:
export const AppContext = createContext({} as { showOnScreen?: bool; });
or
export const AppContext = createContext<{ showOnScreen?: bool; }>({});
or
interface IContext {
showscreen?: bool;
}
export const AppContext = createContext<IContext>({});