6
respostas

Erros na importação

Olá, quando tento importar negociações, ele só importa se eu colocar valores. Quando checo o console, vejo os seguintes erros:

negociacao-controller.js:34  GET http://localhost:8080/dados net::ERR_CONNECTION_REFUSED
importaDados @ negociacao-controller.js:34
(anonymous) @ app.js:16
negociacao-controller.js:34  Uncaught (in promise) TypeError: Failed to fetch
    at NegociacaoController.importaDados (negociacao-controller.js:34:9)
    at HTMLButtonElement.<anonymous> (app.js:16:20)
importaDados @ negociacao-controller.js:34
(anonymous) @ app.js:16

Linha 34 a 40 do negociacao-controller.ts

public adiciona(): void {
        // const negociacaoTemp = new Negociacao(null, 0, 0);
        const negociacao = Negociacao.criaDe(
            this.inputData.value,
            this.inputQuantidade.value,
            this.inputValor.value
        );

Linha 14 a 21 do app.ts

const botaoImporta = document.querySelector("#botao-importa");
if (botaoImporta) {
    botaoImporta.addEventListener("click", () => {
    controller.importaDados();
    });
} else {
    throw Error ('Botão importa não foi encontrado');
}

Não consigo encontrar o problema. Quando tento utilizar npm run compile, aparece o seguinte erro:

app/services/negociacoes-services.ts:1:34 - error TS2306: File 'D:/Diego/cursos/Alura/Typescript/TypeScript-Part-1-Evolving-Your-JavaScript/typescript-curso-1-arquivos-iniciais/app/interfaces/negociacao-do-dia.ts' is not a module.

1 import { NegociacoesDoDia } from "../interfaces/negociacao-do-dia.js";

Found 1 error in app/services/negociacoes-services.ts:1

Linha 1 do negociacoes-services.ts

import { NegociacoesDoDia } from "../interfaces/negociacao-do-dia.js";

negociacao-do-dia.ts

export interface NegociacoesDoDia {
    montante: number;
    vezes: number;
}

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
6 respostas

Olá Diego.
Tudo bem?
Vamos tentar e ver no que é que dá!
Você está enfrentando dois tipos de problemas no seu projeto:
Erro de rede (fetch): GET http://localhost:8080/dados net::ERR_CONNECTION_REFUSED

  • Isso indica que o servidor (back-end) que deveria fornecer os dados para importação não está rodando ou está na porta errada.
    Erro de TypeScript (TS2306): TS2306: File '.../negociacao-do-dia.ts' is not a module.
  • Isso significa que o arquivo negociacao-do-dia.ts não está sendo reconhecido como um módulo.
  • Provavelmente por não haver export ou por problemas com extensão .js na importação.
  1. Resolver o erro de conexão ERR_CONNECTION_REFUSED
    Esse erro vem da função importaDados() no seu NegociacaoController.
    Verifique:
    Você iniciou o servidor local que fornece os dados de negociações?
    Inicie o servidor com o seguinte comando:
npx json-server --watch db.json --port 8080

Certifique-se de estar no diretório onde está o db.json.
Confirme:
A porta usada no código (http://localhost:8080/dados) está batendo com a porta do servidor (--port 8080)
O endpoint /dados realmente existe no db.json.
2. Corrigir erro TS2306: “not a module”
Esse erro ocorre porque o TypeScript espera que o arquivo negociacao-do-dia.ts seja um módulo, mas não o reconhece como tal.
Correção 1: Verifique o conteúdo de negociacao-do-dia.ts
Você disse que ele tem isso:

export interface NegociacoesDoDia {
    montante: number;
    vezes: number;
}

Isso está correto! Mas para o TypeScript reconhecer como módulo, o arquivo precisa ser importado corretamente e também:
Corrija a extensão .js no import
Você está fazendo isso:

import { NegociacoesDoDia } from "../interfaces/negociacao-do-dia.js";

Se está trabalhando com TypeScript (antes de compilar), você não deve usar .js no caminho do import.
Troque para:

import { NegociacoesDoDia } from "../interfaces/negociacao-do-dia";

O TypeScript entende .ts automaticamente.
A extensão .js só é usada depois que os arquivos estão compilados (em tempo de execução no navegador, se for usar ES Modules).
3. Dica extra: verifique o tsconfig.json
Garanta que o seu tsconfig.json está configurado corretamente com estas opções:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./app",
    "strict": true,
    "esModuleInterop": true
  }
}

E o HTML deve carregar os scripts assim:

<script type="module" src="./dist/app.js"></script>

Para resolver de vez:
Inicie o servidor JSON que serve os dados:

npx json-server --watch db.json --port 8080

Corrija a importação no negociacoes-services.ts:

import { NegociacoesDoDia } from "../interfaces/negociacao-do-dia";

Verifique se o arquivo negociacao-do-dia.ts está com export corretamente.
Compile novamente:

npm run compile

Testa ai e avise se deu boa.
Aguardo seu feedback.
Bons estudos.

Olá Ronaldo. Obrigado pela informação. Consegui resolver o problema relacionado ao NegociacoesDoDia. Infelizmente não nenhum arquivo db.json na pasta. Não sei onde ele deveria estar, ou o que ele deve conter. Além disso, após colocar os itens sugeridos no tsconfig.json e tentei utilizar o npm run compile, e apareceram os seguintes erros:

app/controllers/negociacao-controller.ts:15:13 - error TS2564: Property 'inputData' has no initializer and is not definitely assigned in the constructor.

15     private inputData: HTMLInputElement;
               ~~~~~~~~~

app/controllers/negociacao-controller.ts:17:13 - error TS2564: Property 'inputQuantidade' has no initializer and is not definitely assigned in the constructor.

17     private inputQuantidade: HTMLInputElement;
               ~~~~~~~~~~~~~~~

app/controllers/negociacao-controller.ts:19:13 - error TS2564: Property 'inputValor' has no initializer and is not definitely assigned in the 
constructor.

19     private inputValor: HTMLInputElement;
               ~~~~~~~~~~


Found 3 errors in the same file, starting at: app/controllers/negociacao-controller.ts:15

Segue o tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist",
        "rootDir": "./app",
        "target": "ES6",
        "module": "ES6",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "noImplicitAny": true,
        "removeComments": true,
        "strictNullChecks": true,
        "strict": true,
        "esModuleInterop": true,
        "paths": {
            "undici-types": ["./node_modules/undici-types/index.d.ts"]
        },
        "experimentalDecorators": true
    },
    "include": ["app/**/*"]
}

Opa Diego.
Já conseguimos algum progresso ou pelo menos bagunçar mais o código. ^^´
Vamos lá :
Os erros citados acima podem ocorrer porque o TypeScript está configurado com a opção strict ativada, que exige que todas as propriedades de uma classe sejam inicializadas no momento da declaração ou no construtor, ou então sejam marcadas como opcionais ou undefined.Pelo menos é o que parece...
No caso das propriedades inputData, inputQuantidade e inputValor, você declarou elas, mas não as inicializou no momento da criação da instância da classe nem no construtor.
O TypeScript não pode garantir que essas propriedades estarão definidas quando forem acessadas, então ele gera esse erro.
Se essas propriedades podem ser undefined inicialmente, você pode definir as propriedades como opcionais ou inicializar com undefined:

class NegociacaoController {
    private inputData?: HTMLInputElement;
    private inputQuantidade?: HTMLInputElement;
    private inputValor?: HTMLInputElement;

    constructor() {
        // Propriedades podem ser indefinidas inicialmente
    }
}

Com isso, você pode trabalhar com essas propriedades sendo undefined até que os elementos DOM sejam carregados e atribuídos a elas.
Testa ai e me avise.
Caso continue dando erro peço que disponibilize o link do projeto com todas as pastas e arquivos(google drive ou github).
Assim posso analisar com mais calma e lhe retornar o que pode estar causando o erro.
Aguardo seu retorno.
Bons estudos.

Olá Ronaldo. Infelizmente não funcionou. Quando tentei colocar ? no inputData apareceu o erro "Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2345)"

Segue os arquivos no github

https://github.com/DiegoDiaz92/Curso-Typescript.git

Obrigado amigo.
Vou analisar seu código e assim que possivel retorno com os resultados.
Até...

Olá Diego.
Estão faltando arquivos e pastas no seu projeto.
Sobe eles no github e me avise.
Exemplo : index.html ,pasta models, ...controllers