13 個Typescript 實(shí)用類型：開發(fā)人員的備忘單

在類型檢查方面，Typescript非常強(qiáng)大，但有時(shí)當(dāng)一些類型是其他類型的子集，而你需要為它們定義類型檢查時(shí)，它就變得很乏味。

舉個例子，你有2個響應(yīng)類型。

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

讓我們來了解一些可以幫助你寫出更好的代碼的實(shí)用函數(shù)。

Uppercase

構(gòu)建一個類型的所有屬性都設(shè)置為大寫的類型。

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

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

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

Lowercase

構(gòu)建一個類型的所有屬性都設(shè)置為小寫的類型。與 Uppercase 相反。

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

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

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

Capitalize

構(gòu)建一個類型的所有屬性都設(shè)置為大寫開頭的類型。

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

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

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

Uncapitalize

構(gòu)建一個類型的所有屬性都設(shè)置為非大寫的類型。與Capitalize相反。

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

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

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

Partial

構(gòu)建一個類型的所有屬性都設(shè)置為可選的類型。

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

構(gòu)建一個由Type的所有屬性組成的類型，設(shè)置為必填。與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>;

Readonly

構(gòu)建一個由Type的所有屬性組成的類型，設(shè)置為只讀。

Record是一個很好用的工具類型。他會將一個類型的所有屬性值都映射到另一個類型上并創(chuàng)造一個新的類型

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.

Record

Record是一個很好用的工具類型。他會將一個類型的所有屬性值都映射到另一個類型上并創(chuàng)造一個新的類型。

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

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

// 或者
type AddressesRecord = Record<"home" | "office", Address>;

Pick

從一個復(fù)合類型中，取出幾個想要的類型的組合

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

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

// Good practice ?
type UserPartial = Pick<User, "name" | "age">;

Omit

以一個類型為基礎(chǔ)支持剔除某些屬性，然后返回一個新類型。

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

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

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

Exclude

Exclude<T, U>，該工具類型能夠從類型T中剔除所有可以賦值給類型U的類型。

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

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

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

Extract

Extract 的功能，與 Exclude 相反，它是 提取 T 中可以賦值給 U 的類型。

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

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

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

NonNullable

構(gòu)建一個類型的所有屬性都設(shè)置為非空的類型。

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

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

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


點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動和交流，掃描下方”二維碼“或在“公眾號后臺“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -