[Dúvida] Como que o

Eu vou fazer a pergunta talvez sabendo a resposta.

Todos os querySelector estavam sendo feitos na Classe "negociacaoController()":

import { Negociacao } from "../models/negociacao.js";
import { Negociacoes } from "../models/negociacoes.js";
import { NegociacoesView } from "../views/negociacoes-view.js";

export class NegociacaoController {
    private inputData: HTMLInputElement;
    private inputQuantidade: HTMLInputElement;
    private inputValor: HTMLInputElement;
    private negociacoes = new Negociacoes();
    private negociacoesView = new NegociacoesView('#negociacoesView');

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

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

        this.negociacoes.adiciona(negociacao);

        console.log(this.negociacoes.lista());

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

O professor, na Classe "NegociacoesController", apenas passou o seletor como parâmetro na hora que fez a instanciação do objeto "NegociacoesView()" e o método construtor da Classe "NegociacoesView()" é quem pegou o elemento, fez o querySelector(seletor):

export class NegociacoesView {

    private elemento: HTMLElement;
    
    constructor (seletor: string) {
        
        this.elemento = document.querySelector(seletor);
    }
    
    template(): string {

        return `
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>DATA</th>
                        <th>QUANTIDADE</th>
                        <th>VALOR</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        `;
    }

    update(): void {
        this.elemento.innerHTML = this.template();
    }
}

Como posso imaginar, todos os documentos devem estar interligados.

Tudo começa com o app.ts > negociacoes-controller.ts > negociacoes-view.ts

Estão separados fisicamente, mas estão conectados por meio dos exports e estão de alguma forma juntos.

Dessa forma todos podem acessar a página HTML e fazer o querySelector (contando que seja passado de alguma forma o elemento), certo?

Fiz até um teste:

Troquei no documento "negociacao-controller.ts":

De:

private negociacoesView = new NegociacoesView('#negociacoesView');

Para:

private negociacoesView = new NegociacoesView();

E

Troquei no documento "negociacao-view.ts":

De:

 constructor (seletor: string) {
        
        this.elemento = document.querySelector(seletor);
    }

Para:

constructor () {
        
        this.elemento = document.querySelector('#negociacoesView');
    }

Funcionou da mesma forma.

Não sei se irá quebrar lá na frente quando o professor fizer mais alterações, mas eu creio que não.

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

Sucesso na sua jornada!