Свойство 'value' не существует для значения типа 'HTMLElement'

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

HTML выглядит следующим образом:


    
    
    
        <p id="greet"></p>
        
            
        
    
    

И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, который прекрасно работает в chrome.

Почему я получил эту ошибку? И как я могу это исправить?

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

Обратите внимание, что я очень плохо знаком с javascript и typcript, поэтому я могу упустить что-то очевидное. :)

Ответы на вопрос(8)

вы можете использоватьas оператор.

let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;
 NigelTufnel26 сент. 2018 г., 16:02
По какой-то причине принятый здесь ответ вызвал для меня следующую ошибку: JSX element 'HTMLInputElement» не имеет соответствующего закрывающего тега. Это ответ, который работал для меня.
 Powderham01 апр. 2019 г., 17:41
Причина в том, что в файлах TSX вы не можете использовать операторы для приведения, так как они используются в React. Таким образом, вы должны использовать как:basarat.gitbooks.io/typescript/docs/types/...
 Simon Price22 мая 2019 г., 08:39
Хотя это не сработало для меня, оно указало мне правильное направление :) голосование !!!

Быстрое решение этой проблемы - использование [] для выбора атрибута.

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

Я просто попробую несколько методов и найду это решение,

Я нене знаю чтоПроблема в вашем оригинальном сценарии.

Для справки вы можете обратиться к Томашу Нуркевичус пост.

кто использует свойства, такие как реквизиты или ссылки без вашего "DocgetId в» тогда ты можешь:

("" as HTMLInputElement).value;

Где перевернутые кавычки - это значение вашего реквизита, поэтому пример будет таким:

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

который вы хотите обновить, к HTMLInputElement. Как указано в других ответах, вам нужно указать компилятору, что это особый тип HTMLElement:

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

Свойство ошибки 'текст' не существует по типуHTMLElement»

Решение: в typeScript нам нужно привестиdocument.getElementById() который возвращает типHTMLElement в< HTMLScriptElement >

Таким образом, мы можем сделать это следующим образом, чтобы устранить ошибку, как ожидаетсяtypescript.js

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

Это сработало для меня .. надеюсь, что это работает и для вас.

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

Документация:

TypeScript - Основные типы - Утверждения типа

Проблема здесь:

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 более или менее соответствует этим.

 Tomasz Nurkiewicz20 окт. 2012 г., 17:30
@bjarkef: ты звонишьdocument.getElementById("greet") и у тебя есть<p id="greet"></p>...
 Tomasz Nurkiewicz20 окт. 2012 г., 17:39
@bjarkef: извини, ты был прав. Я переписал свой ответ, посмотрите!
 Bjarke Freund-Hansen20 окт. 2012 г., 17:44
Ах, это имеет смысл. Так что я должен бросить значение, возвращенное изgetElementById и как мне это сделать в машинописи? Или есть другой метод, чемgetElementById что возвращает?HTMLInputElement
 Bjarke Freund-Hansen20 окт. 2012 г., 17:20
Но я не получаю доступ.value на элементе p я получаю к нему доступ наinput элемент. Или я ошибаюсь?
 Bjarke Freund-Hansen20 окт. 2012 г., 17:34
я звонюdocument.getElementById("greet").innerText который должен быть совершенно действительным, я только доступ кvalue свойство элемента input в строке, содержащей:var inputValue = document.getElementById(elementId).value; вgreet(elementId) и это называется в HTMLonkeyup="greet('name')" в форме ввода. Поэтому я думаю, что вы неправильно читаете код, пожалуйста, исправьте меня, если я ошибаюсь. :)
Решение Вопроса

проблема» является то, что машинопись является безопасным. :) Итакdocument.getElementById() возвращает типHTMLElement который не содержитvalue имущество. ПодтипHTMLInputElement однако содержитvalue имущество.

Таким образом, решение состоит в том, чтобы бросить результатgetElementById() вHTMLInputElement как это:

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

<> является оператором приведения в машинописи. Смотри вопросTypeScript: кастинг HTMLElement.

Результирующий javascript из строки выше выглядит так:

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

т.е. не содержащий информации о типе.

 Pardeep Jain16 янв. 2016 г., 09:21
У вас есть список, какой элемент HTML принадлежит к какому типу для машинописи? если да, то, пожалуйста, пост будет полезно для кого-то !! спасибо за отличный ответ.
 Michaël Polla29 мая 2018 г., 14:39
@TurtlesAreCute I 'Мне интересно, как это решение сломало ваш код. Надеюсь, через год вы нашли решение, но приведение к HTMLInputElement должно было сработать.
 Turtles Are Cute25 мар. 2017 г., 00:36
Это исправление полностью нарушает мой код; говорит, что будет дальше "это не функция, Я неt понять причины, по которым TS справляется с этим; Поскольку getElementById может возвращать любой тип элемента, любой должен быть принят по умолчанию.

Ваш ответ на вопрос