Властивість 'value' не існує для значення типу 'HTMLElement'

Я граю з машинописом і намагаюся створити сценарій, який буде оновлювати p-елемент, коли текст вводиться у поле введення.

Html виглядає наступним чином:

<html>
    <head>
    </head>
    <body>
        <p id="greet"></p>
        <form>
            <input id="name" type="text" name="name" value="" onkeyup="greet('name')" />
        </form>
    </body>
    <script src="greeter.js"></script>
</html>

І greeter.tsфайл:

function greeter(person)
{
    return "Hello, " + person;
}

function greet(elementId)
{
    var inputValue = document.getElementById(elementId).value;

    if (inputValue.trim() == "")
        inputValue = "World";

    document.getElementById("greet").innerText = greeter(inputValue);
}

Коли я компілюю, tscя отримую таку "помилку":

/home/bjarkef/sandbox/greeter.ts(8,53): The property 'value' does not exist on value of type 'HTMLElement'

Однак компілятор виводить файл javascript, який добре працює в хромі.

Як я можу отримати цю помилку? І як я можу це виправити?

Крім того, де я можу шукати, які властивості є дійсними 'HTMLElement'відповідно до машинопису?

Зауважте, що я дуже новачок у JavaScript та typecript, тому я можу пропустити щось очевидне. :)

Виходячи з відповіді Томаша Нуркевича, "проблема" полягає в тому, що машинопис є typesafe. :) Отже, document.getElementById()повертає тип, HTMLElementякий не містить valueвластивості. Однак підтип HTMLInputElementмістить valueвластивість.

Таким чином, рішення кинути результат з getElementById()до HTMLInputElementтак:

var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;

<>є оператором кастингу в typecript. Дивіться питання TypeScript: лиття HTMLElement .

Отриманий Javascript із рядка вище виглядає так:

inputValue = (document.getElementById(elementId)).value;

тобто не містить інформації про тип.

Якщо ви використовуєте react, ви можете скористатися asоператором.

let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;

Спробуйте вкинути елемент, який ви хочете оновити, до HTMLInputElement. Як зазначено в інших відповідях, вам потрібно натякнути компілятору, що це специфічний тип HTMLElement:

var inputElement = <HTMLInputElement>document.getElementById('greet');
inputElement.value = greeter(inputValue);

Оновлений приклад:

const inputElement: HTMLInputElement = document.getElementById('greet') as HTMLInputElement
const inputValue: string = inputElement.value

Документація з Typescriptlang:

TypeScript - Основні типи - твердження типу

Швидке виправлення цього - використання [] для вибору атрибута.

function greet(elementId) {
    var inputValue = document.getElementById(elementId)["value"];
    if(inputValue.trim() == "") {
        inputValue = "World";
    }
    document.getElementById("greet").innerText = greeter(inputValue);
}

Я просто спробую кілька методів і знайти це рішення,
я не знаю, у чому полягає проблема вашого оригінального сценарію.

Для довідки ви можете звернутися до посади Томаша Нуркевича.

Проблема тут:

document.getElementById(elementId).value

Ви знаєте, що HTMLElementповернений з getElementById()насправді є екземпляром HTMLInputElementуспадкування від нього, тому що ви передаєте ідентифікатор елемента введення. Аналогічно в статично набраній Java ця копія не буде:

public Object foo() {
  return 42;
}

foo().signum();

signum()є методом Integer, але компілятор знає лише статичний тип foo(), який є Object. І Objectне має signum()методу.

Але компілятор цього не може знати, він може базуватися лише на статичних типах, а не на динамічній поведінці вашого коду. І наскільки компілятор знає, тип document.getElementById(elementId)вираження не має valueвластивості. Тільки вхідні елементи мають значення.

Для довідкової перевірки HTMLElementта HTMLInputElementв MDN. Я думаю, що Typescript більш-менш відповідає цим.

Також для тих, хто використовує такі властивості, як Реквізит або Відношення без вашого "DocgetId", ви можете:

("" as HTMLInputElement).value;

Якщо перевернуті лапки - це значення реквізиту, такий приклад виглядає так:

var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);

Якщо ви використовуєте кутовий, ви можете використовувати -

const element = document.getElementById('elemId') as HTMLInputElement;

Ця робота для мене:

let inputValue = (swal.getPopup().querySelector('#inputValue ')as HTMLInputElement).value

Проблема:

помилка Властивість 'текст' не існує для типу 'HTMLElement'

Рішення: машинопис ми повинні гіпс , document.getElementById()який повертає тип HTMLElementв< HTMLScriptElement >

Таким чином, ми можемо це зробити, дотримуючись наступного способу вирішити помилку, як очікувалося від typecript.js

Code: var content: string = ( < HTMLScriptElement > document.getElementById(contentId)).text;

Це працювало для мене .. сподіваюся, що він працює і для вас.