TypeScript技巧-类型
大约 2 分钟
01、Uppercase (大写)
构造一个 Type 的所有属性都设置为大写的类型。
type Role = "admin" | "user" | "guest";
// 原始写法
type UppercaseRole = "ADMIN" | "USER" | "GUEST";
// 推荐写法
type UppercaseRole = Uppercase<Role>; // "ADMIN" | "USER" | "GUEST"
02、 Lowercase (小写)
构造一个 Type 的所有属性都设置为小写的类型,与大写相反。
type Role = "ADMIN" | "USER" | "GUEST";
// 原始写法
type LowercaseRole = "admin" | "user" | "guest";
// 推荐写法
type LowercaseRole = Lowercase<Role>; // "admin" | "user" | "guest"
03、Capitalize(首字母大写)
构造一个将 Type 的所有属性设置为大写的类型。
type Role = "admin" | "user" | "guest";
// 原始写法
type CapitalizeRole = "Admin" | "User" | "Guest";
// 推荐写法
type CapitalizeRole = Capitalize<Role>; // "Admin" | "User" | "Guest"
04、Uncapitalize(首字母小写)
构造一个将 Type 的所有属性设置为 uncapitalize 的类型,与首字母大写相反。
type Role = "Admin" | "User" | "Guest";
// 原始写法
type UncapitalizeRole = "admin" | "user" | "guest";
// 推荐写法
type UncapitalizeRole = Uncapitalize<Role>; // "admin" | "user" | "guest"
05、Partial(可选)
构造一个类型,其中 Type 的所有属性都设置为可选。
interface User {
name: string;
age: number;
password: string;
}
// 原始写法
interface PartialUser {
name?: string;
age?: number;
password?: string;
}
// 推荐写法
type PartialUser = Partial<User>;
06、Required(必选)
构造一个类型,该类型由设置为 required 的 Type 的所有属性组成,Opposite的对面。
interface User {
name?: string;
age?: number;
password?: string;
}
// 原始写法
interface RequiredUser {
name: string;
age: number;
password: string;
}
// 推荐写法
type RequiredUser = Required<User>;
07、Readonly(只读)
构造一个类型,该类型由设置为只读的 Type 的所有属性组成。
interface User {
role: string;
}
// 原始写法
const user: User = { role: "ADMIN" };
user.role = "USER";
// 推荐写法
type ReadonlyUser = Readonly<User>;
const user: ReadonlyUser = { role: "ADMIN" };
user.role = "USER"; // Error: Cannot assign to 'role' because it is a read-only property.
08、Record
构造一个具有一组类型 T 的属性 K 的类型,每个属性 K 都映射到类型 T。
interface Address {
street: string;
pin: number;
}
interface Addresses {
home: Address;
office: Address;
}
// Alternative ✅
type AddressesRecord = Record<"home" | "office", Address>;
09、Pick
只选择键在联合类型键中的 Type 的属性。
interface User {
name: string;
age: number;
password: string;
}
// 原始写法
interface UserPartial {
name: string;
age: number;
}
// 推荐写法
type UserPartial = Pick<User, "name" | "age">;
10、Omit
Omit其键在联合类型键中的 Type 属性。
interface User {
name: string;
age: number;
password: string;
}
// 原始写法
interface UserPartial {
name: string;
age: number;
}
// 推荐写法
type UserPartial = Omit<User, "password">;
11、Exclude
构造一个具有 Type 的所有属性的类型,除了键在联合类型 Excluded 中的那些。
type Role = "ADMIN" | "USER" | "GUEST";
// 原始写法
type NonAdminRole = "USER" | "GUEST";
// 推荐写法
type NonAdmin = Exclude<Role, "ADMIN">; // "USER" | "GUEST"
12、Extract
构造一个具有 Type 的所有属性的类型,其键在联合类型 Extract 中。
type Role = "ADMIN" | "USER" | "GUEST";
// 原始写法
type AdminRole = "ADMIN";
// 推荐写法
type Admin = Extract<Role, "ADMIN">; // "ADMIN"
13、NonNullable
构造一个类型,其中 Type 的所有属性都设置为不可为空。
type Role = "ADMIN" | "USER" | null;
// 原始写法
type NonNullableRole = "ADMIN" | "USER";
// 推荐写法
type NonNullableRole = NonNullable<Role>; // "ADMIN" | "USER"