טיפוסים סוגים כפולים

כיצד להקליד את צמרות הטובים ביותר ב- Typescript 4.2 ואילך

מבט מקרוב על צמרות טיפוסי

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

דוגמה פשוטה מראה כיצד מגדירים צמרות בטיפוס.

// This tuple is defined as a set
// of two numbers.
const scores: [number, number] = [1, 2];

// For comparison, this tuple consists
// of three elements, each of a different
// type. Not that the ordered nature of
// tuples in TS becomes very clear here.
const result: [string, number, boolean] = ["id", 101, false];

// And as a "nice-to-know", you can even
// provide lables for the tuple elements.
// This doesn't have any effect on the typesystem
// itself and only (may) improve documentation.
const output: [id: number, name: string] = [101, "Tom"];

טוליות עם אלמנטים אופציונליים

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

דוגמה נוספת מדגימה למה אני מתכוון בכך.

// Similar to our previous example, but in this
// case the the tuple's last element doesn't have
// to be provided (or can be undefined at runtime).
type Tuple = [id: number, name?: string];

const a: Tuple = [101];
const b: Tuple = [42, "Tom"];

אלמנטים מנוחה בכדורי טיפוס כתב

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

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

// This example might be a tuple type
// for a CLI similar to Node.js. The first
// two elements are system-internal.
//
// Starting from the 3rd element, a user can
// provide as much arguments as desired, yet
// we can still cleanly handle it with TS. Nice!
let input: [number, boolean, ...string[]];

// Just to show that we really can provide any
// number of rest elements, including 0.
e = [0, false, "max-cache", "1024", "debug", "false"];
e = [0, false];
e = [0, false, "verbose"];

אלמנט מנוחה מוביל או אמצעי בסוגי tuple

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

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

  • לא אחריו אלמנט אופציונלי
  • שום אלמנט מנוחה אחר אינו עוקב אחר הראשון

לפני שנדבר יותר מדי תיאוריה, בואו נראה לדוגמא.

// And here comes the fancy part: rest elements
// *not only* at the end of a tuple.
// 
// Note: this example is taken directly from the
// TS documentation. For more details, check out the
// links in the addendum.
let foo: [...string[], number];

foo = [123];
foo = ["hello", 123];
foo = ["hello!", "hello!", "hello!", 123];

let bar: [boolean, ...string[], boolean];

bar = [true, false];
bar = [true, "some text", false];
bar = [true, "some", "separated", "text", false];

// And here's an example that shows how the
// type system would catch your errors:
interface Clown { /*...*/ }
interface Joker { /*...*/ }

let StealersWheel: [...Clown[], "me", ...Joker[]];
//                                    ~~~~~~~~~~ Error!
// A rest element cannot follow another rest element.

let StringsAndMaybeBoolean: [...string[], boolean?];
//                                        ~~~~~~~~ Error!
// An optional element cannot follow a rest element.

מרכיב השאר במאמר זה

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

הצעות

קשור

נספח

שפות