סוגי יוטיליטי ב-TypeScript

מאמר זה מסביר את סוגי היוטיליטי ב-TypeScript.

YouTube Video

סוגי יוטיליטי ב-TypeScript

סוגי היוטיליטי ב-TypeScript הם כלים נוחים ליצירת סוגים חדשים בהתבסס על סוגים קיימים. זה מאפשר הגדרות סוג גמישות יותר ומגדיל את השימוש החוזר בקוד. כאן נפרט על סוגי היוטיליטי הנפוצים ונדון כיצד להשתמש בכל אחד מהם עם קוד לדוגמה.

Partial<T>

Partial<T> הופך את כל המאפיינים של סוג העצם לאופציונליים (מאפשר undefined). זה שימושי כשאתה רוצה להשתמש רק בחלק מהמאפיינים של הסוג המקורי.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7function updateUser(user: Partial<User>) {
 8  console.log(user);
 9}
10
11updateUser({ name: "Alice" }); // Updates only 'name'

הסבר:

בדוגמה למעלה, השימוש ב-Partial<User> הופך את כל המאפיינים של סוג ה-User לאופציונליים. לכן, בפונקציית updateUser, אתה יכול להעביר רק קבוצה חלקית של המאפיינים.

Required<T>

Required<T> הופך את כל המאפיינים, כולל האופציונליים, לחיוביים. משתמשים בזה כשאתה רוצה להמיר מאפיינים אופציונליים לחיוביים.

 1interface User {
 2  id: number;
 3  name?: string;
 4  age?: number;
 5}
 6
 7function createUser(user: Required<User>) {
 8  console.log(user);
 9}
10
11// createUser({ id: 1 }); // Error: 'name' and 'age' are required
12createUser({ id: 1, name: "Alice", age: 25 });

הסבר:

על ידי שימוש ב-Required<User>, מאפיינים כמו name ו-age נחשבים כחיוביים.

Readonly<T>

Readonly<T> הופך את כל מאפייני העצם לקריאה בלבד. זה מונע שינוי של הערכים בעצם.

 1interface User {
 2  id: number;
 3  name: string;
 4}
 5
 6const user: Readonly<User> = {
 7  id: 1,
 8  name: "Alice"
 9};
10
11// user.id = 2; // Error: 'id' is read-only
12console.log(user);

הסבר:

על ידי שימוש ב-Readonly<T>, אתה יכול להגן על מאפייני העצם מפני שינויים. זה אפקטיבי כאשר אתה רוצה למנוע שינוי לא מכוון של נתונים במהלך הפיתוח.

Record<K, T>

Record<K, T> יוצר סוג של מפה עם סוגי מפתח וערך מוגדרים. K הוא סוג המפתחות (כמו string או number), ו-T הוא סוג הערכים.

 1type Roles = "admin" | "user" | "guest";
 2interface Permissions {
 3  read: boolean;
 4  write: boolean;
 5}
 6
 7const rolePermissions: Record<Roles, Permissions> = {
 8  admin: { read: true, write: true },
 9  user: { read: true, write: false },
10  guest: { read: false, write: false },
11};
12
13console.log(rolePermissions);

הסבר:

Record<K, T> שימושי כשאתה רוצה להגדיר זוגות מפתח-ערך. בדוגמה למעלה, ההרשאות מוגדרות על בסיס תפקידי משתמש.

Pick<T, K>

Pick<T, K> מוציא רק את המאפיינים המוגדרים מסוג העצם. אתה יכול ליצור סוג חדש על ידי הוצאת המאפיינים הנחוצים בלבד.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7type UserSummary = Pick<User, "id" | "name">;
 8
 9const summary: UserSummary = {
10  id: 1,
11  name: "Alice"
12};
13
14console.log(summary);

הסבר:

על ידי שימוש ב-Pick<T, K>, אתה יכול להוציא מאפיינים ספציפיים מסוג עצם ולהתייחס אליהם כסוג חדש. לדוגמה, רק id ו-name מוצאים בדוגמה למעלה.

Omit<T, K>

Omit<T, K> מסיר מאפיינים מסוימים מטיפוס אובייקט. זוהי הפעולה ההפוכה ל-Pick.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5  email: string;
 6}
 7
 8type UserWithoutEmail = Omit<User, "email">;
 9
10const userWithoutEmail: UserWithoutEmail = {
11  id: 1,
12  name: "Alice",
13  age: 25
14};
15
16console.log(userWithoutEmail);

הסבר:

על ידי שימוש ב-Omit<T, K> תוכל ליצור טיפוס חדש על ידי הסרת מאפיינים מסוימים. בדוגמה למעלה, מאפיין ה-email הוסר.

Exclude<T, U>

Exclude<T, U> יוצר טיפוס חדש על ידי הסרת טיפוס U מטיפוס איחוד T. משתמשים בזה כאשר רוצים להסיר טיפוס מסוים.

1type Status = "active" | "inactive" | "pending";
2type ExcludedStatus = Exclude<Status, "pending">;
3
4const status: ExcludedStatus = "active"; // "pending" is excluded, so it cannot be chosen
5console.log(status);

הסבר:

על ידי שימוש ב-Exclude<T, U> ניתן להסיר טיפוסים לא נחוצים מתוך טיפוס איחוד. בדוגמה למעלה, מכיוון ש-"pending" הוסר, ניתן לבחור רק ב-"active" או "inactive".

Extract<T, U>

Extract<T, U> מוציא את החלקים שתואמים לטיפוס U מתוך טיפוס איחוד T. יעיל כאשר רוצים לחלץ רק טיפוס מסוים.

1type Status = "active" | "inactive" | "pending";
2type ActiveStatus = Extract<Status, "active" | "pending">;
3
4const status: ActiveStatus = "active"; // "inactive" cannot be chosen
5console.log(status);

הסבר:

Extract<T, U> מבצע את הפעולה ההפוכה ל-Exclude. בדוגמה למעלה, רק "active" ו-"pending" ניתנים לבחירה.

NonNullable<T>

NonNullable<T> יוצר טיפוס שבו null ו-undefined מוסרים. זה מועיל כאשר רוצים להסיר ערכים אלו מטיפוסים אופציונליים.

1type UserName = string | null | undefined;
2type ValidUserName = NonNullable<UserName>;
3
4const name: ValidUserName = "Alice"; // null and undefined cannot be chosen
5console.log(name);

הסבר:

NonNullable<T> מסיר את null ו-undefined מתוך טיפוס שמכיל אותם. זה מועיל כאשר רוצים להבטיח שערך קיים בוודאות.

סיום

טיפוסי עזר של TypeScript הם כלים עוצמתיים להפיכת הגדרות טיפוס ליעילות וגמישות יותר. הבנת ושימוש נכון בטיפוסי עזר בסיסיים כמו Partial, Required, Readonly, Record ועוד, יכולים לשפר את שימושיות הקוד ותחזוקתו. שליטה בטיפוסים אלו מאפשרת הגדרות טיפוס חזקות ובטוחות יותר, ומאפשרת פיתוח יעיל יותר.

האופרטור keyof ב-TypeScript

האופרטור keyof ב-TypeScript משמש לשליפת כל שמות המאפיינים של טיפוס אובייקט. באמצעות אופרטור זה, ניתן לקבל את המפתחות של סוג אובייקט כסוג יוניון. זה שימושי מאוד לכתיבת קוד בטוח מבחינת טיפוסים.

שימוש בסיסי

1interface Person {
2    name: string;
3    age: number;
4    email: string;
5}
6
7// Use keyof to get the property names of Person
8type PersonKeys = keyof Person; // "name" | "age" | "email"

שימוש לדוגמה

1. שימוש בו בפרמטרים של פונקציה

   ניתן להשתמש ב-keyof כדי להגדיר פונקציה שיש לה טיפוסים המבוססים על מאפיינים ספציפיים של אובייקט.

1function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
2    return obj[key];
3}
4
5const person: Person = { name: "Alice", age: 30, email: "alice@example.com" };
6const name = getProperty(person, "name"); // type is string
7const age = getProperty(person, "age");   // type is number

2. הוספת מגבלות טיפוס

   באמצעות keyof, ניתן להבטיח שהמפתחות המועברים לפונקציה יאומתו בזמן הקומפילציה.

1// Passing an invalid property name results in an error
2const invalid = getProperty(person, "invalidKey"); // Error

סיכום

• אופרטור keyof משמש לשליפת כל שמות המאפיינים של סוג אובייקט.
• ניתן להשיג את שמות המאפיינים כסוג יוניון, וכך לכתוב קוד בטוח מבחינת טיפוסים.
• על ידי שימוש בו בפרמטרים של פונקציה, ניתן להגביל את הפונקציה לקבל שמות מאפיינים תקפים בלבד.

בדרך זו, אופרטור keyof משפר את הבטיחות הטיפוסית ב-TypeScript ועוזר לכתוב קוד חזק יותר.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video