12 Typescript 开发实用技巧清单
英文 | https://devsmitra.medium.com/13-typescript-utility-a-cheat-sheet-for-developer-9dfd23cb1bbc
翻译 | 杨小爱
interface UserProfileResponse {id: number;name: string;email: string;phone: string;avatar: string;}
登录响应
interface LoginResponse {id: number;name: string;}
我们可以为 UserProfileResponse 定义类型并为 LoginResponse 选择一些属性，而不是定义相同上下文 LoginResponse 和 UserProfileResponse 的类型。
type LoginResponse = Pick<UserProfileResponse, "id" | "name">;让我们了解一些可以帮助您编写更好代码的实用函数。
01、Uppercase
构造一个 Type 的所有属性都设置为大写的类型。
type Role = "admin" | "user" | "guest";// Bad practicetype UppercaseRole = "ADMIN" | "USER" | "GUEST";// Good practicetype UppercaseRole = Uppercase<Role>; // "ADMIN" | "USER" | "GUEST"
02、Lowercase
构造一个 Type 的所有属性都设置为小写的类型，与大写相反。
type Role = "ADMIN" | "USER" | "GUEST";// Bad practicetype LowercaseRole = "admin" | "user" | "guest";// Good practicetype LowercaseRole = Lowercase<Role>; // "admin" | "user" | "guest"
03、Capitalize
构造一个将 Type 的所有属性设置为大写的类型。
type Role = "admin" | "user" | "guest";// Bad practicetype CapitalizeRole = "Admin" | "User" | "Guest";// Good practicetype CapitalizeRole = Capitalize<Role>; // "Admin" | "User" | "Guest"
04、Uncapitalize
构造一个将 Type 的所有属性设置为 uncapitalize 的类型，与首字母大写相反。
type Role = "Admin" | "User" | "Guest";// Bad practicetype UncapitalizeRole = "admin" | "user" | "guest";// Good practicetype UncapitalizeRole = Uncapitalize<Role>; // "admin" | "user" | "guest"
05、Partial
构造一个类型，其中 Type 的所有属性都设置为可选。
interface User {name: string;age: number;password: string;}// Bad practiceinterface PartialUser {name?: string;age?: number;password?: string;}// Good practicetype PartialUser = Partial<User>;
Required 构造一个类型，该类型由设置为 required 的 Type 的所有属性组成，Opposite的对面。
interface User {name?: string;age?: number;password?: string;}// Bad practiceinterface RequiredUser {name: string;age: number;password: string;}// Good practicetype RequiredUser = Required<User>;
06、Readonly
构造一个类型，该类型由设置为只读的 Type 的所有属性组成。
interface User {role: string;}// Bad practiceconst user: User = { role: "ADMIN" };user.role = "USER";// Good practicetype ReadonlyUser = Readonly<User>;const user: ReadonlyUser = { role: "ADMIN" };user.role = "USER";// Error: Cannot assign to 'role' because it is a read-only property.
07、Record
构造一个具有一组类型 T 的属性 K 的类型，每个属性 K 都映射到类型 T。
interface Address {street: string;pin: number;}interface Addresses {home: Address;office: Address;}// Alternative ✅type AddressesRecord = Record<"home" | "office", Address>;
08、Pick
只选择键在联合类型键中的 Type 的属性。
interface User {name: string;age: number;password: string;}// Bad practiceinterface UserPartial {name: string;age: number;}// Good practicetype UserPartial = Pick<User, "name" | "age">;
09、Omit
Omit其键在联合类型键中的 Type 属性。
interface User {name: string;age: number;password: string;}// Bad practiceinterface UserPartial {name: string;age: number;}// Good practicetype UserPartial = Omit<User, "password">;
10、Exclude
构造一个具有 Type 的所有属性的类型，除了键在联合类型 Excluded 中的那些。
type Role = "ADMIN" | "USER" | "GUEST";// Bad practicetype NonAdminRole = "USER" | "GUEST";// Good practicetype NonAdmin = Exclude<Role, "ADMIN">; // "USER" | "GUEST"
11、Extract
构造一个具有 Type 的所有属性的类型，其键在联合类型 Extract 中。
type Role = "ADMIN" | "USER" | "GUEST";// Bad practicetype AdminRole = "ADMIN";// Good practicetype Admin = Extract<Role, "ADMIN">; // "ADMIN"
12、NonNullable
构造一个类型，其中 Type 的所有属性都设置为不可为空。
type Role = "ADMIN" | "USER" | null;// Bad practicetype NonNullableRole = "ADMIN" | "USER";// Good practicetype NonNullableRole = NonNullable<Role>; // "ADMIN" | "USER"
总结
到这里，我今天要跟你分享的内容就全部结束了，希望你能从这篇文章中学到新的知识。
最后，感谢你的阅读，编程愉快！
学习更多技能
请点击下方公众号
