13 Typescript 实用程序：开发人员的速查表

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

让我们举个例子，您有两种响应类型：

用户配置文件响应

interface UserProfileResponse {
  id: number;
  name: string;
  email: string;
  phone: string;
  avatar: string;
}

登录响应

interface LoginResponse {
  id: number;
  name: string;
}

我们不必定义相同上下文的 LoginResponse 和 UserProfileResponse 类型，而是可以为 UserProfileResponse 定义类型并为 LoginResponse 选择一些属性。

type LoginResponse = Pick<UserProfileResponse, "id" | "name">;

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

大写

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

type Role = "admin" | "user" | "guest";

// Bad practice 💩
type UppercaseRole = "ADMIN" | "USER" | "GUEST";

// Good practice ✅
type UppercaseRole = Uppercase<Role>; // "ADMIN" | "USER" | "GUEST"

小写

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

type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type LowercaseRole = "admin" | "user" | "guest";

// Good practice ✅
type LowercaseRole = Lowercase<Role>; // "admin" | "user" | "guest"

大写

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

type Role = "admin" | "user" | "guest";

// Bad practice 💩
type CapitalizeRole = "Admin" | "User" | "Guest";

// Good practice ✅
type CapitalizeRole = Capitalize<Role>; // "Admin" | "User" | "Guest"

取消大写

构造一个类型，并将 Type 的所有属性设置为非大写。与 Capitalize 相反。

type Role = "Admin" | "User" | "Guest";

// Bad practice 💩
type UncapitalizeRole = "admin" | "user" | "guest";

// Good practice ✅
type UncapitalizeRole = Uncapitalize<Role>; // "admin" | "user" | "guest"

部分的

构造一个类型，将 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>;

必需的

构造一个包含所有 Type 属性且设置为必需的类型。与 Partial 相反。

interface User {
  name?: string;
  age?: number;
  password?: string;
}

// Bad practice 💩
interface RequiredUser {
  name: string;
  age: number;
  password: string;
}

// Good practice ✅
type RequiredUser = Required<User>;

只读

构造一个由设置为只读的 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.

记录

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

interface Address {
  street: string;
  pin: number;
}

interface Addresses {
  home: Address;
  office: Address;
}

// Alternative ✅
type AddressesRecord = Record<"home" | "office", Address>;

挑选

仅选择其键位于联合类型键中的 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">;

忽略

仅省略其键位于联合类型键中的 Type 的属性。

interface User {
  name: string;
  age: number;
  password: string;
}

// Bad practice 💩
interface UserPartial {
  name: string;
  age: number;
}

// Good practice ✅
type UserPartial = Omit<User, "password">;

排除

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

type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type NonAdminRole = "USER" | "GUEST";

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

提炼

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

type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type AdminRole = "ADMIN";

// Good practice ✅
type Admin = Extract<Role, "ADMIN">; // "ADMIN"

不可空

构造一个类型，并将 Type 的所有属性设置为非空。

type Role = "ADMIN" | "USER" | null;

// Bad practice 💩
type NonNullableRole = "ADMIN" | "USER";

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