כיצד לפשט את קוד ה-TypeScript שלך עם 6 סוגי עזר חיוניים

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

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





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





איפור של סרטון היום גלול כדי להמשיך עם התוכן

1. סוג שירות חלקי

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





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

משתמש ב סוג שירות חלקי , תוכל ליצור סוג חדש עם כל המאפיינים של ממשק המשתמש מוגדרים כאופציונליים:

 type OptionalUser = Partial<User>

כעת, אתה יכול ליצור מופע מסוג OptionalUser עם מאפיינים מסוימים בלבד שהוגדרו:



 const user: OptionalUser = { name: "John" };

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

2. בחר סוג כלי עזר

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





 interface User {  
  location: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Pick<User, 'location' | 'age'>;

const person: PersonWithoutEmail = {
  location: 'USA',
  age: 30
};

בדוגמה זו, ממשק בשם 'משתמש' מגדיר שלושה מאפיינים: אימייל, גיל ומיקום.

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





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

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

3. סוג כלי עזר לקריאה בלבד

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

 interface User { 
  readonly name: string;
  readonly age: number;
  readonly email: string;
}

משתמש ב סוג כלי עזר לקריאה בלבד , תוכל ליצור סוג חדש עם כל מאפייני ממשק המשתמש מוגדרים כקריאה בלבד:

 type ReadonlyUser = Readonly<User>

ניתן לציין ערכי מאפיינים בעת יצירת מופע ReadonlyUser::

 const user: ReadonlyUser = {  
  name: "John",
  age: 30,
  email: "john@example.com"
};

כאשר אתה מסמן את המאפיינים של אובייקט כקריאה בלבד, הניסיון לשנות את הערכים של מאפיינים אלה הופך לבלתי אפשרי:

 user.name = "Jane"; 
// Error: Cannot assign to 'name' because it is a read-only property.

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

4. סוג שירות נדרש

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

 interface User { 
  name: string;
  location: number;
  address: string;
}

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

 const user: RequiredUser = {  
  name: "John Doe",
  location: "USA",
  address: "Kansas 9745-0622"
};

שימוש בסוג השירות Required מבטיח שכל המאפיינים הנדרשים נמצאים בתוך אובייקט.

5. השמט את סוג כלי השירות

סוג השירות Omit מאפשר לך ליצור סוג חדש על ידי אי הכללת מאפיינים מסוימים מסוג קיים.

 interface Person { 
  location: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Omit<Person, 'email'>;
const person:PersonWithoutEmail = { location: "USA"; age : 30 };

לממשק האדם יש שלושה מאפיינים: גיל, מיקום ודואר אלקטרוני. הסוג PersonWithoutEmail משתמש בסוג עזר Omit כדי לכלול את כל המאפיינים של אובייקט Person, מלבד דואר אלקטרוני. לאחר מכן תוכל ליצור מופע מהסוג החדש הזה, מבלי לציין ערך עבור מאפיין דוא'ל.

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

6. סוג כלי שירות להקלטה

ניתן להשתמש בסוג השירות Record כדי להגדיר סוג אובייקט שעבורו המפתחות והערכים הם מסוג מסוים. ההגדרה שלו היא:

 type Record<K extends keyof any, T> = { [P in K]: T;};

זה משייך את הסוג T לערך של כל מפתח, בעוד K הוא איחוד של מפתחות מכל סוג שהוא. לאובייקט המתקבל סוג המאפיין שלו P מוגדר ל-T.

שקול את התרחיש של סוג אובייקט עם מקשי מחרוזת וערכים מספריים. במקרה כזה, אתה יכול ליישם את סוג כלי שירות להקליט כפי ש:

כיצד לבדוק את כרטיס המסך שלך windows 10
 type MyRecord = Record<string, number>; 

const myObject: MyRecord = {
  "foo": 1,
  "bar": 2,
  "baz": 3,
}

דוגמה זו מציינת את MyRecord כסוג אובייקט עם מקשי מחרוזת וערכים מספריים. האובייקט myObject מגלם דוגמה מסוג זה, כאשר המקשים 'foo', 'bar' ו-'baz' מוקצים לערכים המתאימים להם.

ייעול קוד עם סוגי עזר מסוג TypeScript

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