Apenas isso mesmo, estou trabalhando este projeto utilizando TypeScript e gostaria de uma luz neste ponto.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Apenas isso mesmo, estou trabalhando este projeto utilizando TypeScript e gostaria de uma luz neste ponto.
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.