'HTMLElement'유형의 값에 'value'특성이 없습니다.

235

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에 따라 어떤 속성이 유효한지 어디에서 찾을 수 있습니까?

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

typescript

— 비 케르 케 프룬 트-한센
소스

448

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;

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

— 비 케르 케 프룬 트-한센
소스

html의 어떤 요소가 typescript의 어떤 유형에 속하는 목록이 있습니까? 그렇다면 pls 게시 누군가에게 도움이 될 것입니다! 큰 답변 주셔서 감사합니다.

— Pardeep Jain은

1

이 수정은 내 코드를 완전히 손상시킵니다. 다음에 오는 것은 "기능이 아닙니다"라고 말합니다. TS가이를 처리하는 방식에 대한 추론을 이해하지 못합니다. getElementById는 모든 요소 유형을 리턴 할 수 있으므로 기본적으로 모든 요소 유형을 승인해야합니다.

— 거북은 귀엽다

@TurtlesAreCute이 솔루션이 어떻게 코드를 깨뜨 렸는지 궁금합니다. 1 년 후 해결책을 찾았지만 HTMLInputElement로 캐스팅하면 효과가 있었을 것입니다.

— Michaël Polla 12

필자의 경우 HTMLAnchorElement로 변경해야했습니다.

— 와일드 해머

@Wildhammer 요소 가 입력 요소 가 아니기 때문에 ! OP는입니다.

— Auspex

68

반응을 사용하는 경우 as연산자를 사용할 수 있습니다 .

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

— 남자 이름
소스

3

어떤 이유로 든 여기에서 받아 들여진 대답은 다음과 같은 오류가 발생했습니다 .JSX 요소 'HTMLInputElement'에 해당 닫는 태그가 없습니다. 이것이 나를 위해 일한 대답입니다.

— NigelTufnel

1

그 이유는 tsx 파일에서 <>연산자를 사용하여 캐스트 할 수 없기 때문입니다. 왜냐하면 React에서 사용되기 때문입니다. basarat.gitbooks.io/typescript/docs/types/…

— Powderham

이것은 나를 위해 작동하지 않았지만, 올바른 방향을 지시했습니다 :) up vote !!!

— Simon Price

40

업데이트하려는 요소를 HTMLInputElement로 캐스트하십시오. 다른 답변에서 언급했듯이 컴파일러에 특정 유형의 HTMLElement라는 힌트를 제공해야합니다.

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

— 우디 산
소스

26

업데이트 된 예 :

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

Typescriptlang의 문서 :

TypeScript-기본 유형-유형 어설 션

— 사자 별자리
소스

17

이에 대한 빠른 수정은 []를 사용하여 속성을 선택하는 것입니다.

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

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

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

— 드림
소스

질문에 대한 적절한 대답은 많은 도움이되었습니다.

— Monir Khan

15

문제는 여기 있습니다 :

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가 이것과 다소 일치한다고 생각합니다.

— 토마스 뉘키에 비츠
소스

그러나 .valuep 요소에서 액세스하지 않고 요소에서 액세스하고 있습니다 input. 아니면 내가 착각합니까?

— Bjarke Freund-Hansen

1

@bjarkef : 당신은 전화 document.getElementById("greet")하고 있고 당신은 <p id="greet"></p>…

— Tomasz Nurkiewicz

나는 document.getElementById("greet").innerText완벽하게 유효해야한다고 부르고 있는데, value다음 var inputValue = document.getElementById(elementId).value;을 포함하는 줄에서 입력 요소 의 속성 에만 액세스하고 있습니다 : in을 입력 양식 greet(elementId)의 html onkeyup="greet('name')"로 호출 합니다. 그래서 코드를 잘못 읽고 있다고 생각합니다. 잘못되면 수정하십시오. :)

— Bjarke Freund-Hansen

@bjarkef : 죄송합니다. 맞습니다. 나는 대답을 다시 썼다.

— Tomasz Nurkiewicz

1

아, 이치에 맞습니다. 그래서 반환 된 값을 캐스트해야 getElementById하며 typescript에서 어떻게해야합니까? 아니면 getElementById반환하는 다른 방법이 HTMLInputElement있습니까?

— Bjarke Freund-Hansen

11

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

("" as HTMLInputElement).value;

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

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

— KidKode
소스

4

각도를 사용하는 경우 다음을 사용할 수 있습니다.

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

— 로 히트 그로버
소스

1

이것은 나를 위해 작동합니다 :

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

— 후안 파블로
소스

포맷 필요

— Standin.Wolf

-1

문제:

'HTMLElement'유형에 'text'속성이 없습니다.

해결책 : typeScript 에서 document.getElementById()유형을 반환 하는 캐스트해야 합니다 HTMLElement.< HTMLScriptElement >

따라서 typescript.js에서 예상하는대로 오류를 해결하기 위해 다음과 같은 방법으로이를 수행 할 수 있습니다

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

그것은 나를 위해 일했다. 그것이 당신에게도 효과가 있기를 바란다.

— Alok Adhao
소스