12 个Typescript开发实用小技巧【值得收藏】

Typescript 在类型检查方面非常强大，但有时某些类型是其他类型的子集并且需要为它们定义类型检查时，它会变得乏味。

举个例子

有两种响应类型：

用户配置文件响应

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">;

让我们了解一些可以帮助您编写更好代码的实用函数。

1、Uppercase

构造一个 Type 的所有属性都设置为大写的类型。

type Role = "admin" | "user" | "guest";
// Bad practice 
type UppercaseRole = "ADMIN" | "USER" | "GUEST";
// Good practice 
type UppercaseRole = Uppercase<Role>; // "ADMIN" | "USER" | "GUEST"

2、Lowercase

构造一个 Type 的所有属性都设置为小写的类型，与大写相反。

type Role = "ADMIN" | "USER" | "GUEST";
// Bad practice 
type LowercaseRole = "admin" | "user" | "guest";
// Good practice 
type LowercaseRole = Lowercase<Role>; // "admin" | "user" | "guest"

3、Capitalize

构造一个将 Type 的所有属性设置为大写的类型。

type Role = "admin" | "user" | "guest";
// Bad practice 
type CapitalizeRole = "Admin" | "User" | "Guest";
// Good practice 
type CapitalizeRole = Capitalize<Role>; // "Admin" | "User" | "Guest"

4、Uncapitalize

构造一个将 Type 的所有属性设置为 uncapitalize 的类型，与首字母大写相反。

type Role = "Admin" | "User" | "Guest";
// Bad practice 
type UncapitalizeRole = "admin" | "user" | "guest";
// Good practice 
type UncapitalizeRole = Uncapitalize<Role>; // "admin" | "user" | "guest"

5、Partial

构造一个类型，其中 Type 的所有属性都设置为可选。

interface User {
  name: string;
  age: number;
  password: string;
}
// Bad practice 
interface PartialUser {
  name?: string;
  age?: number;
  password?: string;
}
// Good practice 
type PartialUser = Partial<User>;

Required 构造一个类型，该类型由设置为 required 的 Type 的所有属性组成，Opposite的对面。

interface User {
  name?: string;
  age?: number;
  password?: string;
}
// Bad practice 
interface RequiredUser {
  name: string;
  age: number;
  password: string;
}
// Good practice 
type RequiredUser = Required<User>;

6、Readonly

构造一个类型，该类型由设置为只读的 Type 的所有属性组成。

interface User {
  role: string;
}
// Bad practice 
const user: User = { role: "ADMIN" };
user.role = "USER";
// Good practice 
type ReadonlyUser = Readonly<User>;
const user: ReadonlyUser = { role: "ADMIN" };
user.role = "USER"; 
// Error: Cannot assign to 'role' because it is a read-only property.

7、Record

构造一个具有一组类型 T 的属性 K 的类型，每个属性 K 都映射到类型 T。

interface Address {
  street: string;
  pin: number;
}
interface Addresses {
  home: Address;
  office: Address;
}
// Alternative
type AddressesRecord = Record<"home" | "office", Address>;

8、Pick

只选择键在联合类型键中的 Type 的属性。

interface User {
  name: string;
  age: number;
  password: string;
}
// Bad practice 
interface UserPartial {
  name: string;
  age: number;
}
// Good practice 
type UserPartial = Pick<User, "name" | "age">;

9、Omit

Omit其键在联合类型键中的 Type 属性。

interface User {
  name: string;
  age: number;
  password: string;
}
// Bad practice 
interface UserPartial {
  name: string;
  age: number;
}
// Good practice 
type UserPartial = Omit<User, "password">;

10、Exclude

构造一个具有 Type 的所有属性的类型，除了键在联合类型 Excluded 中的那些。

type Role = "ADMIN" | "USER" | "GUEST";
// Bad practice 
type NonAdminRole = "USER" | "GUEST";
// Good practice 
type NonAdmin = Exclude<Role, "ADMIN">; // "USER" | "GUEST"

11、Extract

构造一个具有 Type 的所有属性的类型，其键在联合类型 Extract 中。

type Role = "ADMIN" | "USER" | "GUEST";
// Bad practice 
type AdminRole = "ADMIN";
// Good practice 
type Admin = Extract<Role, "ADMIN">; // "ADMIN"

12、NonNullable

构造一个类型，其中 Type 的所有属性都设置为不可为空。

type Role = "ADMIN" | "USER" | null;
// Bad practice 
type NonNullableRole = "ADMIN" | "USER";
// Good practice 
type NonNullableRole = NonNullable<Role>; // "ADMIN" | "USER"

英文：https://devsmitra.medium.com/13-typescript-utility-a-cheat-sheet-for-developer-9dfd23cb1bbc
翻译：杨小爱

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_12340