[Dúvida] Como que se cria este context (ainda utilizando useState) com TypeScript??? É possível?

Olá, Alexandre, tudo bem?

Sim, é possível criar um contexto utilizando o useState e TypeScript em um projeto React. Para isso, você precisa seguir alguns passos.

Primeiro, é necessário criar o arquivo do contexto com a interface que irá definir o formato dos dados que serão compartilhados entre os componentes. Por exemplo:

import { createContext } from 'react';

interface ContextData {
  nome: string;
  idade: number;
}

const MeuContexto = createContext<ContextData>({} as ContextData);

export default MeuContexto;

Note que a interface ContextData define que o contexto irá compartilhar os dados nome (string) e idade (number). A função createContext recebe como parâmetro o formato dos dados que serão compartilhados, que no caso é a interface ContextData.

Em seguida, você pode criar um componente que irá prover os dados do contexto utilizando o useState. Por exemplo:

import { useState } from 'react';
import MeuContexto from './MeuContexto';

const MeuContextoProvider: React.FC = ({ children }) => {
  const [contextData, setContextData] = useState<ContextData>({
    nome: 'Fulano',
    idade: 30,
  });

  return (
    <MeuContexto.Provider value={contextData}>
      {children}
    </MeuContexto.Provider>
  );
};

export default MeuContextoProvider;

O componente MeuContextoProvider utiliza o useState para definir o estado inicial dos dados do contexto. O valor inicial é um objeto com as chaves nome e idade. Note que o parâmetro genérico de useState é a interface ContextData, definida anteriormente.

O componente também utiliza o contexto criado anteriormente (MeuContexto) para prover os dados para seus filhos utilizando o componente Provider do contexto. O valor do contexto é passado como propriedade value, que é definida como o estado do useState (contextData).

Agora que o contexto está definido e os dados estão sendo providos, você pode utilizar o contexto em outros componentes. Por exemplo:

import { useContext } from 'react';
import MeuContexto from './MeuContexto';

const MeuComponente: React.FC = () => {
  const { nome, idade } = useContext(MeuContexto);

  return (
    <div>
      <p>Nome: {nome}</p>
      <p>Idade: {idade}</p>
    </div>
  );
};

export default MeuComponente;

O componente MeuComponente utiliza o hook useContext para acessar os dados do contexto MeuContexto. O hook retorna o objeto contextData, que foi definido como o estado do useState no componente MeuContextoProvider. Então, o componente pode utilizar as chaves nome e idade para exibir os dados do contexto.

Com isso, você pode criar e utilizar contextos em um projeto React com TypeScript utilizando o useState.

Espero que tenha te ajudado.

Um abraço e bons estudos.