Ts In Vue3 Logs

Partial＜T＞：快速把某个接口类型中定义的属性变成可选

type User = {
  id: number;
  name: string;
  age: number;
}


type UpdatedPerson = Partial<User>;

// 结果：
type UpdatedPerson = {
  id?: number;
  name?: string;
  age?: number;
}

Required<T>：把所有可选属性变成必选属性

interface Person {
    name: string;
    age: number;
    sex?: string;
}
/**
* type PersonOptions = {
*   name: string;
*   age: number;
*   sex: string;
* }
*/
type PersonRequired = Required<Person>;
 
// 实现原理
type Required<T> = {
    [P in keyof T]-?: T[P] // `-?` 符号是一个操作符，用于将属性变为必需的，即必须存在并且不能为 undefined 或 null。
}

Readonly<T>:把所有属性变成只读属性

// 实现原理
/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

keyof 用于获取一个对象类型的所有属性名称的联合类型

interface User {
  name: string;
  age: number;
  gender: string;
}
 
type UnionType = keyof User;

// 结果：
type UnionType = "name" | "age" | "gender";

要注意的是，keyof 操作符只能用于对象类型。除对象类型外的其他类型，keyof 是无法使用的。例如：

type MyNumber = number;
type MyNumberKey = keyof MyNumber; // 编译错误：Type 'number' has no matching index signature for type 'keyof number'

Vue3 中 dom

// ecahrt 中
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

// canvas
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

// image
image: HTMLImageElement

// iframe
const frameRef = ref<HTMLFrameElement>()

// input
const inputRef = ref<HTMLInputElement>()