Quando foi acionado o método construtor da classe

Esse é o código do arquivo "app.ts" da pasta "app":

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

const controller = new NegociacaoController();

const form = document.querySelector('.form'); 

form.addEventListener('submit', event => {

    event.preventDefault();

    controller.adiciona();
})

Esse é o código do arquivo "negociacao-controller.ts" da pasta "Controller":

import { Negociacao } from "../models/negociacao.js";

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

    constructor() {
        this.inputData = document.querySelector('#data');
        this.inputQuantidade = document.querySelector('#quantidade');
        this.inputValor = document.querySelector('#valor');
    }

    adiciona(): void {
        const negociacao = this.criaNegociacao;

        console.log(negociacao);

        this.limpaFormulario();
    }
    
    criaNegociacao(): Negociacao {

        const exp = /-/g;
        const date = new Date(this.inputData.value.replace(exp, ','));
        const quantidade = parseInt(this.inputQuantidade.value);
        const valor = parseFloat(this.inputValor.value);
        return new Negociacao(date, quantidade, valor);
    }

    limpaFormulario(): void {

        this.inputData.value = '';
        this.inputQuantidade.value = '';
        this.inputValor.value = '';

        this.inputData.focus;
    }
}

Fiquei na dúvida de quando o método CONSTRUTOR da classe "NegociacaoController" foi acionado para pegar as informações da página e atribuiu às propriedades da classe "NegociacaoController".

Quando houve o clique no botão do formulário eu vi que foi acionado apenas o método "adiciona", que só pegou os valores das propriedades da classe "NegociacaoController" e os passou para o novo objeto "Negociacao", mas como que ele pegou os valores das propriedades da classe se o método construtor não foi acionado antes?

Agradeço desde já a atenção!

Sucesso na sua jornada!

Diógenes,

O método "constructor()" é invocado quando é instanciado. O legal de aprender isso é que serve para várias linguagens, todas fazem a mesma coisa.

Neste código o "constructor()" está pegando informação de dentro de "querySelector"'s e preenchendo valores de variáveis privadas da classe.

Uma forma de ver é fazendo uma gambiware com tecnologia "GO-HORSE" (VAI-CAVALA) colocando três "consoles log" dentro do "addEventListener" do botão... mas precisa mudar as variáveis de "private" para "public" dentro do "negociação-controller.ts", desta forma:

export class NegociacaoController {
  public inputData: HTMLInputElement;
  public inputQuantidade: HTMLInputElement;
  public inputValor: HTMLInputElement;

... o código continua

Depois você coloca os 3 "console logs" no "app.ts" dentro do "addEventListener" do botão:

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

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

form.addEventListener("submit", (event) => {
  event.preventDefault();

  console.log(`Data: ${controller.inputData.value}`);
  console.log(`Qtd: ${controller.inputQuantidade.value}`);
  console.log(`Vlr: ${controller.inputValor.value}`);

  controller.adiciona();
});

Veja que os valores foram preenchidos 'automaticamente' quando o método foi instanciado. Foi mostrado no console do seu browser.

O ideal seria colocar os "console logs" fora do botão, logo após o "new NegociacaoController();" mas... NÃO dá tempo de preencher os campos! A não ser que você preencha os campos como "default" (value) lá no HTML, por exemplo...

<input type="date" id="data" class="form-control" required autofocus value="2022-07-25" />
            ...
<input type="number" min="1" step="1" id="quantidade" class="form-control" value="5" required/>
...
<input id="valor" type="number" class="form-control" min="0.01" step="0.01" value="150.0" required />

Qualquer valor só para testar.

Daí o "app.ts" ficaria assim:

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

const controller = new NegociacaoController();

console.log(`Data: ${controller.inputData.value}`);
console.log(`Qtd: ${controller.inputQuantidade.value}`);
console.log(`Vlr: ${controller.inputValor.value}`);

const form = document.querySelector(".form");

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

Acho que ficou mais legal, pois LOGO DEPOIS do const controller = new NegociacaoController(); os valores foram mostrados no console do browser. DETALHE: Não precisa clicar no botão "Incluir".

Talvez este exemplo também te ajude a entender melhor com mais detalhes:

===============================================================

Writing a constructor in TypeScript

January 10, 2022 - 4 min read

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}

let greeter = new Greeter("world");

https://blog.logrocket.com/writing-constructor-typescript/

===============================================================

Neste caso o construtor exige somente um parâmetro, mas é PASSADO o valor e não pego da tela.

Foi meio difícil de explicar, mas espero ter conseguido...

... e se consegui, NÃO esqueça de fechar o tópico e me pontuar, tá okay?

Medalha-medalha-medalha.

Valew!

[]'s,

Fabio I.

P.S.: "- POG,... I'm your father..."

Quando foi acionado o método construtor da classe "NegociacaoController"

Mergulhe em programação