New Typecript 1.8.4 빌드 오류: " 빌드: 속성 '결과'가 'EventTarget' 유형에 없음."
나는 타자기를 처음 접한다.나의 Durandal 애플리케이션에서 나는 VS-2012에서 VS-2015로 마이그레이션되었으며 형식 0.9에서 형식 1.8.4를 의미한다.이주한 후에 빌드 에러가 너무 많이 났어.나는 한 사람을 제외한 모든 것을 해결했다.이벤트 종류에 대한 빌드 에러 이하를 받고 있다.
오류: " 빌드: 속성 '결과'가 'EventTarget' 유형에 없음 "
그리고 코드는 정확히 아래와 같았다.
var reader:any,
target:EventTarget;
reader= new FileReader();
reader.onload = function (imgsrc){
var fileUrl = imgsrc.target.result;
}
"Imgsrc"는 형식 이벤트를 하고 있다.
Typecript 0.9에서는 정상 작동하지만, 1.8.4에서는 'EventTarget' 유형에 '결과'가 존재하지 않아 오류를 발생시키고 있다.이 문제를 해결하는 데 도움을 줄 수 있는 사람이 있는가?
참고: "대상:eventTarget"이 lib.d.ts에서 가져오는 중
사용하는 대신event.target.result
, 그냥 사용할 수 있다.FileReader.result
.
예를 들어,
const fileReader: FileReader = new FileReader();
fileReader.onload = (event: Event) => {
event.target.result; // This is invalid
fileReader.result; // This is valid
};
반면은 약이다(대부분의 경우, 그러나... 그러면 TypeScript 혜택은 어디에 있는지...유사한 문제가 보고되었으며 좋은(TypeScript-ish) 해결 방법이 제안됨
lib.d.ts에 대한 이벤트 인터페이스의 currentTarget 변경 요청
예를 들어보자:
이 TS2339: JS FileReader의 'EventTarget' 유형에 속성 '결과'가 존재하지 않으며, FileReader의 onerror로 전달된 이벤트에 대한 getSummary()에 대한 또 다른 경고가 있다.
나의 해결책은, 무시무시한 빨간 불결한 선을 억누르는 것이다;-)는 다음과 같다.
interface FileReaderEventTarget extends EventTarget { result:string } interface FileReaderEvent extends Event { target: FileReaderEventTarget; getMessage():string; }
내 앱에서:
reader.onload = function(fre:FileReaderEvent) { var data = JSON.parse(fre.target.result); ... }
그리고, lib.d.ts의 변화가 있을 때까지, 우리는 여전히 알려진 인터페이스를 가지고 일한다.
EDIT 2019년 12월:
이 고장으로, 당신은 아마
TS2322: 유형 '(이: FileReader, e: FileReaderEvent) => void'는 유형 '(이: FileReader, ev: ProgressEvent) => any'에 할당할 수 없음.
그렇다면 교체하십시오.
interface FileReaderEvent extends Event {
와 함께
interface FileReaderEvent extends ProgressEvent {
이전 형식 스크립트에서 매개 변수 "imgsrc"는 기본적으로 모든 형식을 가지고 있다.
그래서 이제 (imgsrc:any)로 만들었다.잘 되고 있어.
var reader:any,
target:EventTarget;
reader= new FileReader();
reader.onload = function (imgsrc:any){
var fileUrl = imgsrc.target.result;
}
문제는 형식 정의에 관한 것이다.단순한 부정행위는 다음과 같다.
let target: any = e.target; //<-- This (any) will tell compiler to shut up!
let content: string = target.result;
그냥 타이프스크립트에게 당신이 예상할 수 있는 타입을 알려주십시요.
해결책은 다음과 같다.
let reader = new FileReader();
reader.onload = function (event){
let fileUrl = (<FileReader>event.target).result;
}
당신은 또한 사용할 수 있다.reader.result
대신 이 경우에는
만약 누군가가 가장 간단한 해결책을 찾고 있다면, 이것은 나에게 효과가 있었다.
var reader:any,
target:EventTarget;
reader= new FileReader();
reader.onload = function (imgsrc){
//var fileUrl = imgsrc.target.result; //change to
var fileUrl = (imgsrc.target as FileReader).result; //cast to correct type
}
오늘은 이것이 TypeScript 2.1.1에서 나에게 효과가 있었다.
interface EventTarget { result: any; }
이 오류가 발생하면
| 할 수 . 할 수 없음ArrayBuffer' 유형은 'string' 유형에 할당할 수 없음
fileReader.result+';//valid
invalidfileReader.result; //messageproperties
나는 같은 문제를 a와 각진 채로 가지고 있었다.FileReader
.
용액은 다소 간단하다(형식에는 필요한 유형이 있다).당신은 사용해야만 한다.ProgressEvent<FileReader>
그것은 내가 찾을 수 있다.lib.dom.d.ts
형식 설치에서 사용 가능하므로, 다음을 사용하여 빌드할 경우 전체적으로 사용 가능해야 함
lib: {
"dom"
}
당신 안에tsconfig.json
.
여기에 이 코드를 사용해야 했던 코드가 있다.
function read(file: File) {
const fileReader = new FileReader();
fileReader.onloadend = function (e: ProgressEvent<FileReader>) {
const arr = (new Uint8Array(parseInt(e.target.result.toString(), 10))).subarray(0, 4);
var header = "";
for (var i = 0; i < arr.length; i++) {
header += arr[i].toString(16);
}
console.log(header);
// Check the file signature against known types
};
fileReader.readAsArrayBuffer(file);
}
대신에
this.localDbRequest.onsuccess = function (event) {
const db = event.target.result;
};
하다
this.localDbRequest.onsuccess = function (event) {
const db = this.result;
};
수정될 때까지 오류를 방지하기 위해 다음과 같이 대상 객체에 액세스할 수 있다.
reader= new FileReader();
reader.onload = function (imgsrc){
var fileUrl = imgsrc.target["result"];
}
대상을 Javascript 개체로 처리
은 인덱싱된 의 인지도에 대한 의 비슷한 이슈와 는 내 DB 그래서 나는 내 시나리오에서 효과가 있는 것을 공유해야겠다고 생각했다.를 (event)
에 대한 함수의 주장.(event: any)
나는 유형 오류를 무시할 수 있었다.
샘플 코드:
let request = window.indexedDB.open('userChannels', 3);
request.onerror = function(event: any ) {
console.log('ERROR: Failed to create userChannels local DB' + event.target.errorCode)
};
request.onsuccess = function(event: any) {
let db = event.target.result;
console.log('SUCCESS: Created userChannels local DB')
};
이것은 자바스크립트/자막문자의 변화다.
당신이 해야 할 일은 단지 "event.target.properties"를 "this.properties"로 대체하는 것이다.
여기서 "이것"은 인터페이스 "MSBaseReader"의 컨텍스트를 가리킨다.
아래는 나의 구현 발췌본이다.
let reader = new FileReader();
let profile: TransProfile = new TransProfile();
reader.onload = function(event){
profile.avatar = new Uint8Array(this.result);
}
reader.onerror = function(event){
}
this.photoLib.getPhoto(item)
.then(blob => reader.readAsArrayBuffer(blob))
.then(() => this.doUpload(profile));
"MSBaseReader" 인터페이스 정의:
interface MSBaseReader {
onabort: (this: MSBaseReader, ev: Event) => any;
onerror: (this: MSBaseReader, ev: ErrorEvent) => any;
onload: (this: MSBaseReader, ev: Event) => any;
onloadend: (this: MSBaseReader, ev: ProgressEvent) => any;
onloadstart: (this: MSBaseReader, ev: Event) => any;
onprogress: (this: MSBaseReader, ev: ProgressEvent) => any;
readonly readyState: number;
readonly result: any;
abort(): void;
readonly DONE: number;
readonly EMPTY: number;
readonly LOADING: number;
addEventListener<K extends keyof MSBaseReaderEventMap>(type: K, listener: (this: MSBaseReader, ev: MSBaseReaderEventMap[K]) => any, useCapture?: boolean): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}
"FileReader" 인터페이스 정의
interface FileReader extends EventTarget, MSBaseReader {
readonly error: DOMError;
readAsArrayBuffer(blob: Blob): void;
readAsBinaryString(blob: Blob): void;
readAsDataURL(blob: Blob): void;
readAsText(blob: Blob, encoding?: string): void;
addEventListener<K extends keyof MSBaseReaderEventMap>(type: K, listener: (this: FileReader, ev: MSBaseReaderEventMap[K]) => any, useCapture?: boolean): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}
또한, "온로드" 내에서 "이것"의 컨텍스트 변경으로 인해, 클래스 기반 정의는 "lass.onload = 함수(event){" 내에서 액세스할 수 없다."; "the.class-class-class" 스타일을 사용하여 클래스 속성을 지정할 수 없다는 의미.
로컬 변수를 정의해야 한다.위의 발췌문에서 "프로파일"의 정의와 사용을 참조한다.
이거 먹어봐.
event.target["result"]
lib.dom.d.ts 분석 후 다음과 같이 간단하다.
const fileReader: FileReader = new FileReader();
fileReader.onload = (event: ProgressEvent<FileReader>) => {
event.target.result; // This is valid
};
'IT이야기' 카테고리의 다른 글
v-data-table에 클릭 이벤트를 추가하는 방법 (0) | 2022.03.09 |
---|---|
사용자 지정 VueJS 지침에서 변수를 선언하는 방법 (0) | 2022.03.09 |
vuex에서 스토어 값을 보는 방법? (0) | 2022.03.09 |
문자열에 Python의 목록에 있는 요소가 포함되어 있는지 확인하는 방법 (0) | 2022.03.09 |
웹 팩이 있는 VueJS: 수출입이 예상대로 작동하지 않음 (0) | 2022.03.09 |