TypeScript（类型断言，Omit，&，Pick，Partial，Required）

最新推荐文章于 2023-09-06 09:13:27 发布

欢愉～

最新推荐文章于 2023-09-06 09:13:27 发布

阅读量634

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61612505/article/details/124736481

版权

Partial将类型中所有选项变为可选（即加上？）

Required将类型中所有选项变为必选（去除所有？）

类型断言

1. as 语法

let strValue: any = 'this is string type';
let strLength: number = (strValue as string).length;

2.“尖括号”<> 语法

let strValue = 'this is a string type';
let strLength = (<string>strValue).length;

应用场景：

在使用pinia引入数据productInter时需要ts语法中的类型断言，数据类型为productInter声明的数据类型，其为数组，则state声明productList空数组的时候用到类型断言

state:()=>{
   return{
    productList:[] as productInter[]
  }
}

Omit（去除类型中某些项）

type UserInfo = {
  name: string; // 姓名
  phone?: string; // 手机号
  email: string; // 邮箱
  avatar: string; // 头像
  userid: string; // id
}

1.去除单个项

type OmitEmail = Omit<UserInfo, 'email'>;
/*
 OmitEmail{
  name: string;
  phone?: string;
  avatar: string;
  userid: string;
} */

2. 去除多个项

type OmitEmailAvatar = Omit<UserInfo, 'email' | 'avatar'>;
/* 
OmitEmailAvatar {
  name: string;
  phone?: string; 
  userid: string;
} */

Pick选取类型中指定类型

只要UserInfo中的姓名和电话项

interface ContactPick extends Pick<UserInfo, 'name' | 'phone'> { }
/* 
ContactPick {
  name: string;
  phone?: string; 
} */

给类型加上指定类型 &

已经定义好了数据类型，现在需要给其中一些加上id这个类型

type Connect = {
  id: number
} & UserInfo

Partial将类型中所有选项变为可选（即加上？）

type PartialContact = Partial<UserInfo>
/* 
PartialContact{
  name?: string; // 姓名
  phone?: string; // 手机号
  email?: string; // 邮箱
  avatar?: string; // 头像
  userid?: string; // id
} */

Required将类型中所有选项变为必选（去除所有？）

type RequiredContact = Required<UserInfo>
/* 
RequiredContact{
  name: string; // 姓名
  phone: string; // 手机号
  email: string; // 邮箱
  avatar: string; // 头像
  userid: string; // id
}
 */