Oi, Dionathan! Tudo bem?
Sobre o authStorage no React com TypeScript continuar aparecendo como any, vamos resolver isso verificando dois pontos no seu código. Primeiro ponto é o tipo de importação. No global.d.ts, você declarou apenas exports nomeados:
declare module 'simple-auth-storage' {
export const generateToken: () => string;
export const saveUser: (user: User, token: string) => void;
}
Esse trecho informa ao TypeScript que a biblioteca possui generateToken e saveUser como named exports. Porém, no users.tsx, você está utilizando: import authStorage from 'simple-auth-storage';.
Esse código tenta importar um default export, que não foi declarado no seu global.d.ts. Se a biblioteca realmente exporta um objeto authStorage como default, a declaração precisa refletir essa estrutura:
declare module 'simple-auth-storage' {
const authStorage: {
generateToken: () => string;
saveUser: (user: User, token: string) => void;
};
export default authStorage;
}
Esse código cria a tipagem do objeto authStorage e informa que ele é o default export da biblioteca. Depois, seu import pode continuar assim: import authStorage from 'simple-auth-storage';.
O segundo ponto é o seu tsconfig.json. No trecho enviado, existe um problema de estrutura:
{
"extends": "@tsconfig/vite-react/tsconfig.json",
"include": [
"src/**/*",
"global.d.ts"
],
"exclude": [
"node_modules",
"dist"
]
}
O global.d.ts na raiz está correto, e colocá-lo no include também é uma boa forma de garantir que o TypeScript carregue essa declaração.
Dica: depois de alterar o global.d.ts, reinicie o servidor de desenvolvimento e, no VS Code, use TypeScript: Restart TS Server. O editor pode manter a análise anterior em cache.
Também vale conferir se a estrutura real da biblioteca é compatível com a declaração. Se ela for utilizada desta forma:
authStorage.generateToken();
authStorage.saveUser(user, token);
A declaração com export default authStorage faz sentido. Já se a biblioteca for utilizada assim: import {generateToken, saveUser} from 'simple-auth-storage'; então sua declaração original com export const está mais adequada.
Portanto, o ponto que chama mais atenção no seu código é a diferença entre export default declarado no módulo e o import authStorage usado no users.tsx.
Você consegue verificar como o pacote simple-auth-storage está exportando generateToken e saveUser no código original da biblioteca? Essa informação ajuda a confirmar qual das duas declarações corresponde exatamente à API do pacote.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
