Τα βασικά: Συμβολοσειρές προτύπων
Πριν μιλήσω για συμβολοσειρές προτύπων με ετικέτες, που ονομάζονται επίσης γραμματοσειρές προτύπων, θέλω απλώς να δώσω μια γρήγορη εισαγωγή στις συμβολοσειρές προτύπων γενικά. Μη διστάσετε να προχωρήσετε στο επόμενο κεφάλαιο εάν γνωρίζετε ήδη τι αφορά αυτό.
Οι συμβολοσειρές προτύπων είναι ένας ειδικός τύπος συμβόλων συμβολοσειρών που μπορούν να περιέχουν εκφράσεις Javascript καθώς και σε πολλές γραμμές. Χρησιμοποιούν τους χαρακτήρες backtick αντί για διπλά εισαγωγικά, όπως συμβαίνει με τις κοινές χορδές.
Όσον αφορά την έκταση των χαρακτήρων σε πολλές γραμμές, μια κοινή συμβολοσειρά πρέπει να περιέχει μια ανάστροφη κάθετο σε συνδυασμό με τον χαρακτήρα "n" για τη δημιουργία μιας νέας γραμμής. Με τις συμβολοσειρές προτύπων, μπορείτε απλά να δημιουργήσετε μια νέα γραμμή "inline", για να το πούμε.
// A common string as reference.
const string = "I'm just a string";
// A template string. For Typescript,
// this value is a plain 'string'-type.
const templateString = `I'm just a string as well`;
Η διαθεσιμότητα εκφράσεων μέσα σε μια συμβολοσειρά μπορεί επίσης να εξηγηθεί γρήγορα. Αντί να επιτρέπουν απλά σύμβολα συμβολοσειρών, οι συμβολοσειρές προτύπων δέχονται αυθαίρετες εκφράσεις. Το παρακάτω παράδειγμα δείχνει τι εννοώ με αυτό.
function greet(name: string) {
// Here you see an expression
// *embedded* inside a string.
return `Hello, ${name}!`;
}
// "Hello, Tom!"
const greeting = greet("Tom");
// One more example, using
// Typescript's 'rest'-operator
// which allowes any number of values
// and provides them as an array,
// in our case of type 'string'.
function greetAll(...names: string[]) {
return `Hi everybody: ${names.join(", ")}!`;
}
// "Hi everybody: Tom, Luke!"
const greetingForAll = greetAll("Tom", "Luke");
Συμβολοσειρές προτύπων με ετικέτα
Αυτό το σύνολο χαρακτηριστικών και μόνο θα ήταν ήδη ωραίο, αλλά οι συμβολοσειρές προτύπων μπορούν επίσης να χρησιμοποιηθούν ως συναρτήσεις. Βάζετε απλώς μια λέξη-κλειδί μπροστά από τη συμβολοσειρά προτύπου για να την "επισημάνετε", εξ ου και το όνομα "ετικέτες συμβολοσειρών προτύπου" Ώρα για το επόμενο παράδειγμα.
// All previous examples used 'untagged'
// string literals, which means they're
// practially just a string.
//
// But let's see how we can convert them
// to an acutal function:
function merge(template: TemplateStringsArray, ...params: string[]){
// This needs some explanation:
//
// 'template', our first param, contains
// all strings *inbetween the paramters*,
// you'll see in a minute what I mean by that.
//
// 'params' then is an array of strings
// that were provided as paramteres to the
// template string.
// Let's ignore the result for now.
return "";
}
const what = "test";
// Here's the tagged template string in action.
// The tag is the function name, and like a
// function the tagged template string can be called.
//
// Let's destruct how this will look like
// in the function defined above.
//
// 'template' = ["Just a", ""];
// 'params' = ["test"]
const result = merge`Just a ${what}`;
// As you can see, the function splits the string
// into the string-only parts and the expressions.
Όπως μπορείτε να δείτε, η σύνταξη φαίνεται αρκετά ενδιαφέρουσα και ίσως ακόμη και λίγο ξένη κατά την πρώτη συνεργασία με αυτήν. Πιθανότατα δεν υπάρχουν πολλές περιπτώσεις χρήσης που θα απαιτούσαν την εφαρμογή συμβολοσειρών προτύπων με ετικέτα, αλλά παρ 'όλα αυτά μπορούμε να παίξουμε με αυτό. Στο ακόλουθο και τελευταίο παράδειγμα, έχω συγκεντρώσει μερικές μελέτες περιπτώσεων. Όπως θα δείτε, οι συμβολοσειρές προτύπων με ετικέτα μπορούν φυσικά να χρησιμοποιηθούν με γενικά και να ανοίξουν μερικές ενδιαφέρουσες επιλογές για την εφαρμογή συγκεκριμένων απαιτήσεων.
//
// Generic
//
// Tagged template literals can be generic, too.
function generic<T>(template: TemplateStringsArray, ...params: T[]){
return template.join(",") + params.join(",")
}
// "A value: ,test"
console.log(generic<string>`A value: ${"test"}`);
//
// Generic (with super powers)
//
// You can specify each type and
// also limit the number of params!
function coalesce<A, B, C>(template: TemplateStringsArray, ...params: [A, B, C]){
return template.join(",") + params.join(",")
}
// ", - , - ,value,0,true"
const res = coalesce<string, number, boolean>`${"value"} - ${0} - ${true}`;
//
// Different return type
//
// Also, tagged literal types don't
// only have to return strings.
const preview = (template: TemplateStringsArray, ...params: number[])
=> (template2: TemplateStringsArray, ...params2: string[])
=> {
return "what?";
}
// Note the two pairs of backticks
// after each other, we're just calling
// the returned tagged template string
// form our first one!
console.log(preview`${0}``${"a"}`);
Ελπίζω να απολαύσατε αυτό το μάλλον γρήγορο ταξίδι σε ένα από τα χαρακτηριστικά του Javascript καθώς και του Typescript. Οι συμβολοσειρές προτύπων είναι πιθανότατα ένα συνηθισμένο πράγμα στη βάση κώδικα σας, οι συμβολοσειρές προτύπων με ετικέτες πιθανώς όχι, επομένως είναι ενδιαφέρον να μάθετε περισσότερα σχετικά με αυτές τις εξειδικευμένες δυνατότητες.
