12
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;
}

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
12 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.
Com base nos arquivos que você enviou percebi que estão faltando o index.html na raiz do projeto e outros arquivos e pastas necessarios para seu projeto funcionar.
A hierarquia ideal é:

projeto-negociacoes/
│
├── index.html
│
├── app/
│   ├── app.ts
│   ├── controllers/
│   │   └── negociacao-controller.ts
│   └── models/
│       ├── negociacao.ts
│       └── negociacoes.ts
│
└── dist/
    ├── app.js
    ├── controllers/
    │   └── negociacao-controller.js
    └── models/
        ├── negociacao.js
        └── negociacoes.js

Check-list de arquivos

TipoNomeSituaçãoObservação
Arquivo principalapp.tsPresenteResponsável por instanciar o controller e capturar eventos do formulário
Modelnegociacao.tsPresenteDefine a classe Negociacao (data, quantidade, valor)
Modelnegociacoes.tsPresenteDefine a classe Negociacoes (lista e adiciona negociações)
Controllernegociacao-controller.tsPresenteCria e adiciona negociações a partir do formulário
HTML principalindex.htmlFaltandoPrecisa conter o formulário (#data, #quantidade, #valor) e importar app.js com type="module"
Arquivo CSS (opcional)style.cssOpcionalApenas para layout

Hierarquia dos Imports (correta)

Cada arquivo deve importar apenas o necessário, mantendo caminhos relativos:

app.ts

import { NegociacaoController } from './controllers/negociacao-controller.js';

const controller = new NegociacaoController();
const form = document.querySelector('.form');

if (form) {
    form.addEventListener('submit', event => {
        event.preventDefault();
        controller.adiciona();
    });
}

negociacao-controller.ts

import { Negociacao } from '../models/negociacao.js';
import { Negociacoes } from '../models/negociacoes.js';

Estrutura mínima para o HTML (faltando)

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Negociações</title>
</head>
<body>
  <form class="form">
    <input type="date" id="data" required>
    <input type="number" id="quantidade" required>
    <input type="number" id="valor" step="0.01" required>
    <button type="submit">Adicionar</button>
  </form>

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

Check-list final de pendências

ItemAção necessária
index.htmlCriar o HTML com formulário e importar app.js
tsconfig.jsonAdicionar configuração para gerar dist/
Estrutura de pastasOrganizar conforme mostrado acima
Imports e caminhos relativosVerificar se todos terminam com .js após compilação
Event listener no formConfirmar se app.ts trata o submit
package.json (opcional)Adicionar "type": "module" se usar Node

Organiza seus arquivos nas pastas corretas e sobe eles novamente no github.
Assim eu consigo analisar melhor.
Provavelmente só um erro de organização.
Testa ai e me avise.
Aguardo...

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

Meu amigo Diego...
Vou disponibilizar o link do projeto no repositorio da Alura com as correçoes, principalmente as pastas nos locais corretos e arquivos de configuração.
Baixa ai e vamos testar.
Vai analisando com calma cada arquivo , pastas e comparando com o seu.
Anote as diferenças e depois vai modificando até que funcione.
Salva como um documento e posta aqui o resultado.
Isso vai servir muito bem como laboratorio e vamos aprender muito.
Vou analisando aqui também para depois comparar os resultados.
Aqui estao os links dos repositorios:
https://github.com/alura-cursos/typescript-curso-1
https://github.com/alura-cursos/typescript-curso-2
Confere ai e retorna um feedback.
Aguardo...
Bons estudos.
Observação:
No vscode tem uma ferramenta propria para comparar arquivos se não quiser fazer manualmente.
Local da ferramenta para comparar dois arquivos:
Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Lembrando em selecionar arquivo ,clicar botao direito mouse ,selecione opçao na imagem acima edepois com outro arquivo mesma coisa só que muda a opção: compare com selected.

Olá Ronaldo. Eu baixei os arquivos que voce mandou, coloquei numa pasta cópia dos meus arquivos originais, substituindo eles nessa pasta. No entanto, quando utilizei o npm run compile, ele encontrou inúmeros erros

app/views/negociacoes-view.ts:12:5 - error TS1241: Unable to resolve signature of method decorator when called as an expression.
  The runtime will invoke the decorator with 2 arguments, but the decorator expects 3.

12     @escapar
       ~~~~~~~~

  app/decorators/escapar.ts:4:9
    4         descriptor: PropertyDescriptor
              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    An argument for 'descriptor' was not provided.

app/views/negociacoes-view.ts:12:6 - error TS1270: Decorator function return type 'PropertyDescriptor' is not assignable to type 'void | ((model: Negociacoes) => string)'.

12     @escapar
        ~~~~~~~

node_modules/@types/node/globals.d.ts:6:76 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

6 type _Request = typeof globalThis extends { onmessage: any } ? {} : import("undici-types").Request;
                                                                             ~~~~~~~~~~~~~~

node_modules/@types/node/globals.d.ts:7:77 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

7 type _Response = typeof globalThis extends { onmessage: any } ? {} : import("undici-types").Response;
                                                                              ~~~~~~~~~~~~~~

node_modules/@types/node/globals.d.ts:8:77 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

8 type _FormData = typeof globalThis extends { onmessage: any } ? {} : import("undici-types").FormData;
                                                                              ~~~~~~~~~~~~~~

node_modules/@types/node/globals.d.ts:9:76 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

9 type _Headers = typeof globalThis extends { onmessage: any } ? {} : import("undici-types").Headers;
                                                                             ~~~~~~~~~~~~~~

node_modules/@types/node/globals.d.ts:10:81 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

10 type _MessageEvent = typeof globalThis extends { onmessage: any } ? {} : import("undici-types").MessageEvent;
                                                                                   ~~~~~~~~~~~~~~

node_modules/@types/node/globals.d.ts:12:14 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

12     : import("undici-types").RequestInit;
                ~~~~~~~~~~~~~~

node_modules/@types/node/globals.d.ts:14:14 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

14     : import("undici-types").ResponseInit;
                ~~~~~~~~~~~~~~

node_modules/@types/node/globals.d.ts:15:78 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

15 type _WebSocket = typeof globalThis extends { onmessage: any } ? {} : import("undici-types").WebSocket;
                                                                                ~~~~~~~~~~~~~~

node_modules/@types/node/globals.d.ts:16:80 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

16 type _EventSource = typeof globalThis extends { onmessage: any } ? {} : import("undici-types").EventSource;
                                                                                  ~~~~~~~~~~~~~~

node_modules/@types/node/globals.d.ts:464:25 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

Found 21 errors in 3 files.

Errors  Files
     2  app/views/negociacoes-view.ts:12
    16  node_modules/@types/node/globals.d.ts:6
     3  node_modules/@types/node/http.d.ts:1947

Não foi possível colocar todos os erros, uma vez que superava o limite de caracteres

Bom dia Diego.
Acho que me entendeu errado.
Baixe o curso 1 que está mais parecido com seu projeto.
Agora compare os arquivos que estão no seu projeto e os arquivos do curso 1.
Os arquivos que não existem em seu projeto no curso 1 pode descartar.
Agora os arquivos de mesmo nome coloque nas pastas seguindo o exemplo do curso 1.
Não copie nada e sim crie as pastas no seu projeto.
Agora que os projetos estão iguais abra arquivo por arquivo e veja as diferenças que há em cada arquivo.
Faça as modificações necessarias em cada arquivo para que fiquem iguais a do curso 1.
Agora rode os comandos:

# 1. Entrar na pasta do projeto
cd nome-do-projeto

# 2. Instalar dependências
npm install

# 3. Compilar (se houver build)
npm run build   # ou npx tsc

# 4. Rodar o servidor
npm run dev     # ou npm start

Até a noite lhe envio o projeto corrigido com todas as modificações e o motivo dos erros.
Mas já vai testando ai para ver se consegue finalizar.
Bons estudos.

Eu resolvi testar apenas os arquivos originais da minha pasta. Essa resolução recomendada está se mostrando excessivamente complicada para o problema, e só tem criado mais problemas. Eu consegui resolver a maior parte dos erros, restaurando o arquivo tsconfig.json para sua forma anterior as recomendações, e alterando o negociacoes-services.ts "return fetch" para

return fetch('http://localhost:3000')

Com isso praticamente todos os erros despareceram, com excessão de

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Não sei ao que se refere, ou sequer se realmente é um problema

Ola Diego.
Espero que consiga resolver...
Sinceramente o código que me enviou esta uma bagunça e é preciso tempo para analisar e organizar os arquivos nas pastas corretas.
As vezes é melhor começar do zero passo a passo até cair no problema.
E fazer um debug de preferencia...
A parte boa disso tudo é que vai ganhando experiencia neste processo.
Revise os passos desde do inicio e assiste as aulas novamente que tudo vai dar certo.
Bons estudos e envia um feedback com o resultado final.
Obs: O erro mencionado acima pode ser qualquer coisa. Depende do contexto.
Pesquisa sobre o erro que vai encontrar uma centena de possibilidades.
Mas já é um começo...