web前端學習：12個Typescript 開發代碼屬性

Hello~~各位小夥伴，今天廣州藍景實訓部跟大家分享前端開發代碼，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">;           

讓我們了解一些可以幫助您編寫更好代碼的實用函數。

01、Uppercase

構造一個 Type 的所有屬性都設定為大寫的類型。

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

02、Lowercase

構造一個 Type 的所有屬性都設定為小寫的類型，與大寫相反。

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

03、Capitalize

構造一個将 Type 的所有屬性設定為大寫的類型。

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

04、Uncapitalize

構造一個将 Type 的所有屬性設定為 uncapitalize 的類型，與首字母大寫相反。

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

05、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>;           

06、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.           

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 practice
interface UserPartial {
name: string;
age: number;
}
// Good practice
type UserPartial = Pick<User, "name" | "age">;           

09、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"           

總結

以上内容就是廣州藍景今天所分享的Typescript開發代碼屬性，希望能幫助到你，希望你能從這篇文章中學到新的知識。可以關注我們。