Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Type 'Element' is not assignable to type 'HTMLInputElement'

Bom dia, estava seguindo o vídeo quando me deparei com as mensagens abaixo.

[0] app/controllers/negociacao-controller.ts(14,9): error TS2322: Type 'Element' is not assignable to type 'HTMLInputElement'. [0] Property 'accept' is missing in type 'Element'. [0] app/controllers/negociacao-controller.ts(15,9): error TS2322: Type 'Element' is not assignable to type 'HTMLInputElement'. [0] app/controllers/negociacao-controller.ts(16,9): error TS2322: Type 'Element' is not assignable to type 'HTMLInputElement'. [0] app/views/negociacoes-view.ts(6,9): error TS2322: Type 'Element' is not assignable to type 'HTMLElement'. [0] Property 'accessKey' is missing in type 'Element'.

Minha tabela também não foi exibida ao final do vídeo. Segue abaixo meu codigo do negociacao-controller e negociacoes-view

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

}
import { Negociacoes } from '../models/Negociacoes.js';
import { Negociacao } from './../models/Negociacao.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.limparFormulario();
    }

    criaNegociacao(): Negociacao {
        const exp = /-/g;
        const data = new Date(this.inputData.value.replace(exp, ','));
        const quantidade = parseInt(this.inputQuantidade.value);
        const valor = parseFloat(this.inputValor.value);

        return new Negociacao(data, quantidade, valor);

    }

    limparFormulario(): void {
        this.inputData.value = '';
        this.inputValor.value = '';
        this.inputQuantidade.value = '';
        this.inputData.focus();
    }

}
2 respostas
solução!

Bom dia, consegui contornar o problema através das seguintes soluções:

Para o erro: 'Element' is not assignable to type 'HTMLInputElement'. [0] app/views/negociacoes-view.ts(6,9): error TS2322: Type 'Element' is not assignable to type 'HTMLElement'. [0] Property 'accessKey' is missing in type 'Element'.

Troquei de document.querySelector para document.getElementById

export class NegociacoesView {

    private elemento: HTMLElement;

    constructor(seletor: string) {
        this.elemento = document.getElementById(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();
    }

}

Para os erros:

[0] app/controllers/negociacao-controller.ts(14,9): error TS2322: Type 'Element' is not assignable to type 'HTMLInputElement'. [0] Property 'accept' is missing in type 'Element'. [0] app/controllers/negociacao-controller.ts(15,9): error TS2322: Type 'Element' is not assignable to type 'HTMLInputElement'. [0] app/controllers/negociacao-controller.ts(16,9): error TS2322: Type 'Element' is not assignable to type 'HTMLInputElement'.

Troquei de document.querySelector para document.getElementById Troquei de HTMLInputelement para HTMLElement e fiz a conversão para HTMLInputelement para resgatar o valor

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

export class NegociacaoController {

    private inputData: HTMLElement;
    private inputQuantidade: HTMLElement;
    private inputValor: HTMLElement;
    private negociacoes = new Negociacoes();
    private negociacoesView = new NegociacoesView('negociacoesView');

    constructor() {
        this.inputData = document.getElementById("data");
        this.inputQuantidade = document.getElementById("quantidade");
        this.inputValor = document.getElementById("valor");
        this.negociacoesView.update();
    }

    adiciona(): void {
        const negociacao = this.criaNegociacao();
        this.negociacoes.adiciona(negociacao);
        console.log(this.negociacoes.lista());
        this.limparFormulario();
    }

    criaNegociacao(): Negociacao {
        const exp = /-/g;

        const data = new Date((this.inputData as HTMLInputElement).value.replace(exp, ','));
        const quantidade = parseInt((this.inputQuantidade as HTMLInputElement).value);
        const valor = parseFloat((this.inputValor as HTMLInputElement).value);

        return new Negociacao(data, quantidade, valor);

    }

    limparFormulario(): void {
        (this.inputData as HTMLInputElement).value = '';
        (this.inputQuantidade as HTMLInputElement).value = '';
        (this.inputValor as HTMLInputElement).value = '';
        this.inputData.focus();
    }

}

Não sei e foi a melhor solução mas foi a que encontrei para contornar o problema. Caso tenha uma alternativa melhor, por favor, me falem

Oi Claudio, tudo bem?

Muito obrigada por postar aqui a solução do problema! São pessoas como você que fazem do fórum esse lugar tão massa de troca de conhecimento. :D

Um abraço e bons estudos.