dom的typescript类型定义

三思而后行，慎承诺

已于 2022-07-17 08:33:31 修改

阅读量1.9k

点赞数

分类专栏： TypeScript 文章标签： typescript javascript 前端

于 2022-07-16 23:17:07 首次发布

本文链接：https://blog.csdn.net/weixin_42283818/article/details/125826346

版权

TypeScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTMLElement和Element类型的区别

在ts中，通过document.getElementById()返回HTMLElement类型，而document.querySelect()返回Element类型。

Nullable

TypeScript中的Nullable类型指的是值可以为undefined或null的类型，如：

const inputRef = ref<Nullable<HTMLElement>>(null)

T extends AAA=BBB

extends : 限制 T 必须至少是一个 AAA或BBB之一的类型

  type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>

HTMLDivElement 和HTMLElement 的区别：

HTMLDivElement 扩展HTMLElement 属性，添加了align属性和事件函数，如下：

interface HTMLDivElement extends HTMLElement {
    /**
     * Sets or retrieves how the object is aligned with adjacent text.
     * @deprecated
     */
    align: string;
    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}