【学习打卡】第6天 高仿AntD从零到一打造组件库

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节： 第2章 欢迎来到类型的世界 - Typescript

主讲老师：张轩

课程内容：

今天学习的内容包括：

2-16 内置类型
2-17 配置文件

课程收获：

1.Omit 省略/剔除
顾名思义 可以剔除 已定义对象中 自己不需要的一部分形成新的定义类型。

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

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

// 此时Person 等同于 Person1

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

2.Pick 采集
顾名思义，可以采集 已定义对象中 自己需要的一部分形成新的定义类型。

interface UserObj {
    readonly name: string;
    age: number;
    id: number;
    sex: 0 | 1;
    address: string;
    weight: number;
 }
 
 // 采集需要的
 type Person = Pick<UserObj, "name" | "id">;
 
 // 此时Person 等同于 Person1
 interface Person1 {
     readonly name: string;
     id: number;
}

3.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;
}

4.Required (必选的)
Required 和 Partial刚好相反,可把定义好的对象（包含 必选+可选项）类型全部转化为 必选项

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

// 使用方法
const newObj: Required<Person> = {
    name: '张三',
    age: 1,
    id: 1,
    sex: 1
};

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

5.Readonly (转化只读)
Readonly 就是为类型对象每一项添加前缀 Readonly

interface Person {
    readonly name: string; // 只有这一项有readonly
    age: number;
    id?: number;
}

// 使用方法
const newObj: Readonly<Person> = {
    name: '张三',
    age: 1,
    id: 1
};
// newObj.name = '李四'; // 异常 因为有readonly只读属性，只能初始化声明，不能赋值。

// Readonly<Person> 等同于 NewPerson
interface NewPerson {
    readonly name: string;
    readonly age: number;
    readonly id?: number;
}

6.Extract (提取/包括)

interface Person {
    name: string;
}

interface NewPerson {
    name: string;
    age: number;
    id: number;
}

// 案例1
//  NewPerson如果extends继承Person(继承了Person的属性)，就返回NewPerson，否则就never异常
const obj: Extract<NewPerson, Person> = {
    name: '',
    age: 1,
    id: 1
}

7.Exclude (排除/不包括)
和 Extract 正好相反

interface Person {
    name: string;
}

interface NewPerson {
    name: string;
    age: number;
    id: number;
}

// 案例1
// Person如果extends继承NewPerson(继承了NewPerson的属性)，就never异常，否则就返回Person
const obj: Exclude<Person, NewPerson> = {
    name: ''
}