前端文档

Appearance

On this page

1. Omit去除类型中某些属性

javascript
interface IUser{
  name: string;
  phone: number; 
  age: number;
}

/*
	假设 李四用户 没有phone和age 属性
	去除单个为 Omit<IUser, 'phone'>
*/
let user2: Omit<IUser, 'phone' | 'age'> = {
  name: '李四'
}
interface IUser{
  name: string;
  phone: number; 
  age: number;
}

/*
	假设 李四用户 没有phone和age 属性
	去除单个为 Omit<IUser, 'phone'>
*/
let user2: Omit<IUser, 'phone' | 'age'> = {
  name: '李四'
}

2. Pick选取类型中指定类型属性组成一个新的类型

javascript
interface IUser{
  name: string;
  phone: number; 
  age: number;
}

//选取IUser 接口中name和phone 属性 组成一个新的类型
let user3: Pick<IUser, 'name' | 'phone'> = {
  name: '王五',
  phone: 13162548974,
}
interface IUser{
  name: string;
  phone: number; 
  age: number;
}

//选取IUser 接口中name和phone 属性 组成一个新的类型
let user3: Pick<IUser, 'name' | 'phone'> = {
  name: '王五',
  phone: 13162548974,
}

4. Partial将类型中所有选项变为可选，即加上？

javascript
interface IUser{
  name: string;
  phone: number; 
  age: number;
}

//将IUser 中所有类型属性变成可选
let user4: Partial<IUser> = {
  
}
interface IUser{
  name: string;
  phone: number; 
  age: number;
}

//将IUser 中所有类型属性变成可选
let user4: Partial<IUser> = {
  
}

5. Required将类型中所有选项变为必选，去除所有？

javascript
interface IUser{
  name?: string;
  phone?: number; 
  age?: number;
}

//将IUser 中所有可选类型属性变成必选
let user5: Required<IUser> = {
  name: '张三',
  phone: 13162548974,
  age: 20
}
interface IUser{
  name?: string;
  phone?: number; 
  age?: number;
}

//将IUser 中所有可选类型属性变成必选
let user5: Required<IUser> = {
  name: '张三',
  phone: 13162548974,
  age: 20
}

6. Readonly（只读的）让传入类型中的所有属性变成都是只读的（不能修改属性）

javascript
interface IUser{
  name: string;
  phone: number; 
  age: number;
}

//将IUser 中所有可选类型属性变成必选
let user6: Readonly<IUser> = {
  name: '张三',
  phone: 13162548974,
  age: 20
}

user6.name = '李四'; //错误, user6对象属性为只读
interface IUser{
  name: string;
  phone: number; 
  age: number;
}

//将IUser 中所有可选类型属性变成必选
let user6: Readonly<IUser> = {
  name: '张三',
  phone: 13162548974,
  age: 20
}

user6.name = '李四'; //错误, user6对象属性为只读

7. Record 构建一个类型，这个类型用来描述一个对象，这个对象的属性都具有相同的类型

javascript
//例子1
const user1: Record<string, any> = {
  name: '张三',
  phone: 13162548974,
  age: 20
}

//例子2
enum orderStatusCode {
  UN_PAYED = 1,
  PAYED = 2,
  CANCELED = 3,
  CLOSED = 4,
}
//Record: 他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型.
const orderStatusDesc: Record<orderStatusCode, string> = {
  [orderStatusCode.UN_PAYED]: '未支付',
  [orderStatusCode.PAYED]: '已支付',
  [orderStatusCode.CANCELED]: '已取消',
  [orderStatusCode.CLOSED]: '已关闭'
}
//例子1
const user1: Record<string, any> = {
  name: '张三',
  phone: 13162548974,
  age: 20
}

//例子2
enum orderStatusCode {
  UN_PAYED = 1,
  PAYED = 2,
  CANCELED = 3,
  CLOSED = 4,
}
//Record: 他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型.
const orderStatusDesc: Record<orderStatusCode, string> = {
  [orderStatusCode.UN_PAYED]: '未支付',
  [orderStatusCode.PAYED]: '已支付',
  [orderStatusCode.CANCELED]: '已取消',
  [orderStatusCode.CLOSED]: '已关闭'
}