vue+ts查漏补缺-240907

defineOptions({}) 使用场景： 比如封装一个myBUtton 组件，

app.vue

 <myButton @click="handleClick" type="primary"></myButton>

myButton.vue

js:
关于props:
const  atts = useAttrs() // 等于 $attrs， 可以获取到来自父组件的所有非props 属性，
//假如 没有声明props，这里attrs  里面是 {onClick:fn， type:'primary'},
//如果声明props
const props = definePros<{type:string}>()
// 那么 attrs 里面就只会有 onClick 属性了

<div>
  <el-button>
  // 
  </el-button>
 </div>

ts 中的两个工具类
1.Omit：顾名思义 可以剔除 已定义对象中 自己不需要的一部分形成新的定义类型。

**

interface UserObj {
    readonly name: string; // readonly 只读属性 只能初始化定义 不能二次赋值
    age: number;
    id: number;
    sex: 0 | 1;
    address: string;
    weight: number;
}

// 剔除省略自己不需要的
type Person = Omit<UserObj, "age" | "sex"  | "address" | "weight">;

// 此时Person 等同于 Person1

interface Person1 {
    readonly name: string;
    id: number;
}

2.partial 可把定义好的对象（包含 必选+可选项）类型全部转化为可选项

**

// 已有定义类型Person
interface Person {
    name: string;
    age: number;
    id: number;
    sex: 0 | 1;
    address: string;
    weight: number;
}

// 使用方法
const newObj: Partial<Person> = {
    name: '张三' // 假如只需要一项 Partial的便捷性 可以不需要从新定义类型
};

// Partial<Person>等同于 NewPerson
interface NewPerson {
    name?: string;
    age?: number;
    id?: number;
    sex?: 0 | 1;
    address?: string;
    weight?: number;
}

源码：
type Partial<T> = {
    [P in keyof T]?: T[P];
};