首页
Preview

13 Typescript 实用工具:开发者的速查表

13 Typescript Utility: A Cheat Sheet for Developer | Rahul Sharma(DevsMitra)

13个Typescript实用工具:开发人员的速查表

Typescript在类型检查方面非常强大,但有时当一些类型是其他类型的子集时,你需要为它们定义类型检查,这会变得繁琐。

让我们来看一个例子,你有两个响应类型:

UserProfileResponse

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

LoginResponse

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

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

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

Uppercase

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

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

Lowercase

构造一个类型,其中Type的所有属性都设置为小写。与Uppercase相反。

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

Capitalize

构造一个类型,其中Type的所有属性都设置为首字母大写。

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

Uncapitalize

构造一个类型,其中Type的所有属性都设置为首字母小写。与Capitalize相反。

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

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

构造一个类型,其中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>;

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.

Record

构造一个类型,其中K类型的一组属性为T类型。每个K属性都映射到T类型。

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

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

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

Exclude

构造一个类型,其中Type的所有属性都排除掉键为排除类型联合的属性。

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

Extract

构造一个类型,其中Type的所有属性都选取键为提取类型联合的属性。

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

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

版权声明:本文内容由TeHub注册用户自发贡献,版权归原作者所有,TeHub社区不拥有其著作权,亦不承担相应法律责任。 如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

点赞(0)
收藏(0)
一个人玩
先找到想要的,然后出发

评论(0)

添加评论