Κατακτώντας τους Mapped Types και Conditional Types της TypeScript

Η TypeScript, ένα υπερσύνολο της JavaScript, προσφέρει ισχυρά χαρακτηριστικά για τη δημιουργία στιβαρών και συντηρήσιμων εφαρμογών. Μεταξύ αυτών των χαρακτηριστικών, οι Mapped Types και οι Conditional Types ξεχωρίζουν ως απαραίτητα εργαλεία για προηγμένους χειρισμούς τύπων. Αυτός ο οδηγός παρέχει μια αναλυτική επισκόπηση αυτών των εννοιών, εξερευνώντας τη σύνταξή τους, τις πρακτικές εφαρμογές και τις προηγμένες περιπτώσεις χρήσης. Είτε είστε έμπειρος προγραμματιστής TypeScript είτε μόλις ξεκινάτε το ταξίδι σας, αυτό το άρθρο θα σας εφοδιάσει με τη γνώση για να αξιοποιήσετε αποτελεσματικά αυτά τα χαρακτηριστικά.

Τι είναι οι Mapped Types;

Οι Mapped Types σας επιτρέπουν να δημιουργείτε νέους τύπους μετασχηματίζοντας υπάρχοντες. Επαναλαμβάνονται πάνω στις ιδιότητες ενός υπάρχοντος τύπου και εφαρμόζουν έναν μετασχηματισμό σε κάθε ιδιότητα. Αυτό είναι ιδιαίτερα χρήσιμο για τη δημιουργία παραλλαγών υπαρχόντων τύπων, όπως το να γίνουν όλες οι ιδιότητες προαιρετικές ή μόνο για ανάγνωση (read-only).

Βασική Σύνταξη

Η σύνταξη για έναν Mapped Type είναι η εξής:

type NewType<T> = {
  [K in keyof T]: Transformation;
};

• T: Ο τύπος εισόδου πάνω στον οποίο θέλετε να κάνετε την αντιστοίχιση.
• K in keyof T: Επαναλαμβάνεται πάνω σε κάθε κλειδί του τύπου εισόδου T. Το keyof T δημιουργεί μια ένωση (union) όλων των ονομάτων ιδιοτήτων του T, και το K αντιπροσωπεύει κάθε μεμονωμένο κλειδί κατά τη διάρκεια της επανάληψης.
• Transformation: Ο μετασχηματισμός που θέλετε να εφαρμόσετε σε κάθε ιδιότητα. Αυτό θα μπορούσε να είναι η προσθήκη ενός τροποποιητή (όπως readonly ή ?), η αλλαγή του τύπου, ή κάτι άλλο εντελώς.

Πρακτικά Παραδείγματα

Μετατροπή Ιδιοτήτων σε Read-Only

Ας υποθέσουμε ότι έχετε ένα interface που αναπαριστά ένα προφίλ χρήστη:

interface UserProfile {
  name: string;
  age: number;
  email: string;
}

Μπορείτε να δημιουργήσετε έναν νέο τύπο όπου όλες οι ιδιότητες είναι μόνο για ανάγνωση (read-only):

type ReadOnlyUserProfile = {
  readonly [K in keyof UserProfile]: UserProfile[K];
};

Τώρα, το ReadOnlyUserProfile θα έχει τις ίδιες ιδιότητες με το UserProfile, αλλά όλες θα είναι μόνο για ανάγνωση.

Μετατροπή Ιδιοτήτων σε Προαιρετικές

Παρομοίως, μπορείτε να κάνετε όλες τις ιδιότητες προαιρετικές:

type OptionalUserProfile = {
  [K in keyof UserProfile]?: UserProfile[K];
};

Το OptionalUserProfile θα έχει όλες τις ιδιότητες του UserProfile, αλλά κάθε ιδιότητα θα είναι προαιρετική.

Τροποποίηση Τύπων Ιδιοτήτων

Μπορείτε επίσης να τροποποιήσετε τον τύπο κάθε ιδιότητας. Για παράδειγμα, μπορείτε να μετατρέψετε όλες τις ιδιότητες σε strings:

type StringifiedUserProfile = {
  [K in keyof UserProfile]: string;
};

Σε αυτή την περίπτωση, όλες οι ιδιότητες στο StringifiedUserProfile θα είναι τύπου string.

Τι είναι οι Conditional Types;

Οι Conditional Types σας επιτρέπουν να ορίζετε τύπους που εξαρτώνται από μια συνθήκη. Παρέχουν έναν τρόπο για να εκφράσετε σχέσεις τύπων με βάση το αν ένας τύπος ικανοποιεί έναν συγκεκριμένο περιορισμό. Αυτό είναι παρόμοιο με έναν τριαδικό τελεστή (ternary operator) στη JavaScript, αλλά για τύπους.

Βασική Σύνταξη

Η σύνταξη για έναν Conditional Type είναι η εξής:

T extends U ? X : Y

• T: Ο τύπος που ελέγχεται.
• U: Ο τύπος τον οποίο επεκτείνει το T (η συνθήκη).
• X: Ο τύπος που θα επιστραφεί αν το T επεκτείνει το U (η συνθήκη είναι αληθής).
• Y: Ο τύπος που θα επιστραφεί αν το T δεν επεκτείνει το U (η συνθήκη είναι ψευδής).

Πρακτικά Παραδείγματα

Προσδιορισμός αν ένας Τύπος είναι String

Ας δημιουργήσουμε έναν τύπο που επιστρέφει string αν ο τύπος εισόδου είναι string, και number διαφορετικά:

type StringOrNumber<T> = T extends string ? string : number;

type Result1 = StringOrNumber<string>;  // string
type Result2 = StringOrNumber<number>;  // number
type Result3 = StringOrNumber<boolean>; // number

Εξαγωγή Τύπου από μια Ένωση (Union)

Μπορείτε να χρησιμοποιήσετε conditional types για να εξάγετε έναν συγκεκριμένο τύπο από έναν τύπο ένωσης. Για παράδειγμα, για να εξάγετε τύπους που δεν είναι nullable:

type NonNullable<T> = T extends null | undefined ? never : T;

type Result4 = NonNullable<string | null | undefined>; // string

Εδώ, αν το T είναι null ή undefined, ο τύπος γίνεται never, ο οποίος στη συνέχεια φιλτράρεται από την απλοποίηση των τύπων ένωσης της TypeScript.

Συμπερασμός Τύπων (Inferring Types)

Οι conditional types μπορούν επίσης να χρησιμοποιηθούν για τον συμπερασμό τύπων χρησιμοποιώντας τη λέξη-κλειδί infer. Αυτό σας επιτρέπει να εξάγετε έναν τύπο από μια πιο σύνθετη δομή τύπων.

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

function myFunction(x: number): string {
  return x.toString();
}

type Result5 = ReturnType<typeof myFunction>; // string

Σε αυτό το παράδειγμα, το ReturnType εξάγει τον τύπο επιστροφής μιας συνάρτησης. Ελέγχει αν το T είναι μια συνάρτηση που δέχεται οποιαδήποτε ορίσματα και επιστρέφει έναν τύπο R. Αν είναι, επιστρέφει το R· διαφορετικά, επιστρέφει any.

Συνδυασμός Mapped Types και Conditional Types

Η πραγματική δύναμη των Mapped Types και των Conditional Types προέρχεται από τον συνδυασμό τους. Αυτό σας επιτρέπει να δημιουργείτε εξαιρετικά ευέλικτους και εκφραστικούς μετασχηματισμούς τύπων.

Παράδειγμα: Deep Readonly

Μια συνηθισμένη περίπτωση χρήσης είναι η δημιουργία ενός τύπου που καθιστά όλες τις ιδιότητες ενός αντικειμένου, συμπεριλαμβανομένων των ένθετων ιδιοτήτων, μόνο για ανάγνωση (read-only). Αυτό μπορεί να επιτευχθεί χρησιμοποιώντας έναν αναδρομικό conditional type.

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
};

interface Company {
  name: string;
  address: {
    street: string;
    city: string;
  };
}

type ReadonlyCompany = DeepReadonly<Company>;

Εδώ, το DeepReadonly εφαρμόζει αναδρομικά τον τροποποιητή readonly σε όλες τις ιδιότητες και τις ένθετες ιδιότητές τους. Εάν μια ιδιότητα είναι αντικείμενο, καλεί αναδρομικά το DeepReadonly σε αυτό το αντικείμενο. Διαφορετικά, απλώς εφαρμόζει τον τροποποιητή readonly στην ιδιότητα.

Παράδειγμα: Φιλτράρισμα Ιδιοτήτων ανά Τύπο

Ας πούμε ότι θέλετε να δημιουργήσετε έναν τύπο που περιλαμβάνει μόνο ιδιότητες ενός συγκεκριμένου τύπου. Μπορείτε να συνδυάσετε Mapped Types και Conditional Types για να το πετύχετε αυτό.

type FilterByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};

interface Person {
  name: string;
  age: number;
  isEmployed: boolean;
}

type StringProperties = FilterByType<Person, string>; // { name: string; }

type NonStringProperties = Omit<Person, keyof StringProperties>;

Σε αυτό το παράδειγμα, το FilterByType επαναλαμβάνεται πάνω στις ιδιότητες του T και ελέγχει αν ο τύπος κάθε ιδιότητας επεκτείνει το U. Αν ναι, περιλαμβάνει την ιδιότητα στον τελικό τύπο· διαφορετικά, την εξαιρεί αντιστοιχίζοντας το κλειδί στο never. Σημειώστε τη χρήση του "as" για την επαναντιστοίχιση των κλειδιών. Στη συνέχεια, χρησιμοποιούμε το `Omit` και το `keyof StringProperties` για να αφαιρέσουμε τις ιδιότητες τύπου string από το αρχικό interface.

Προηγμένες Περιπτώσεις Χρήσης και Πρότυπα

Πέρα από τα βασικά παραδείγματα, οι Mapped Types και οι Conditional Types μπορούν να χρησιμοποιηθούν σε πιο προηγμένα σενάρια για τη δημιουργία εξαιρετικά προσαρμόσιμων και type-safe εφαρμογών.

Επιμεριστικοί Conditional Types (Distributive Conditional Types)

Οι conditional types είναι επιμεριστικοί όταν ο τύπος που ελέγχεται είναι ένας τύπος ένωσης (union type). Αυτό σημαίνει ότι η συνθήκη εφαρμόζεται σε κάθε μέλος της ένωσης ξεχωριστά, και τα αποτελέσματα συνδυάζονται στη συνέχεια σε έναν νέο τύπο ένωσης.

type ToArray<T> = T extends any ? T[] : never;

type Result6 = ToArray<string | number>; // string[] | number[]

Σε αυτό το παράδειγμα, το ToArray εφαρμόζεται σε κάθε μέλος της ένωσης string | number ξεχωριστά, με αποτέλεσμα το string[] | number[]. Αν η συνθήκη δεν ήταν επιμεριστική, το αποτέλεσμα θα ήταν (string | number)[].

Χρήση Βοηθητικών Τύπων (Utility Types)

Η TypeScript παρέχει αρκετούς ενσωματωμένους βοηθητικούς τύπους που αξιοποιούν τους Mapped Types και τους Conditional Types. Αυτοί οι βοηθητικοί τύποι μπορούν να χρησιμοποιηθούν ως δομικά στοιχεία για πιο σύνθετους μετασχηματισμούς τύπων.

• Partial<T>: Κάνει όλες τις ιδιότητες του T προαιρετικές.
• Required<T>: Κάνει όλες τις ιδιότητες του T υποχρεωτικές.
• Readonly<T>: Κάνει όλες τις ιδιότητες του T μόνο για ανάγνωση.
• Pick<T, K>: Επιλέγει ένα σύνολο ιδιοτήτων K από το T.
• Omit<T, K>: Αφαιρεί ένα σύνολο ιδιοτήτων K από το T.
• Record<K, T>: Κατασκευάζει έναν τύπο με ένα σύνολο ιδιοτήτων K τύπου T.
• Exclude<T, U>: Εξαιρεί από το T όλους τους τύπους που είναι αναθέσιμοι στο U.
• Extract<T, U>: Εξάγει από το T όλους τους τύπους που είναι αναθέσιμοι στο U.
• NonNullable<T>: Εξαιρεί τα null και undefined από το T.
• Parameters<T>: Λαμβάνει τις παραμέτρους ενός τύπου συνάρτησης T.
• ReturnType<T>: Λαμβάνει τον τύπο επιστροφής ενός τύπου συνάρτησης T.
• InstanceType<T>: Λαμβάνει τον τύπο στιγμιότυπου ενός τύπου συνάρτησης κατασκευαστή T.

Αυτοί οι βοηθητικοί τύποι είναι ισχυρά εργαλεία που μπορούν να απλοποιήσουν σύνθετους χειρισμούς τύπων. Για παράδειγμα, μπορείτε να συνδυάσετε το Pick και το Partial για να δημιουργήσετε έναν τύπο που καθιστά μόνο ορισμένες ιδιότητες προαιρετικές:

type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
}

type OptionalDescriptionProduct = Optional<Product, "description">;

Σε αυτό το παράδειγμα, το OptionalDescriptionProduct έχει όλες τις ιδιότητες του Product, αλλά η ιδιότητα description είναι προαιρετική.

Χρήση Template Literal Types

Οι Template Literal Types σας επιτρέπουν να δημιουργείτε τύπους βασισμένους σε string literals. Μπορούν να χρησιμοποιηθούν σε συνδυασμό με Mapped Types και Conditional Types για τη δημιουργία δυναμικών και εκφραστικών μετασχηματισμών τύπων. Για παράδειγμα, μπορείτε να δημιουργήσετε έναν τύπο που προσθέτει ένα πρόθεμα σε όλα τα ονόματα ιδιοτήτων με ένα συγκεκριμένο string:

type Prefix<T, P extends string> = {
  [K in keyof T as `${P}${string & K}`]: T[K];
};

interface Settings {
  apiUrl: string;
  timeout: number;
}

type PrefixedSettings = Prefix<Settings, "data_">;

Σε αυτό το παράδειγμα, το PrefixedSettings θα έχει τις ιδιότητες data_apiUrl και data_timeout.

Βέλτιστες Πρακτικές και Σκέψεις

• Κρατήστε το Απλό: Ενώ οι Mapped Types και οι Conditional Types είναι ισχυροί, μπορούν επίσης να κάνουν τον κώδικά σας πιο πολύπλοκο. Προσπαθήστε να διατηρείτε τους μετασχηματισμούς τύπων σας όσο το δυνατόν πιο απλούς.
• Χρησιμοποιήστε Utility Types: Αξιοποιήστε τους ενσωματωμένους βοηθητικούς τύπους της TypeScript όποτε είναι δυνατόν. Είναι καλά δοκιμασμένοι και μπορούν να απλοποιήσουν τον κώδικά σας.
• Τεκμηριώστε τους Τύπους σας: Τεκμηριώστε με σαφήνεια τους μετασχηματισμούς τύπων σας, ειδικά αν είναι πολύπλοκοι. Αυτό θα βοηθήσει άλλους προγραμματιστές να κατανοήσουν τον κώδικά σας.
• Δοκιμάστε τους Τύπους σας: Χρησιμοποιήστε τον έλεγχο τύπων της TypeScript για να διασφαλίσετε ότι οι μετασχηματισμοί τύπων σας λειτουργούν όπως αναμένεται. Μπορείτε να γράψετε unit tests για να επαληθεύσετε τη συμπεριφορά των τύπων σας.
• Λάβετε υπόψη την Απόδοση: Οι σύνθετοι μετασχηματισμοί τύπων μπορούν να επηρεάσουν την απόδοση του μεταγλωττιστή της TypeScript. Να είστε προσεκτικοί με την πολυπλοκότητα των τύπων σας και να αποφεύγετε περιττούς υπολογισμούς.

Συμπέρασμα

Οι Mapped Types και οι Conditional Types είναι ισχυρά χαρακτηριστικά της TypeScript που σας επιτρέπουν να δημιουργείτε εξαιρετικά ευέλικτους και εκφραστικούς μετασχηματισμούς τύπων. Κατακτώντας αυτές τις έννοιες, μπορείτε να βελτιώσετε την ασφάλεια τύπων, τη συντηρησιμότητα και τη συνολική ποιότητα των εφαρμογών σας σε TypeScript. Από απλούς μετασχηματισμούς όπως η μετατροπή ιδιοτήτων σε προαιρετικές ή μόνο για ανάγνωση, έως σύνθετους αναδρομικούς μετασχηματισμούς και λογική συνθηκών, αυτά τα χαρακτηριστικά παρέχουν τα εργαλεία που χρειάζεστε για να δημιουργήσετε στιβαρές και επεκτάσιμες εφαρμογές. Συνεχίστε να εξερευνάτε και να πειραματίζεστε με αυτά τα χαρακτηριστικά για να ξεκλειδώσετε το πλήρες δυναμικό τους και να γίνετε ένας πιο ικανός προγραμματιστής TypeScript.

Καθώς συνεχίζετε το ταξίδι σας με την TypeScript, θυμηθείτε να αξιοποιείτε τον πλούτο των διαθέσιμων πόρων, συμπεριλαμβανομένης της επίσημης τεκμηρίωσης της TypeScript, των online κοινοτήτων και των έργων ανοιχτού κώδικα. Αγκαλιάστε τη δύναμη των Mapped Types και των Conditional Types, και θα είστε καλά εξοπλισμένοι για να αντιμετωπίσετε ακόμη και τα πιο δύσκολα προβλήματα που σχετίζονται με τύπους.