Τι είναι τα template literal types;

Question

Accepted Answer

**Τα template literal types** σας επιτρέπουν να δημιουργήσετε νέους string literal types με παρεμβολή άλλων τύπων σε ένα template — χειρισμό συμβολοσειρών στο επίπεδο *τύπου*. ```ts type Greeting = `Hello, ${string}`; const a: Greeting = "Hello, world"; // ✅ const b: Greeting = "Hi there"; // ❌ doesn't match the pattern ``` ## Συνδυασμός με unions — κατανέμονται ```ts type Color = "red" | "blue"; type Shade = "light" | "dark"; type Variant = `${Shade}-${Color}`; // "light-red" | "light-blue" | "dark-red" | "dark-blue" — all combinations ``` Ο μεταγλωττιστής επεκτείνει κάθε συνδυασμό των unions — χρήσιμο για αυτόματη δημιουργία έγκυρων string keys (κλάσεις CSS, ονόματα συμβάντων, μοτίβα δρομολογίων). ## Ένα πραγματικό μοτίβο: ονόματα συμβάντων με τύπο ```ts type Entity = "user" | "post"; type Event = `${Entity}:${"created" | "deleted"}`; // "user:created" | "user:deleted" | "post:created" | "post:deleted" function on(event: Event, cb: () => void) {} on("user:created", () => {}); // ✅ on("user:updated", () => {}); // ❌ not a valid event ``` ## Με remapping κλειδιών και εγγενείς βοηθούς ```ts type Getters = { [K in keyof T & string as `get${Capitalize}`]: () => T[K]; }; // { name: string } → { getName: () => string } ``` Τα `Uppercase`, `Lowercase`, `Capitalize`, `Uncapitalize` είναι ενσωματωμένοι εγγενείς βοηθοί. ## Γιατί είναι σημαντικό Τα template literal types κάνουν τα string-based API ασφαλή ως προς τον τύπο: παράμετροι δρομολογίου, συστήματα συμβάντων, CSS-in-JS, ονόματα στηλών ORM. Αντί να δέχεστε οποιοδήποτε `string`, μπορείτε να περιορίσετε σε ένα ακριβές, δημιουργημένο σύνολο έγκυρων συμβολοσειρών — σύλληψη τυπογραφικών σφαλμάτων κατά το χρόνο μεταγλώττισης σε μέρη που ήταν παλαιότερα stringly-typed.