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"