סוגי מחרוזות תבנית כתב

מהם סוגים מילוליים של תבנית

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

// Define a mutable string as 'Literal Type'.
let key: "name" | "department" = "name";

// This works, as 'department' is part of the type.
key = "department";
// Won't work, as it's not define in the union type.
key = "company";

// Of course, the same applies for functions.
function getKey(): "name" | "department" {
  return Math.random() <= 0.5 ? "name" : "department";
}

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

// Define a Literal Type
type State = "ready";

// Nice, isn't it? As in Javascript's 
// 'template literal strings', we can
// reuse the same syntax for TS.
//
// The create type here is now 'Key-ready'.
type Key = `key-${State}`;

// This of course works for union types as well.
// Let's take these non-descriptive types for a 
// quick demo:
type GraphState = "sleep" | "ready" | "error";
type MachineState = "booting" | "running";

// And here's the 'template literal type':
type EntityState = `ES-${GraphState | MachineState}`;

// The possible combinations therefore 
// work out like this:
//
// type EntityState = 'ES-sleep' 
//  | 'ES-ready'
//  | 'ES-error'
//  | 'ES-booting'
//  | 'ES-running'

יש עוד יותר עם Typescript 4.3

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

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

// This example is taken 1:1 from 
// Typescript's 4.3 announcement.
// Please check out the link in the
// addendum to see all examples!

declare let s: string;
declare function f<T extends string>(x: T): T;

// Previously: string
// Now       : `hello-${string}`
let x2 = f(`hello ${s}`);

סיכום

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