TypeScript 实用类型:6 种最有用的
我使用 TypeScript 已经快一年了,这段时间我学到了很多东西,也实践了很多。TypeScript 最让我喜欢的功能之一是它提供的实用类型,它们能让我写出更好的代码。所以今天我将讨论 6 种最实用的实用类型,它们能帮助你写出更好的代码。
那么让我们开始吧,
记录
如果您想构建一个具有一组keys
类型属性的对象类型types
,那么记录是最好的实用类型。
例子
您想要创建一个对象类型来存储用户的信息,在这里您可以使用Record
实用程序来实现相同的目的。
// Our user ID will be a string
type UserID = string
// Defining our available user information types
type UserInfo = {
name: string;
email: string;
avatarUrl: string;
}
const users: Record<UserID, UserInfo> = {
"uuid1": { "name": "user1", "email": "user1@gmail.com", "avatarUrl": "https://user1.com/avatar.png" },
"uuid2": { "name": "user2", "email": "user2@gmail.com", "avatarUrl": "https://user2.com/avatar.png" },
"uuid3": { "name": "user3", "email": "user3@gmail.com", "avatarUrl": "https://user3.com/avatar.png" }
}
如果您尝试添加类型中不存在的任何其他类型
UserInfo
,则打字稿将出现编译错误。
部分的
当您想要使用现有类型但希望所有属性都是可选的时,Partial 实用程序类型非常有用。
例子
假设您想要更新用户的某个属性,并且您已经有一个包含所有必需属性的用户界面,但您不想创建一个单独的界面来更新用户信息。使用 Partial 实用程序,您可以动态创建一个所有属性均为可选的类型。
// User interface with all required properties
interface User{
id:string;
name: string;
slug: string;
group: string[];
avatarUrl: string;
about: string;
}
// Partial<User> generates a new type based on User with all the property
// keys being optional
const updateUser: Partial<User> = {
about: 'I am a software engineer.'
}
必需的
Required 实用程序类型与 Partial 实用程序类型完全相反,当您想要使用现有类型但希望所有属性都是必需时,它非常有用。
例子
在某些情况下,您可能希望强制对象具有所有必需的属性,即使原始类型将其中一些属性定义为可选的。
// User type has lastName property as optional
type User = {
firstName: string,
lastName?: string
}
// You want to create a user with both firstName and lastName, so you can use User type with Required utility type to make all the properties as required.
const user1: Required<User> = {
firstName: "John",
lastName: "Doe"
}
忽略
省略实用程序类型可用于通过省略另一个对象类型的特定属性来创建对象类型。
例子
假设您有一个对象类型用户,它具有一些属性 X、Y 和 Z。如果您想创建一个没有属性 Z 的对象类型,那么您可以使用此实用程序类型。
type Product = {
X: string;
Y: string;
Z: string;
}
type ProductWithoutZ = Omit<Product, "Z">;
挑选
使用 Pick 实用程序类型,您可以从现有类型中选取属性来创建新类型。
如果您的子组件与父组件具有一些共同的属性,则可以通过选取这些属性来为子组件创建一个类型。
例子
type ParentType = {
X: string;
T: number;
S: boolean;
}
type ChildType = Pick<ParentType, "X" | "S">
排除
使用联合类型时,常见的情况是只想使用包含特定成员而不是全部成员的联合类型,这时可以使用 Exclude 实用程序来实现相同的目的。
例子
type ReactionUnion = '👍' | '👎' | '😄' | '🎉' | '😕' | '❤️' | '👀' | '🚀'
// This is equivivalent to '👍' | '👎'
type OnlyThumbsUnion = Exclude<ReactionUnion , '😄' | '🎉' | '😕' | '❤️' | '👀' | '🚀'>
概括
在本文中,我们讨论了 6 种 TypeScript 实用程序类型,它们将帮助你编写更好的 TypeScript 代码。TypeScript还提供了更多实用程序类型,你可以在这里
查看。
本期内容就到这里。感谢您的阅读。