TypeScript高级类型-Partial、Required、Pick、Omit、Readonly

百里渊
2023-12-01

Partial (可选属性,但仍然不允许添加接口中没有的属性)

ts中就是让一个定义中的所有属性都变成可选参数,参数可以变多也可以少。

我们定义 一个user 接口,如下

interface IUser {
  name: string
  age: number
  department: string
}

//经过 Partial 类型转化后得到

type optional = Partial<IUser>

// optional的结果如下

type optional = {
    name?: string | undefined;
    age?: number | undefined;
    department?: string | undefined;
}

当我们不能明确地确定对象中包含哪些属性时,我们就可以通过Partial来声明。

Required(必选属性)

和Partial刚好相反,将一个定义中的属性全部变成必选参数

让一个类型的属性全部必填

Pick(部分选择)

可能需要从一个已声明的类型中抽取出一个子类型,在子类型中包含父类型中的部分或全部属性,这时我们可以使用Pick来实现,

ts中可以选择一个原来的接口中一部分的属性定义

interface User {
    id: number;
    name: string;
    age: number;
    gender: number;
    email: string;
}

type PickUser = Pick<User, "id" | "name" | "gender">;

// 等价于
type PickUser = {
    id: number;
    name: string;
    gender: number;
};

let user: PickUser = {
    id: 1,
    name: 'tom',
    gender: 1
};
// 等价于
type PickUser = {
    id: number;
    name: string;
    gender: number;
};

let user: PickUser = {
    id: 1,
    name: 'tom',
    gender: 1
};

Omit(属性忽略) 

与Pick相反,Pick用于拣选出我们需要关心的属性,而Omit用于忽略掉我们不需要关心的属性

interface User {
    id: number;
    name: string;
    age: number;
    gender: number;
    email: string;
}

// 表示忽略掉User接口中的age和email属性
type OmitUser = Omit<User, "age" | "email">;
// 等价于
type OmitUser = {
  id: number;
  name: string;
  gender: number;
};

let user: OmitUser = {
    id: 1,
    name: 'tom',
    gender: 1
};

Readonly (只读属性)

如果要求对象中的一些字段只能在创建的时候被赋值,使用 readonly 定义只读属性(只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候)

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};
tom.id = 9527;      //  Cannot assign to 'id' because it is a constant or a read-only property

参考博文链接:

TypeScript高级用法详解 - 笑人 - 博客园

https://blog.csdn.net/roamingcode/article/details/104111165

https://blog.csdn.net/qq_39403733/article/details/93807519

 类似资料: