[typescript] ‘HTMLElement’유형의 값에 ‘value’특성이 없습니다.

Program / 글쓴이

typescript를 가지고 놀고 있으며 입력 상자에 텍스트가 입력 될 때 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'

그러나 컴파일러는 크롬에서 잘 작동하는 자바 스크립트 파일을 출력합니다.

이 오류가 어떻게 발생합니까? 어떻게 고칠 수 있습니까?

또한 'HTMLElement'typescript에 따라 어떤 속성이 유효한지 어디에서 찾을 수 있습니까?

나는 자바 스크립트와 타이프 스크립트를 처음 접했기 때문에 분명한 것이 빠져있을 수 있습니다. 🙂

답변

Tomasz Nurkiewiczs의 답변에 따르면 “문제”는 타이프 스크립트가 타이프 안전하다는 것입니다. 🙂 따라서 속성을 포함하지 않는 document.getElementById()유형 HTMLElement을 반환합니다 value. 그러나 하위 유형 HTMLInputElement에는 value속성이 포함되어 있습니다.

해결책은의 결과를 캐스팅하는 것입니다 그래서 getElementById()에 HTMLInputElement이 같은 :

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

<>typescript의 캐스팅 연산자입니다. TypeScript : cast HTMLElement 질문을 참조하십시오 .

위 줄의 결과 자바 스크립트는 다음과 같습니다.

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

즉, 타입 정보를 포함하지 않습니다.

답변

반응을 사용하는 경우 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);
}

나는 몇 가지 방법을 시도 하고이 해결책을 찾았습니다
. 원래 스크립트의 문제가 무엇인지 모르겠습니다.

참고로 Tomasz Nurkiewicz의 게시물을 참조하십시오.

답변

문제는 여기 있습니다 :

document.getElementById(elementId).value

입력 요소의 ID를 전달하기 때문에에서 HTMLElement반환 된 getElementById()것이 실제로 HTMLInputElement상속 된 인스턴스 라는 것을 알고 있습니다. 정적으로 유형이 지정된 Java에서도 이와 같이 컴파일되지 않습니다.

public Object foo() {
  return 42;
}

foo().signum();

signum()방법이다 Integer하지만, 컴파일러의 정적 만 아는 형 foo()이다 Object. 그리고 방법 Object이 없습니다 signum().

그러나 컴파일러는 코드의 동적 동작이 아닌 정적 유형에만 기반 할 수 있다는 것을 알 수 없습니다. 그리고 컴파일러가 아는 한 document.getElementById(elementId)표현식 유형 에는 value속성 이 없습니다 . 입력 요소 만 값을 갖습니다.

참조 확인 HTMLElement및 HTMLInputElementMDN Typescript가 이것과 다소 일치한다고 생각합니다.

답변

또한 “DocgetId ‘s없이 Props 또는 Refs와 같은 속성을 사용하는 사람은 다음을 수행 할 수 있습니다.

("" as HTMLInputElement).value;

반전 된 따옴표가 props 값인 경우 예제는 다음과 같습니다.

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