New Typescript 1.8.4 build error: " Build: Property 'result' does not exist on type 'EventTarget'. "
New Typescript 1.8.4 build error: " Build: Property 'result' does not exist on type 'EventTarget'. "
我是打字新手。在我的 Durandal 应用程序中,我迁移到 VS-2012 到 VS-2015 意味着打字稿 0.9 到打字稿 1.8.4。迁移后我遇到了很多构建错误。我解决了所有这些,除了一个。我在事件类型上遇到以下构建错误。
错误:“生成:属性 'result' 在类型 'EventTarget' 上不存在”
代码如下:
var reader:any,
target:EventTarget;
reader= new FileReader();
reader.onload = function (imgsrc){
var fileUrl = imgsrc.target.result;
}
"Imgsrc" 正在参加类型活动。
它在 typescript 0.9 上工作正常,但在 1.8.4 上它会抛出错误,因为 'result' 在类型 'EventTarget' 上不存在。
谁能帮忙解决一下。
注:"target:EventTarget" 是从 lib.d.ts
使用我的旧类型脚本,参数 "imgsrc" 默认为任何类型。
所以,现在我将其设为 (imgsrc:any)。一切正常。
var reader:any,
target:EventTarget;
reader= new FileReader();
reader.onload = function (imgsrc:any){
var fileUrl = imgsrc.target.result;
}
虽然 any
是一剂良药 (几乎适用于任何事物,但是...那么 TypeScript 的好处在哪里) ...报告了一个类似的问题,并且建议 (TypesScript-ish) 解决方法
Request to change currentTarget in Event interface for lib.d.ts
让我引用:
I ran into this TS2339: Property 'result' does not exist on type
'EventTarget' in JS FileReader onload, and another warning for
getSummary() on the event passed to FileReader's onerror.
My work-around, to suppress the horrid red squiggily lines;-) is the
following:
interface FileReaderEventTarget extends EventTarget {
result:string
}
interface FileReaderEvent extends Event {
target: FileReaderEventTarget;
getMessage():string;
}
Then in my app:
reader.onload = function(fre:FileReaderEvent) {
var data = JSON.parse(fre.target.result);
...
}
并且,在 lib.d.ts 发生一些变化之前,我们仍然使用已知接口
编辑 2019 年 12 月:
通过此修复,您可能会
error TS2322: Type '(this: FileReader, e: FileReaderEvent) => void' is not assignable to type '(this: FileReader, ev: ProgressEvent) => any'.
如果是这样,只需更换
interface FileReaderEvent extends Event {
和
interface FileReaderEvent extends ProgressEvent {
今天这对我在 TypeScript 2.1.1 有用
interface EventTarget { result: any; }
问题出在打字稿定义上。一个简单的作弊是:
let target: any = e.target; //<-- This (any) will tell compiler to shut up!
let content: string = target.result;
这是 javascript/typescript 的中断更改。
您只需将 "event.target.result" 替换为 "this.result"。
这里的"this"指的是接口上下文"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;
}
另请注意,由于 "this" 在 "onload()" 中的上下文更改,您基于 class 的定义在 "reader.onload = function(event){..." 中不可访问;这意味着您不能使用 "this.class-property" 样式来解决您的 class 属性。
您将必须定义局部变量。请参阅上面摘录中 "profile" 的定义和用法。
除了使用 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
};
而不是
this.localDbRequest.onsuccess = function (event) {
const db = event.target.result;
};
做
this.localDbRequest.onsuccess = function (event) {
const db = this.result;
};
让 TypeScript 知道您希望它是什么类型。
修复如下:
let reader = new FileReader();
reader.onload = function (event){
let fileUrl = (<FileReader>event.target).result;
}
在这种情况下,您也可以使用 reader.result
可以如下访问 target 对象以防止错误,直到修复:
reader= new FileReader();
reader.onload = function (imgsrc){
var fileUrl = imgsrc.target["result"];
}
将目标视为 Javascript 对象
如果出现这个错误
类型 'string | ArrayBuffer' 不能分配给类型 'string'。类型 'ArrayBuffer' 不可分配给类型 'string'
fileReader.result+' ';//valid
fileReader.result; //invalid
上述解决方案不适合我与 IndexedDB 的类似问题,因此我想我会分享在我的场景中有效的方法。通过将 (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')
};
我在 angular 中遇到了同样的问题 FileReader
。
解决方案相当简单(Typescript 具有必要的类型)。你必须使用 ProgressEvent<FileReader>
。它可以在 typescript 安装中找到 im 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 对我有用。
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
}
试试这个。
event.target["result"]
经过lib.dom.d.ts分析很简单:
const fileReader: FileReader = new FileReader();
fileReader.onload = (event: ProgressEvent<FileReader>) => {
event.target.result; // This is valid
};
我是打字新手。在我的 Durandal 应用程序中,我迁移到 VS-2012 到 VS-2015 意味着打字稿 0.9 到打字稿 1.8.4。迁移后我遇到了很多构建错误。我解决了所有这些,除了一个。我在事件类型上遇到以下构建错误。
错误:“生成:属性 'result' 在类型 'EventTarget' 上不存在”
代码如下:
var reader:any,
target:EventTarget;
reader= new FileReader();
reader.onload = function (imgsrc){
var fileUrl = imgsrc.target.result;
}
"Imgsrc" 正在参加类型活动。
它在 typescript 0.9 上工作正常,但在 1.8.4 上它会抛出错误,因为 'result' 在类型 'EventTarget' 上不存在。 谁能帮忙解决一下。
注:"target:EventTarget" 是从 lib.d.ts
使用我的旧类型脚本,参数 "imgsrc" 默认为任何类型。
所以,现在我将其设为 (imgsrc:any)。一切正常。
var reader:any,
target:EventTarget;
reader= new FileReader();
reader.onload = function (imgsrc:any){
var fileUrl = imgsrc.target.result;
}
虽然 any
是一剂良药 (几乎适用于任何事物,但是...那么 TypeScript 的好处在哪里) ...报告了一个类似的问题,并且建议 (TypesScript-ish) 解决方法
Request to change currentTarget in Event interface for lib.d.ts
让我引用:
I ran into this TS2339: Property 'result' does not exist on type 'EventTarget' in JS FileReader onload, and another warning for getSummary() on the event passed to FileReader's onerror.
My work-around, to suppress the horrid red squiggily lines;-) is the following:
interface FileReaderEventTarget extends EventTarget { result:string } interface FileReaderEvent extends Event { target: FileReaderEventTarget; getMessage():string; }
Then in my app:
reader.onload = function(fre:FileReaderEvent) { var data = JSON.parse(fre.target.result); ... }
并且,在 lib.d.ts 发生一些变化之前,我们仍然使用已知接口
编辑 2019 年 12 月:
通过此修复,您可能会
error TS2322: Type '(this: FileReader, e: FileReaderEvent) => void' is not assignable to type '(this: FileReader, ev: ProgressEvent) => any'.
如果是这样,只需更换
interface FileReaderEvent extends Event {
和
interface FileReaderEvent extends ProgressEvent {
今天这对我在 TypeScript 2.1.1 有用
interface EventTarget { result: any; }
问题出在打字稿定义上。一个简单的作弊是:
let target: any = e.target; //<-- This (any) will tell compiler to shut up!
let content: string = target.result;
这是 javascript/typescript 的中断更改。
您只需将 "event.target.result" 替换为 "this.result"。
这里的"this"指的是接口上下文"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;
}
另请注意,由于 "this" 在 "onload()" 中的上下文更改,您基于 class 的定义在 "reader.onload = function(event){..." 中不可访问;这意味着您不能使用 "this.class-property" 样式来解决您的 class 属性。
您将必须定义局部变量。请参阅上面摘录中 "profile" 的定义和用法。
除了使用 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
};
而不是
this.localDbRequest.onsuccess = function (event) {
const db = event.target.result;
};
做
this.localDbRequest.onsuccess = function (event) {
const db = this.result;
};
让 TypeScript 知道您希望它是什么类型。
修复如下:
let reader = new FileReader();
reader.onload = function (event){
let fileUrl = (<FileReader>event.target).result;
}
在这种情况下,您也可以使用 reader.result
可以如下访问 target 对象以防止错误,直到修复:
reader= new FileReader();
reader.onload = function (imgsrc){
var fileUrl = imgsrc.target["result"];
}
将目标视为 Javascript 对象
如果出现这个错误
类型 'string | ArrayBuffer' 不能分配给类型 'string'。类型 'ArrayBuffer' 不可分配给类型 'string'
fileReader.result+' ';//valid
fileReader.result; //invalid
上述解决方案不适合我与 IndexedDB 的类似问题,因此我想我会分享在我的场景中有效的方法。通过将 (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')
};
我在 angular 中遇到了同样的问题 FileReader
。
解决方案相当简单(Typescript 具有必要的类型)。你必须使用 ProgressEvent<FileReader>
。它可以在 typescript 安装中找到 im 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 对我有用。
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
}
试试这个。
event.target["result"]
经过lib.dom.d.ts分析很简单:
const fileReader: FileReader = new FileReader();
fileReader.onload = (event: ProgressEvent<FileReader>) => {
event.target.result; // This is valid
};