'Değer' özelliği, 'HTMLElement' türünün değerinde mevcut değil

235

Ben daktilo ile oynuyorum ve metin bir giriş kutusuna girilir gibi bir p elemanı güncelleyecek bir komut dosyası oluşturmaya çalışıyorum.

Html aşağıdaki gibi görünür:

<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>

Ve greeter.tsdosya:

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

Ne zaman derlemek tscaşağıdaki "hata" alıyorum:

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

Ancak derleyici, kromda iyi çalışan bir javascript dosyası çıkarır.

Neden bu hatayı alıyorum? Nasıl düzeltebilirim?

Ayrıca, 'HTMLElement'typcript'e göre hangi özelliklerin geçerli olduğunu nereden bulabilirim ?

Javascript ve daktilo için çok yeni olduğumu lütfen unutmayın, bu yüzden bariz bir şey eksik olabilir. :)

typescript

— Bjarke Freund-Hansen
kaynak

448

Tomasz Nurkiewiczs'in cevabına dayanarak, "problem" dizginin daktiloda yazılmış olmasıdır. :) Yani bir özellik içermeyen document.getElementById()türü döndürür . Ancak alt tür özelliği içerir .HTMLElementvalueHTMLInputElementvalue

Bir çözüm sonucunu döküm etmektir Yani getElementById()için HTMLInputElementböyle:

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

<>daktilodaki döküm operatörüdür. TypeScript: döküm HTMLElement sorusuna bakın .

Yukarıdaki satırdan çıkan javascript şuna benzer:

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

yani tip bilgisi içermez.

— Bjarke Freund-Hansen
kaynak

html'nin hangi öğesinin daktilo için hangi türe ait olduğuna dair bir listeniz var mı? evet ise o zaman pls sonrası birisi için yararlı olacak !! harika cevap için teşekkürler.

— Pardeep Jain

1

Bu düzeltme kodumu tamamen kırar; "Bundan sonra gelen her şey" bir işlev değildir "der. TS'nin bunu ele alma şeklinin ardındaki mantığı anlamıyorum; getElementById herhangi bir öğe türünü döndürebileceğinden, varsayılan değer olarak kabul edilmelidir.

— Kaplumbağalar Sevimli

@TurtlesAreCute Bu çözümün kodunuzu nasıl kırdığını merak ediyorum. Umarım bir yıl sonra bir çözüm buldunuz, ancak HTMLInputElement'e yayın yapmalıydı.

— Michaël Polla

Benim durumumda, HTMLAnchorElement olarak değiştirmek zorunda kaldı.

— Wildhammer

@Wildhammer Öğeniz bir Giriş öğesi olmadığı için! OP'ler öyle.

— Auspex

68

Tepki kullanıyorsanız asoperatörü kullanabilirsiniz .

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

— Michael
kaynak

3

Bazı nedenlerden dolayı, burada kabul edilen yanıt benim için şu hatayı artırıyordu: 'HTMLInputElement' JSX öğesinin karşılık gelen bir kapatma etiketi yok. Benim için işe yarayan cevap bu.

— NigelTufnel

1

Bunun nedeni, tsx dosyalarında, React'te kullanıldığı için <>operatörleri yayınlamak için kullanamamanızdır . Yani şu şekilde kullanmalısınız: basarat.gitbooks.io/typescript/docs/types/…

— Powderham

Her ne kadar bu benim için işe yaramadı, bana doğru yönde :) doğrudan oy vermedi!

— Simon Price

40

HTMLInputElement öğesine güncellemek istediğiniz öğeyi yayınlamayı deneyin. Diğer cevaplarda belirtildiği gibi, derleyiciye bunun belirli bir HTMLElement türü olduğunu ima etmeniz gerekir:

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

— woodysan
kaynak

26

Güncellenmiş örnek:

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

Typescriptlang'dan Belgeler:

TypeScript - Temel Türler - Tür iddiaları

— Aslan burcu
kaynak

17

Bunun için hızlı bir düzeltme özelliği seçmek için [] kullanın.

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

Sadece birkaç yöntem deniyorum ve bu çözümü buluyorum
, orijinal betiğinizin arkasındaki sorunun ne olduğunu bilmiyorum.

Referans için Tomasz Nurkiewicz'in gönderisine bakabilirsiniz.

— Rüyada
kaynak

Soruya doğru cevap, bana çok yardımcı oldu.

— Monir Khan

15

Sorun burada:

document.getElementById(elementId).value

Geri HTMLElementdöndürülen öğenin getElementById()aslında bir HTMLInputElementgiriş öğesinin kimliğini ilettiğiniz için bu öğeden devralma örneğidir . Benzer şekilde statik olarak yazılan Java'da bu derlenmez:

public Object foo() {
  return 42;
}

foo().signum();

signum()bir yöntemdir Integer, ancak derleyici yalnızca statik türünü bilir foo(), yani Object. Ve Objectbir signum()yöntemi yok.

Ancak derleyici, kodunuzun dinamik davranışına değil, yalnızca statik türlere dayanabileceğini bilemez. Derleyicinin bildiği kadarıyla, document.getElementById(elementId)ifade türünün valueözelliği yoktur. Yalnızca girdi öğelerinin değeri vardır.

Bir referans için HTMLElementve HTMLInputElementMDN'de kontrol edin . Sanırım daktilo az çok bunlarla tutarlıdır.

— Tomasz Nurkiewicz
kaynak

Ama .valuep elementine erişemiyorum, elemente erişiyorum input. Yoksa yanılıyor muyum?

— Bjarke Freund-Hansen

1

@bjarkef: Arıyorsunuz document.getElementById("greet")ve <p id="greet"></p>...

— Tomasz Nurkiewicz

Ben document.getElementById("greet").innerTextmükemmel geçerli olması gerektiğini arıyorum , ben sadece valueiçeren satırda giriş elemanı özelliği erişiyorum : var inputValue = document.getElementById(elementId).value;içindegreet(elementId) ve bu html denir onkeyup="greet('name')"giriş formunda. Bu yüzden kodu yanlış okuduğunuzu düşünüyorum, yanılıyorsam lütfen beni düzeltin. :)

— Bjarke Freund-Hansen

@bjarkef: Üzgünüm, haklıydın. Cevabımı yeniden yazdım, bir bakın!

— Tomasz Nurkiewicz

1

Ah, bu mantıklı. Bu yüzden döndürülen değeri kullanmalıyımgetElementById ve bunu daktiloda nasıl yaparım? Yoksa getElementByIdgeri dönen başka bir yöntem var HTMLInputElementmı?

— Bjarke Freund-Hansen

11

Ayrıca "DocgetId'leriniz" olmadan Props veya Refs gibi özellikleri kullanan herkes için şunları yapabilirsiniz:

("" as HTMLInputElement).value;

Ters tırnakların sahne değeriniz olduğu durumlarda bir örnek şöyle olur:

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

— KidKode
kaynak

4

Açısal kullanıyorsanız,

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

— Rohit Grover
kaynak

1

Bu iş benim için:

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

— Juan Pablo
kaynak

Biçimlendirme Gerekiyor

— Standin.Wolf

-1

Sorun:

error 'HTMLElement' türünde 'text' özelliği yok

Çözüm: daktilo biz döküm gereken document.getElementById()türünü döndürür HTMLElementiçinde< HTMLScriptElement >

Dolayısıyla, typescript.js tarafından beklendiği gibi hatayı çözmek için aşağıdaki yolu izleyerek yapabiliriz

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

Benim için çalıştı .. umarım senin için de çalışır.

— Alok Adhao
kaynak