טיפוסים מילוליים והצהרות

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

טיפוסים מילוליים

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

type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;

light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLight

הצהרות סוג (as)

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

const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;

הקביעה אומרת למהדר: "תאמין לי, אני יודע שהאלמנט הזה הוא HTMLCanvasElement". הוא אינו מבצע בדיקות או השלכות בזמן ריצה; זה רק עוזר לבודק הסוג.

קביעות קונסטרוקציות (as const)

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

const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-only

סוגי תבניות מילוליות

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

type Size = 'small' | 'large';
type Color = 'red' | 'blue';

// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;

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

TypeScript מספק סוגי עזר מיוחדים כדי לתפעל תווים ב-Template Literal Types:

• Capitalize<StringType>: שימוש באות רישיות באות הראשונה של המחרוזת.
• Uncapitalize<StringType>: מבטל את האות הראשונה של המחרוזת.
• Uppercase<StringType>: ממיר את המחרוזת כולה לאותיות רישיות.
• Lowercase<StringType>: ממיר את המחרוזת כולה לאותיות קטנות.

type ActionType = 'click' | 'hover';

// Generates: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;

נסה זאת בעצמך

תרגיל 1: כיוון איחוד מילולי

תרגיל 2: טענה על JSON.parse

תרגיל 3: תבנית מילולית לאירועים

תרגיל 4: תבנית מילולית עם אותיות רישיות