Τι είναι οι κυριολεκτικοί τύποι προτύπων
Από το Typescript 4.1, μπορείτε να βελτιώσετε σημαντικά τις πληκτρολογήσεις για τις συμβολοσειρές σας. Για να ανακεφαλαιώσετε γρήγορα, στο Typescript μπορείτε να ορίσετε τους λεγόμενους «Literal Types». Αντί να ορίζετε απλώς μια μεταβλητή ως συμβολοσειρά, μπορείτε να περιορίσετε τον τύπο σε ένα συγκεκριμένο σύνολο συμβολοσειρών που επιτρέπονται.
// 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, αυτή η ιδέα αναπτύχθηκε περαιτέρω. Λαμβάνοντας το "Template Literal Strings" από το Javascript ως έμπνευση, μπορείτε να εφαρμόσετε την ίδια σύνταξη για τους κυριολεκτικούς τύπους σας στο Typescript. Η κύρια διαφορά είναι ότι με το "Template Literal Types", κερδίζετε πολύ μεγαλύτερη ευελιξία, καθώς ο ίδιος ο τύπος μπορεί να πάρει παραμέτρους για αυτό το σχήμα - η ιδέα είναι παρόμοια με τα γενικά, αλλά ελαφρώς διαφορετική στο ότι απαιτεί συγκεκριμένες τιμές.
// 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 μια ευχαρίστηση.
