TS DOM 类型的声明
lib.dom.d.ts
HTMLInputElement
<input type="text" @change="handleChange" />
const handleChange = (evt: Event) => { console.log((evt.target as HTMLInputElement).value); }
-
要想拿到.value属性,那么就是要as HTMLInputElement
-
一般来说,as HTMLElment就行了,但是为了拿到具体的一些属性,就是必须具体这个元素的类型
HTMLElement
const div: HTMLDivElement = document.createElement('div'); const img: HTMLImageElement = document.createElement('img'); // canvas const canvas:HTMLCanvasElement = document.createElement('canvas'); const ctx:CanvasRenderingContext2D = canvas.getContext('2d');
interface HTMLElementTagNameMap { "a": HTMLAnchorElement; "abbr": HTMLElement; "address": HTMLElement; "applet": HTMLAppletElement; "area": HTMLAreaElement; "article": HTMLElement; "aside": HTMLElement; "audio": HTMLAudioElement; "b": HTMLElement; "base": HTMLBaseElement; "basefont": HTMLBaseFontElement; "bdi": HTMLElement; "bdo": HTMLElement; "blockquote": HTMLQuoteElement; "body": HTMLBodyElement; "br": HTMLBRElement; "button": HTMLButtonElement; "canvas": HTMLCanvasElement; "caption": HTMLTableCaptionElement; "cite": HTMLElement; "code": HTMLElement; "col": HTMLTableColElement; "colgroup": HTMLTableColElement; "data": HTMLDataElement; "datalist": HTMLDataListElement; "dd": HTMLElement; "del": HTMLModElement; "details": HTMLDetailsElement; "dfn": HTMLElement; "dialog": HTMLDialogElement; "dir": HTMLDirectoryElement; "div": HTMLDivElement; "dl": HTMLDListElement; "dt": HTMLElement; "em": HTMLElement; "embed": HTMLEmbedElement; "fieldset": HTMLFieldSetElement; "figcaption": HTMLElement; "figure": HTMLElement; "font": HTMLFontElement; "footer": HTMLElement; "form": HTMLFormElement; "frame": HTMLFrameElement; "frameset": HTMLFrameSetElement; "h1": HTMLHeadingElement; "h2": HTMLHeadingElement; "h3": HTMLHeadingElement; "h4": HTMLHeadingElement; "h5": HTMLHeadingElement; "h6": HTMLHeadingElement; "head": HTMLHeadElement; "header": HTMLElement; "hgroup": HTMLElement; "hr": HTMLHRElement; "html": HTMLHtmlElement; "i": HTMLElement; "iframe": HTMLIFrameElement; "img": HTMLImageElement; "input": HTMLInputElement; "ins": HTMLModElement; "kbd": HTMLElement; "label": HTMLLabelElement; "legend": HTMLLegendElement; "li": HTMLLIElement; "link": HTMLLinkElement; "main": HTMLElement; "map": HTMLMapElement; "mark": HTMLElement; "marquee": HTMLMarqueeElement; "menu": HTMLMenuElement; "meta": HTMLMetaElement; "meter": HTMLMeterElement; "nav": HTMLElement; "noscript": HTMLElement; "object": HTMLObjectElement; "ol": HTMLOListElement; "optgroup": HTMLOptGroupElement; "option": HTMLOptionElement; "output": HTMLOutputElement; "p": HTMLParagraphElement; "param": HTMLParamElement; "picture": HTMLPictureElement; "pre": HTMLPreElement; "progress": HTMLProgressElement; "q": HTMLQuoteElement; "rp": HTMLElement; "rt": HTMLElement; "ruby": HTMLElement; "s": HTMLElement; "samp": HTMLElement; "script": HTMLScriptElement; "section": HTMLElement; "select": HTMLSelectElement; "slot": HTMLSlotElement; "small": HTMLElement; "source": HTMLSourceElement; "span": HTMLSpanElement; "strong": HTMLElement; "style": HTMLStyleElement; "sub": HTMLElement; "summary": HTMLElement; "sup": HTMLElement; "table": HTMLTableElement; "tbody": HTMLTableSectionElement; "td": HTMLTableDataCellElement; "template": HTMLTemplateElement; "textarea": HTMLTextAreaElement; "tfoot": HTMLTableSectionElement; "th": HTMLTableHeaderCellElement; "thead": HTMLTableSectionElement; "time": HTMLTimeElement; "title": HTMLTitleElement; "tr": HTMLTableRowElement; "track": HTMLTrackElement; "u": HTMLElement; "ul": HTMLUListElement; "var": HTMLElement; "video": HTMLVideoElement; "wbr": HTMLElement; }
本文由 简悦 SimpRead 转码, 原文地址 juejin.cn
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!