'HTMLElement'유형의 값에 'value'특성이 없습니다.
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의 캐스팅 연산자입니다.
질문을 참조하십시오 .위 줄의 결과 자바 스크립트는 다음과 같습니다.
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);
문제는 여기 있습니다 :
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
속성 이 없습니다 . 입력 요소 만 값을 갖습니다.참조 확인
및
MDN Typescript가 이것과 다소 일치한다고 생각합니다.
이에 대한 빠른 수정은 []를 사용하여 속성을 선택하는 것입니다.
function greet(elementId) {
var inputValue = document.getElementById(elementId)["value"];
if(inputValue.trim() == "") {
inputValue = "World";
}
document.getElementById("greet").innerText = greeter(inputValue);
}
I just try few methods and find out this solution,
I don't know what's the problem behind your original script.
For reference you may refer to Tomasz Nurkiewicz's post.
Updated example:
const inputElement: HTMLInputElement = document.getElementById('greet') as HTMLInputElement
const inputValue: string = InputElement.value
Documentation:
TypeScript - Basic Types - Type assertions
Also for anyone using properties such as Props or Refs without your "DocgetId's" then you can:
("" as HTMLInputElement).value;
Where the inverted quotes is your props value so an example would be like so:
var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);
If you are using angular you can use -
const element = document.getElementById('elemId') as HTMLInputElement;
Problem:
error Property 'text' does not exist on type 'HTMLElement'
Solution: in typeScript we need to cast document.getElementById() which returns type HTMLElement in < HTMLScriptElement >
So we can do it by by following way to resolve the error as expected by typescript.js
Code: var content: string = ( < HTMLScriptElement > document.getElementById(contentId)).text;
It worked for me.. hope it works for you as well.
'programing' 카테고리의 다른 글
| Objective-C에서 클래스 수준 속성을 어떻게 선언합니까? (0) | 2020.05.09 |
|---|---|
| 순서가없는 목록을 두 열로 표시하는 방법은 무엇입니까? (0) | 2020.05.09 |
| Eclipse의 Java 프로젝트 : java.lang.Object 유형을 해석 할 수 없습니다. (0) | 2020.05.09 |
| 제네릭 형식이나 메서드에서 매개 변수 'T'로 사용하려면 형식이 참조 형식이어야합니다. (0) | 2020.05.09 |
| Java : List를 Map으로 변환하는 방법 (0) | 2020.05.09 |