Warning em vermelho no script do componente

Olá, Carlos, como vai?

Esse tipo de sublinhado costuma estar relacionado à configuração do seu ambiente de desenvolvimento e não necessariamente ao projeto em si. Às vezes, o TypeScript ou o próprio IntelliSense podem estar com dificuldades de localizar corretamente os caminhos com os aliases, como o @.

Para que eu possa te ajudar de forma mais precisa, você pode me enviar mais alguns detalhes? Por exemplo:

• Uma captura de tela do erro
• A mensagem exata que aparece quando você passa o mouse por cima do trecho sublinhado
• E, se possível, o conteúdo atual do seu tsconfig.json ou tsconfig.app.json, principalmente os campos baseUrl e paths

Essas informações vão ajudar bastante a entender o que está gerando esse aviso.

Qualquer coisa, seguimos por aqui no fórum.

Fico no aguardo e a disposição

Okay, obrigado pelo feedback

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "src/**/*.ts",
  ],
  "exclude": [
    "src/**/__tests__/*"
  ],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

Oi, Carlos.

Testei aqui a sua configuração e parece tudo certo, você consegue subir seu projeto no GitHub? Assim eu testo ele na minha máquina e tento reproduzir aqui o problema.

Fico no aguardo e a disposição

Okay, vou te mandar agora o link do meu projeto

https://github.com/humbertobrasileiro/cookin-up

Oi, Carlos.

Testei aqui o seu projeto e os único erro apontado foram em relação ao receitas.slice (na linha 15 da imagem que você enviou acima). E isso acontece por que no index.ts faltou tipar o retorno das funções como array:

export async function obterCategorias() {
  return obterDadosURL<ICategoria[]>('https://gist.githubusercontent.com/antonio-evaldo/002ad55e1cf01ef3fc6ee4feb9152964/raw/bf463b47860043da3b3604ca60cffc3ad1ba9865/categorias.json');
}

export async function obterReceitas() {
  return obterDadosURL<IReceita[]>('https://gist.githubusercontent.com/antonio-evaldo/002ad55e1cf01ef3fc6ee4feb9152964/raw/bf463b47860043da3b3604ca60cffc3ad1ba9865/receitas.json');

Isso resolve um erro em MostrarReceitas.vue e outro em SelecionarIngredientes.vue.

Com relação ao erro no alias, acredito que seja algo particular no seu ambiente de desenvolvimento, já que as configurações estão corretas e não apresentam erros aqui.

Okay, feito a correção como descrito abaixo:

import type ICategoria from '@/interfaces/ICategoria'; import type IReceita from '@/interfaces/IReceita';

async function obterDadosURL(url: string) { const resposta = await fetch(url); return resposta.json() as T; }

export async function obterCategorias() { return obterDadosURL<ICategoria[]>('https://gist.githubusercontent.com/antonio-evaldo/002ad55e1cf01ef3fc6ee4feb9152964/raw/bf463b47860043da3b3604ca60cffc3ad1ba9865/categorias.json'); }

export async function obterReceitas() { return obterDadosURL<IReceita[]>('https://gist.githubusercontent.com/antonio-evaldo/002ad55e1cf01ef3fc6ee4feb9152964/raw/bf463b47860043da3b3604ca60cffc3ad1ba9865/receitas.json'); }