Erro no Updade model | TypeScript parte 1: evoluindo seu JavaScript

Está dando erro de Null

NegociacoesView.js:6 Uncaught TypeError: Cannot set property 'innerHTML' of null at NegociacoesView.update (NegociacoesView.js:6) at new NegociacaoController (NegociacaoController.js:8) at app.js:1

class NegociacaoController{

        private _inputData: HTMLInputElement;
        private _inputQuantidade: HTMLInputElement;
        private _inputValor: HTMLInputElement;
        private _negociacoes = new Negociacoes();
        private _negociacoesView = new NegociacoesView('#negociacoesView');

        constructor(){
            this._inputData = <HTMLInputElement>document.querySelector('#data');
            this._inputQuantidade = <HTMLInputElement>document.querySelector('#quantidade');
            this._inputValor = <HTMLInputElement>document.querySelector('#valor');
            this._negociacoesView.update(this._negociacoes);
        }

        adiciona(event: Event){

            event.preventDefault();

            const negociacao = new Negociacao(
                new Date(this._inputData.value.replace(/-/g, ',')),
                parseInt(this._inputQuantidade.value),
                parseFloat(this._inputValor.value)

            )

            this._negociacoes.adiciona(negociacao);
            this._negociacoesView.update(this._negociacoes);
        }



}

class NegociacoesView {

    private _elemento: Element;

    constructor(seletor: string) {

        this._elemento = document.querySelector(seletor);
    }

    update(model: Negociacoes): void{

        this._elemento.innerHTML = this.template(model);

    }

    template(model: Negociacoes): string {

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

            <tbody>
            ${model.paraArray().map(negociacao => {
               return               
               `
                    <tr>
                        <td>${negociacao.data.getDate()}/${negociacao.data.getMonth()+1}/${negociacao.data.getFullYear()}</td>
                        <td>${negociacao.quantidade}</td>
                        <td>${negociacao.valor}</td>
                        <td>${negociacao.volume}</td>
                    </tr>                        
                `
            }).join('')}      
            </tbody>


            <tfoot>
            </tfoot>
        </table>               
        `
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<body class="container">

    <h1 class="text-center">Negociações</h1>

    <div id="mensagemView"></div>

    <form class="form">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>        
        </div>    

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

    <br>
    <br>

    <div id = "NegociacoesView"></div>

    <script src="js/models/Negociacao.js"></script>
    <script src="js/controllers/NegociacaoController.js"></script>
    <script src="js/models/Negociacoes.js"></script>
    <script src="js/views/NegociacoesView.js"></script>
    <script src="js/app.js"></script>

</body>
</html>

Olá Osiel, tudo bem com você?

Isso aconteceu na hora de pegar o seletor, veja:

Cannot set property 'innerHTML' of null at NegociacoesView.update (NegociacoesView.js:6)

Ou seja, o atributo "null" não tem a propriedade innerHTML, então em algum momento de nosso código algo que deveria ser um elemento html virou nulo :)

E está aqui:

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

O id está incorreto observe:

    <div id = "NegociacoesView"></div>

Ai você pode ou mudar para:

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

E manter no HTML daquela maneira :)

Ou fazer o inverso:

<div id = "negociacoesView"></div>

E manter o javascript normal!

Abraços e Bons Estudos :)