lib.d.tsããEventã€ã³ã¿ãŒãã§ãŒã¹ã䜿çšãããªã¹ããŒãã¢ã¿ãããããšãã³ãŒã«ããã¯ã¯Eventã¿ã€ãã®ãªããžã§ã¯ããååŸããŸãã ãã ããã€ãã³ãã®currentTargetããããã£ã¯EventTargetã¿ã€ãã§ãïŒElement / HTMLElementã¿ã€ãã§ããå¿ èŠããããŸãïŒã
XMLHttpRequestãªããžã§ã¯ããcurrentTargetã«ããããšãã§ããŸãããElement / HTMLElementã§ã¯ãããŸããã å€åããããã®èåŸã«ããçç±ã§ãã ãžã§ããªãã¯åã¯ãããæ¹åããŸããïŒ
interface Event<T extends EventTarget> {
/* ... */
currentTarget: T;
/* ... */
}
interface EventListener<T extends EventTarget> {
(evt: Event<T>): void;
}
interface HTMLElement {
/* ... */
addEventListener(type: string, listener: EventListener<HTMLElement>, useCapture?: boolean): void;
}
ããã¯ãããæ¹åããã®ã«å€§ãã«åœ¹ç«ã€ããã«èŠããŸãã
ç§ã®iPhoneããéä¿¡ããã
2014幎8æ3æ¥ã«ã¯ãååŸ01æ34åã§ãSaschaNaz [email protected]æžããŸããïŒ
XMLHttpRequestãªããžã§ã¯ããcurrentTargetã«ããããšãã§ããŸãããElement / HTMLElementã§ã¯ãããŸããã å€åããããã®èåŸã«ããçç±ã§ãã ãžã§ããªãã¯åã¯ãããæ¹åããŸããïŒ
ã€ã³ã¿ãŒãã§ã€ã¹ã€ãã³ã
{{
/ * ... _ /
currentTargetïŒT;
/ _ ... * /
}ã€ã³ã¿ãŒãã§ã€ã¹EventListener
{{
ïŒevtïŒã€ãã³ãïŒïŒç¡å¹;
}ã€ã³ã¿ãŒãã§ã€ã¹HTMLElement {
/ * ... * /
addEventListenerïŒã¿ã€ãïŒæååããªã¹ããŒïŒEventListenerãuseCaptureïŒïŒããŒã«å€ïŒïŒvoid;
}
â
ãã®ã¡ãŒã«ã«çŽæ¥è¿ä¿¡ããããGitHubã§è¡šç€ºããŠãã ããã
ãã¹ãŠã®ã€ãã³ãã¿ãŒã²ãããElement
ïŒhttp://www.w3.org/TR/DOM-Level-3-Events/#event-typesïŒã§ãããšã¯éããªããããããã§ã®è§£æ±ºçã¯ããã«å€ãããå¿
èŠãããããšã«æ³šæããŠãã ããã @SaschaNazã®ææ¡ã«æ²¿ã£ãŠã
åé¡ã¯ãçŸæç¹ã§ã¯å ¬éã§ããªããã¡ã€ã«ã«åºã¥ããŠãã¹ã¯ãªããã䜿çšããŠlib.d.tsãçŸåšçæããŠããããã®ãã¡ã€ã«ã¯éæšå¥šã«ãªããæ°ãããã¡ã€ã«ãåªå ãããããšã§ãã ãã®ãããçŸæç¹ã§ã¯ã¹ã¯ãªãããæ¹åããäºå®ã¯ãããŸããããå°æ¥çã«ã¯lib.d.tsçæã¹ã¯ãªãã/å ¥åã§PRãå®è¡ã§ããããã«ãªãããšãé¡ã£ãŠããŸãã
ä»ã®ãšãããRevisitãã«ã¿ã°ãä»ããŸãã1ãæ以å ã«ããã«ã€ããŠpingããŠãã ãããããããã°ãçŸåšã®å Žæã確èªã§ããŸãã
çŸåšã®ã¿ã€ããåç §ããæ§æã¯ãããŸããïŒ ãã®çš®ã®äœæ¥ãè¡ãããšãã§ããã°ãããã¯ããç°¡åã«è§£æ±ºã§ãããšæããŸãã
interface HTMLElement {
addEventListener(type: string, listener: EventListener<this>, useCapture?: boolean): void;
}
var image: HTMLImageElement;
var video: HTMLVideoElement;
image.addEventListener // receives EventListener<HTMLImageElement> type
video.addEventListener // receives EventListener<HTMLVideoElement> type
ãã®æ©èœã¯ååšããŸãããããã¯ïŒ285ãšïŒ229ã§ææ¡ããããã®ã«äŒŒããã®ã§ã
ã¿ãªãããããã«ã¡ã¯ããã®ã¹ã¬ããã«pingãéä¿¡ããŸãã Event.target
ãã®åé¡ãçºçããŸããã ã»ãšãã©ã®å Žåãã¿ãŒã²ããã¯HTMLElement
ã ãšæããŸãã ããã©ã«ãã®ã¿ã€ããããã§ã¯ãªããšæ³å®ããã®ã¯å°ãå¥åŠã§ãã @SaschaNazã®ææ¡ãè©ŠããŠã¿ããTypeScriptã¯
ç·šéïŒããã¯èŠåãéããããã«åããïŒ (<HTMLElement>event.target).tagName
@rayshanã®ææ¡ã¯ã lib.d.ts
ãã¡ã€ã«ã«äœãå
¥ããã¹ããã«ã€ããŠã§ããããã¡ã€ã«ã¯InternetExplorerã®å®è£
ã«çŽæ¥åºã¥ããŠèªåçæãããŸãã ãããã£ãŠãçºçãããšã©ãŒã¯æ£ç¢ºã§ãã ä»ã®ãšããããããåé¿ããå¯äžã®æ¹æ³ã¯ãçµã¿èŸŒã¿ã®libïŒ --noLib
ïŒãªãã§ãã«ãããŠåé¿çã䜿çšããããã¿ãŒã²ããããã£ã¹ãããããã«è¡ã£ãããšãå®è¡ããããšã§ãã çŸåšãTypeScriptã§DOMã®æ»ãå€ã®åãåŠçããã«ã¯ãããã€ãã®èª²é¡ããããŸãïŒäž»ã«ãDOMãæãäžè²«æ§ã®ãã/æ§é åããã/åå®å
šæ§ã®ãã/äžè²«ããŠå®è£
ãããAPIã®ã»ããã§ã¯ãªãããïŒã
ïŒ4910ãçµ±åãããã®ã§ããããåæ€èšã§ããŸããïŒ
@zhengbliã¯ãã¹ã¯ãªããããŒã¹ã®çæãå¿ èŠãšããlib.d.tsã®åé¡ã®ã¹ããŒã¿ã¹ã«é¢ããã³ã³ããã¹ããæã£ãŠããå¯èœæ§ããããŸã
PRã¯æè¿ããŸããã lib.d.tsã®å€æŽã«è²¢ç®ããããã®æ å ±ã¯æ¬¡ã®ãšããã§ãïŒ https ïŒ
JS FileReader onload
ã§ãã®TS2339: Property 'result' does not exist on type '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);
...
}
çæãããJSã³ãŒãã¯èŠæ ãããããç§ã«ãšã£ãŠã¯æ©èœããŸãã ç°åžžãªJSã€ãã³ãã¿ã€ãã®ãã®çš®ã®ãœãªã¥ãŒã·ã§ã³ãlib.d.tsã«è¿œå ã§ããŸããïŒ
ç§ã®è§£æ±ºçã¯é床ã«åçŽåãããŠãããšæããŸãã ãããããã®çç±ãç¥ãããšã¯å©ãã«ãªãã§ãããã
ãã®åé¡ãä¿®æ£ããããšæããŸãã ããããç§ãèŠãããã«ãcurrentTargetãžã®å¯äžã®åç
§ã¯ãTSJSãžã§ãã¬ãŒã¿ãŒã§çæãããwebworker.generated.d.tsãã¡ã€ã«å
ã«ãããŸãã ãããä¿®æ£ããæ¹æ³ãããããŸããð
誰ãããã®ã»ãŒ3幎åã®åé¡ãä¿®æ£ã§ããããšãæ¬åœã«æãã§ããŸãã ãã®ãããªãšã©ãŒããTypeScriptã¯äœ¿ãã«ãããšèšãããããšãããããçç±ãããããŸããããããã¯æ¬åœã«æ²ããããšã§ãã
äžæã ç§ã¯ãã®åé¡ã®è§£æ±ºãå§ããããšããŸããã PRãäœæããŸãhttps://github.com/Microsoft/TSJS-lib-generator/pull/202
ããŸãããã°ãããã¯æ£ããæ¹åã«é²ãã§ããŸãã
Property 'getBoundingClientRect' does not exist on type 'EventTarget'.
ååŸããŠããŸãã ããã¯è¯ãèãã ãšæããŸãã
ããŠãPRã¯ã»ãŒ2ã¶æããä¿çäžã§ãã ãããã¹ããŒãã¢ããããããã«ã§ããããšãããã°ãããã調ã¹ãŸãã
currentTarget
ãæ±çšã«ããŠãããšãã°HTMLInputElement.onchange
ã(event: Event<HTMLInputElement>) => void
åã«ããŠããã£ã¹ããªãã§event.currentTarget.value
æ©èœããããã«ã§ããã°æ¬åœã«çŽ æŽãããã§ãããããŸãã¯ã¿ã€ã泚éã Reactã®å
¥åã¯ãããè¡ããŸãããdom.lib.d.tsã¯æ®å¿µãªããããã§ã¯ãããŸããã
ããã¯ããžã§ããªãã¯ãå°å ¥ãããšã¡ã¢ãªäœ¿çšéã2åã«ãªãããããžã§ããªãã¯ã«ãã£ãŠåŒãèµ·ããããããã©ãŒãã³ã¹ã®åé¡ã«ãã£ãŠãããã¯ãããŸãð
ãããã®ããã©ãŒãã³ã¹ã®åé¡ã¯ãReactã¿ã€ãã³ã°ã«ãåæ§ã«åœãŠã¯ãŸããŸããïŒ
lib.d.tsã«ã¯Reactåã¯å«ãŸããŠããŸããããã³ãã³ãã«--diagnostics
ãè¿œå ããããšã§ãã¹ãã§ããŸãã
@felixfbeckerç§ã¯å人çã«ãããããã«ä¿®æ£ãããããšãçã£ãŠããŸãã ã»ãšãã©ã®äººã¯ãã§ã«åé¿çãäœæããããTypeScriptãæŸæ£ãããšæããŸãã ãã®ããããã®åé¡ã«ã¶ã€ãã人ã¯ã»ãšãã©ããŸããã
ãã®åé¡ã¯ããŒãžã§ã³1.18.0ïŒ1.18.0ïŒã§ãåŒãç¶ãååšããŸã
ããã«ã¡ã¯ã
...ãšåãåé¡ãããããŸã ä¿®æ£ãããŠããªããšæããŸãã
Angular 4ãããžã§ã¯ãã«æ¬çªçšã®ãã©ã°ãç«ãŠããšãåé¡ãçºçããŸãããã以å€ã®å Žåã¯ãngserveã ãã䜿çšããŠãããšãã«..ããã¯æ£åžžã«æ©èœããŸãã ã§ããããAngularãæ¬çªãã¡ã€ã«ã管çããæ¹æ³ã«é¢é£ããäœãããããšæããŸãã
ãã®åé¡ã®é²å±ãæåŸ ããŠãã ããã Typescriptã§domãæäœããã®ã¯é£ããã§ãã
ãã®åé¡ã¯4幎åã®ãã®ã§ããã察å¿ããPRã¯ã»ãŒ1幎ã§ããããããããã«ä¿®æ£ããããšã¯æããŸããã
ãã®åé¡ã¯4幎éçºçããŠããŸããããŸã ä¿®æ£ãããŠããŸããã
https://github.com/Microsoft/TSJS-lib-generator/pull/207ã§å©çšå¯èœãªä¿®æ£ããã
ãããã @ saschanazã¯ããã©ãŒãã³ã¹ã«åºã¥ããŠãããã¯ããŠããŸãã
11æã«ããŒãã£ãŒããã€ãããã£ã¹ã-ãã©ãŠã¶ã¿ããã¢ã³ããŒãããŸãïŒ
confirmationMessage(event: BeforeUnloadEvent): any {
const activeElement: HTMLElement = <HTMLElement>(<Document>event.target).activeElement;
ïŒdancing_menïŒ
è¿œå ããã®ã¯ã©ãã§ãã
readonly currentTarget: Element | null;
readonly target: Element | null;
UIEvent
ã®ã¿ã§ããïŒ ããã¯ããŸãå
·äœçã§ã¯ãããŸããããã»ãšãã©ã®ã³ãŒããæºè¶³ãããŸãã
ãããããUIEventã®ããã«| null
ãªããŠããäž¡æ¹ãåžžã«èšå®ãããŸã
ããã§åãåé¡ã Typescriptã§Vueã䜿ãããšããŠããŠããŠãŒã¶ãŒãå ¥åããå ¥åãã£ãŒã«ãã®å€ãååŸããããšæã£ãŠããŸããã ããããevent.target.valueã¯ãã¿ã€ããã§ãã«ãŒãééããŸããããã ããããã¹ãinoutã¯ããã®ãããªã€ãã³ãã«å¯ŸããŠåžžã«ãã®ãããªãã£ãŒã«ããçæããå¿ èŠããããŸãã
ã³ãŒãã«ã¿ã€ãanyãè¿œå ããããšã§ããšã©ãŒãåãé€ããŸããã
this.url = (<any>event).target.result;
EventãšEventTargetãå ¥åããã®ã¯ã©ãã§ããïŒ
interface Event<C = any, S = any, T = any> {
...
currentTarget: EventTarget<C> | null;
srcElement: EventTarget<S> | null;
target: EventTarget<T> | null;
...
}
interface EventTarget<T = any> {
...
}
FileReaderã®äœ¿çšäžã«ãã®åé¡ãçºçããŸãããæ£ããã¿ã€ãã«ãã£ã¹ãããã ãã§ãåé¡ãä¿®æ£ãããŸãã
const fileReader = new FileReader();
fileReader.onload = $ev => {
console.log($ev); // type ProgressEvent
console.log($ev.target); // type FileReader
// console.log($ev.target.result); // editor and autocomplete doesn't show any error
console.log(($ev.target as FileReader).result); // casting compiles fine
};
fileReader.readAsText(file);
ãã®ãããã¯ã«é¢ããæŽæ°ã¯ãããŸããïŒ æ¯åevent.target
ã匷å¶çã«ãã£ã¹ãããããã€ãã³ãããã£ã¹ããããããã«ïŒ @gautamkrishnarãäžèšã§è¡ã£ãããã«ïŒãããæã£ãŠãããšäŸ¿å©ã§ãã ãŸãã2014幎ãããªãŒãã³ããŠããŸããããããšãããããŸãïŒ
確ãã«ã6æ³ã®èªçæ¥ã®åã«ããã®åé¡ã«å¯Ÿããäœããã®å ¬åŒã®å¯Ÿå¿ãããã°ããã®ã§ãã
ã¯ããããã¯ããããDOMãJSXãªã©ã䜿çšããå Žåã®1æ¥äžã®è¿·æã§ãã
å®éãããã¯ç§ãæã£ãŠããå¯äžã®æ¯æ¥ã®è¿·æã§ã-ãããŠç§ã¯100äžäººãäžæ¥äžãããæã£ãŠãããšæ³åããŸãã
ãããåªå ãããªãçç±ãç解ããã®ã¯æ¬åœã«é£ããã§ãã
event.targetã«ã€ããŠãåãã§ãã éåžžã«äžè¬çãªã·ããªãªã¯ãåããŸã ååšããªãå Žåãããã³åãå€æ°ååšããå Žåã«ã芪èŠçŽ ã«ã¯ãªãã¯ãã³ãã©ãŒãè¿œå ããããšã§ãã event.target.tagNameãŸãã¯classListã®ç°¡åãªãã¹ãã¯ãç§ãè¡ãäžè¬çãªããšã§ãã ããã¯åäœããŸã....é·å¹Žããã䜿çšããŠããŸãã EventTargetãHTMLElementãšããŠåé¡ãããŠããªããããtagName / classListã®ã€ã³ããªã»ã³ã¹ãåŸãããŸããããæ©èœããŸãã
æãåèã«ãªãã³ã¡ã³ã
JS FileReader
onload
ã§ãã®TS2339: Property 'result' does not exist on type 'EventTarget'
ã«ééããFileReaderã®onerror
æž¡ãããã€ãã³ãã§getSummary()
ã«å¯Ÿããå¥ã®èŠåãçºçããŸãããç§ã®åé¿çã¯ãæãããèµ€ãæ³¢ç·ãæå¶ããããšã§ã;-)ã¯æ¬¡ã®ãšããã§ãã
次ã«ãç§ã®ã¢ããªã§ïŒ
çæãããJSã³ãŒãã¯èŠæ ãããããç§ã«ãšã£ãŠã¯æ©èœããŸãã ç°åžžãªJSã€ãã³ãã¿ã€ãã®ãã®çš®ã®ãœãªã¥ãŒã·ã§ã³ãlib.d.tsã«è¿œå ã§ããŸããïŒ
ç§ã®è§£æ±ºçã¯é床ã«åçŽåãããŠãããšæããŸãã ãããããã®çç±ãç¥ãããšã¯å©ãã«ãªãã§ãããã