Criando a classe controller

Classe LivroController

Essa classe é a responsável por acessar os componente do DOM e recuperar os dados inseridos nos campos.

import { Livro } from "../models/livro";
import { Livros } from "../models/livros";
import { LivrosView } from "../views/livrosview";

export class LivroController{

    private _inputTitulo: HTMLInputElement;
    private _inputAutor: HTMLInputElement;
    private _inputEditora: HTMLInputElement;
    private _inputAno: HTMLInputElement;

    constructor(){
        this._inputTitulo = <HTMLInputElement>document.querySelector('#titulo')
        this._inputAutor = <HTMLInputElement>document.querySelector('#autor')
        this._inputEditora = <HTMLInputElement>document.querySelector('#editora')
        this._inputAno = <HTMLInputElement>document.querySelector('#ano')

    }

    public cadastrar(event: Event){

        event.preventDefault()

        let livro = new Livro(
            this._inputTitulo.value,
            this._inputAutor.value,
            this._inputEditora.value,
            parseInt(this._inputAno.value)
        )

        console.log(livro);

    }

}

Arquivo app.js

O arquivo app.js foi alterado para que a classe controle seja instanciada no início da nossa aplicação e também vincular a ação do botão ao método cadastrar.

import { LivroController } from "./controllers/livrocontroller";

let controller = new LivroController();

document.querySelector('.form').addEventListener('submit',controller.cadastrar.bind(controller));