Skip to content

1,Element Element 类型继承自 Node 类型,并扩展了许多用于操作 HTML 元素的属性和方法。

一些常见的属性和方法包括:

id: 元素的 ID 属性。 className: 元素的 class 属性。 children: 一个包含所有子元素的 HTMLCollection。 innerHTML: 元素的 HTML 内容。 outerHTML: 元素的 HTML 内容,包括元素自身。 getAttribute(name: string): 获取指定属性的值。 setAttribute(name: string, value: string): 设置指定属性的值。 removeAttribute(name: string): 移除指定属性。 appendChild(node: Node): 向元素添加一个子节点。 removeChild(node: Node): 从元素中移除一个子节点。

2,Record Record 类型是 TypeScript 中的一个工具类型,用于构造一个对象类型,其属性键为 K,属性值为 T。

语法: Record<K extends keyof any, T>

示例:

3,ReturnType,推断返回值类型

ts
    let cleanup: ReturnType<typeof draggable>;
    onMounted(async () => {
        await nextTick();
        console.log("btnRef.value",btnRef.value)
        if (btnRef.value) {
            cleanup = draggable({ element: btnRef.value })
        }else{
            throw Error("btnRef.value 不是dom元素")
        }
    });
    onUnmounted(()=>{
        cleanup();
    })

4, Omit<T,K>, 从T中排除K Omit<T, K> 是 TypeScript 中的一个内置泛型工具类型,用于从类型 T 中排除指定的键 K,并生成一个新的类型

ts
// delete keys from object
export default function omit<T extends object, K extends keyof T>(
  obj: T,
  keys: Array<K | string> // string 为了某些没有声明的属性被omit
): Omit<T, K> {
  const clone = {
    ...obj,
  };
  keys.forEach((key) => {
    if ((key as K) in clone) {
      delete clone[key as K];
    }
  });
  return clone;
}

5, Extract<T,U> 从T中提取所有可以赋值给U的类型

ts
// 例子1:从联合类型中提取特定类型
type T0 = Extract<"a" | "b" | "c", "a" | "f">;  
// 结果是: "a"

// 例子2:从对象的键中提取字符串类型
interface User {
    name: string;      // 字符串键
    123: number;       // 数字键
    [Symbol.id]: any;  // symbol键
}
type StringKeys = Extract<keyof User, string>;  
// 结果是: "name"

// 例子3:在你的表格组件中的应用
interface TableData {
    id: number;
    name: string;
    [Symbol.iterator]: () => void;
}
type ValidColumns = Extract<keyof TableData, string>;  
// 结果是: "id" | "name"
本站访客数 人次 本站总访问量