TypeScriptで型に関するエラーが解消できない。

Question

TypeScriptの入門書を見ながらサンプルを作成しています、下記のコードのtext変数にHTMLInputElement型を指定すると

”Type 'Element' is not assignable to type 'HTMLInputElement'.
Property 'accept' is missing in type 'Element'.

とエラーが出て右辺の値いろいろ変えても解決できません、、
型について調べてみても具体的にHTMLInputElementが何の要素を指すかもわからなかったです。

エラーの要因やTypeScriptのクセなどが知りたいです、ご回答よろしくお願いします。

function calc(price:number, tax?:number):number{
    let tx = 0;
    if(tax){
        tx = tax;
    }else{
        tx = 0.08;
    }
    return Math.floor(price * (1 + tx));
}

function doClick():void{
    let text:HTMLInputElement = document.querySelector('#text1');
    let msg:Element = document.querySelector('#msg');

    msg.innerHTML = calc(Re(text)) + "円";

    function Re(E){
        return E;
    }
}

Answer 1

document.querySelectorの戻り値の型はElement型に指定されています。
Element型は自動でHTMLInputElementにキャストされないので、

let text:HTMLInputElement = document.querySelector('#text1') as HTMLInputElement;
//または、
let text:HTMLInputElement = <HTMLInputElement>document.querySelector('#text1');

として明示的な型変換を行ってください。
typescriptはバージョンによって型情報の変更があったりするので、なるべく最新のバージョンを使用することをおすすめします。入門書などのサンプルが動かない場合はある程度修正が必要になることが多くなります。

Comments

[nobodytolove123]

回答ありがとうございます、明示的に行わないといけないのですね