Τι είναι το TypeScript Interface vs Type;

Το TypeScript υποστηρίζει προσαρμοσμένους τύπους, οι οποίοι μπορούν να οριστούν χρησιμοποιώντας είτε ' διεπαφή ' ή ' τύπος '. Μια διεπαφή μπορεί να υλοποιηθεί από μια κλάση ή ένα αντικείμενο, ενώ ένα ψευδώνυμο τύπου μπορεί να χρησιμοποιηθεί μόνο για τη δημιουργία ενός νέου ονόματος για έναν υπάρχοντα τύπο ή για τον ορισμό μιας ένωσης τύπων. Αν και οι τύποι και οι διεπαφές είναι συχνά εναλλάξιμα, υπάρχουν ορισμένες διαφορές στη λειτουργικότητα και τη σύνταξή τους που τα καθιστούν πιο κατάλληλα για συγκεκριμένα σενάρια.

Αυτό το ιστολόγιο θα περιγράφει τη διεπαφή και τον τύπο TypeScript και τη διαφορά τους.

Τι είναι το TypeScript Interface vs Type;

' Διεπαφή ' και ' τύπος ' χρησιμοποιούνται για τον καθορισμό προσαρμοσμένων τύπων στο TypeScript. Υπάρχουν όμως κάποιες διακρίσεις στη λειτουργικότητα και τη σύνταξή τους. Η κύρια διαφορά μεταξύ μιας διεπαφής και ενός τύπου είναι ότι μια διεπαφή ορίζει έναν νέο τύπο, ενώ ένα ψευδώνυμο τύπου όχι.

Μια διεπαφή μπορεί να υλοποιηθεί από μια κλάση ή ένα αντικείμενο, ενώ οι τύποι μπορούν να ορίσουν πιο σύνθετους τύπους χρησιμοποιώντας χαρακτηριστικά όπως ενώσεις και διασταυρώσεις. Γενικά, οι διεπαφές χρησιμοποιούνται πιο συχνά για τον καθορισμό σχημάτων αντικειμένων και API, ενώ οι τύποι χρησιμοποιούνται πιο συχνά για τον ορισμό πολύπλοκων τύπων δεδομένων και τύπων βοηθητικών προγραμμάτων. Ας τα κατανοήσουμε και τα δύο ξεχωριστά.

Τι είναι η διεπαφή TypeScript;

Μια διεπαφή TypeScript είναι μια τεχνική για τον καθορισμό του σχήματος ενός αντικειμένου TypeScript. Δημιουργείται χρησιμοποιώντας τη λέξη-κλειδί ' διεπαφή ” και καθορίζει ένα σύνολο χαρακτηριστικών και μεθόδων που απαιτεί ένα αντικείμενο για να ταξινομηθεί ως αυτού του τύπου. Είναι ισοδύναμο με μια κλάση στον αντικειμενοστραφή προγραμματισμό. Ωστόσο, δεν ορίζει καμία υλοποίηση. Οι διεπαφές χρησιμοποιούνται κυρίως για τον έλεγχο τύπου και τη διασφάλιση ότι ένα αντικείμενο συμμορφώνεται με μια συγκεκριμένη δομή.

Πριν συνεχίσετε, έχετε υπόψη σας ότι για να εκτελέσετε ένα αρχείο TypeScript, πρέπει να μεταφερθεί σε ένα αρχείο JavaScript και στη συνέχεια να εκτελέσετε τον κώδικα JavaScript στο τερματικό χρησιμοποιώντας τις δεδομένες εντολές:

tsc όνομα αρχείου.ts
όνομα αρχείου κόμβου.js

Παράδειγμα

Δημιουργήστε μια διεπαφή με το όνομα 'Χρήστης' που ορίζει τρία χαρακτηριστικά και μια μέθοδο ' Πάρτε πληροφορίες() ”:

διεπαφή χρήστη {
Όνομα: συμβολοσειρά;
επώνυμο: συμβολοσειρά;
ηλικία: αριθμός;
Πάρτε πληροφορίες ( ) : κενό;
}

Δημιουργήστε μια τάξη ' Μαθητης σχολειου ' που κληρονομείται με μια διεπαφή. Η κλάση ορίζει τα χαρακτηριστικά της, έναν κατασκευαστή που θα εκχωρήσει τις τιμές στα χαρακτηριστικά και μια μέθοδο 'getInfo()' που θα εμφανίζει τις τιμές που σχετίζονται με τα χαρακτηριστικά:

τάξη Μαθητής υλοποιεί Χρήστης {
Όνομα: συμβολοσειρά;
επώνυμο: συμβολοσειρά;
ηλικία: αριθμός;

κατασκευαστής ( Όνομα: συμβολοσειρά, Επώνυμο: συμβολοσειρά, ηλικία: αριθμός ) {
this.firstName = firstName;
this.lastName = επώνυμο;
this.age = ηλικία;
}
Πάρτε πληροφορίες ( ) : κενό {
console.log ( 'Πληροφορίες Φοιτητών:' )
console.log ( '- Ονομα: ' + this.firstName + '' + this.lastName ) ;
console.log ( '- Ηλικία:' + αυτή.ηλικία ) ;
}
}

Δημιουργήστε ένα αντικείμενο ' Μαθητης σχολειου 'με όνομα' std 'του ' Χρήστης πληκτρολογήστε καλώντας τον κατασκευαστή με τη λέξη-κλειδί «νέα» και, στη συνέχεια, καλέστε τη μέθοδο getInfo() για να εκτυπώσετε τα δεδομένα στην κονσόλα:

const std: Χρήστης = νέος μαθητής ( 'Νυχτερίδα' , 'Στέφανος' , 17 ) ;
std.getInfo ( ) ;

Παραγωγή

Τι είναι ένας Τύπος TypeScript;

Οι τύποι TypeScript χρησιμοποιούνται κυρίως για τη δημιουργία ψευδωνύμων για υπάρχοντες τύπους καθώς και για τη δημιουργία πιο περίπλοκων τύπων. Αντιπροσωπεύει ένα συγκεκριμένο σχήμα ή δομή δεδομένων. Μπορεί να οριστεί/δηλωθεί με το « τύπος » λέξη-κλειδί. Οι τύποι του TypeScript μπορούν να χρησιμοποιηθούν για να γίνει ο κώδικας πιο κατανοητός και να μειωθεί η επανάληψη/διπλασιασμός.

Παράδειγμα

Πρώτα, ορίστε έναν τύπο ' Χρήστης ' χρησιμοποιώντας την ' τύπος ' λέξη-κλειδί που καθορίζεται με πέντε ιδιότητες η μία από αυτές είναι ένα προαιρετικό χαρακτηριστικό που είναι ' τηλέφωνο ”:

τύπος Χρήστης = {
Όνομα: συμβολοσειρά;
επώνυμο: συμβολοσειρά;
ηλικία: αριθμός;
email: string;
τηλέφωνο;: συμβολοσειρά;
} ;

Ορίστε μια συνάρτηση με το όνομα ' getFullName ', το οποίο παίρνει μια παράμετρο τύπου ' Χρήστης ' και εκτυπώνει τα δεδομένα που αποτελούνται από τις πληροφορίες του ατόμου, συμπεριλαμβανομένων των ' όνομα », « ηλικία », « ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ ' και ' τηλεφωνικό νούμερο ”:

λειτουργία Πάρτε πληροφορίες ( πρόσωπο: Χρήστης ) : κενό {
console.log ( 'Πληροφορίες χρήστη:' )
console.log ( '- Ονομα: ' + person.firstName + '' + person.lastname ) ;
console.log ( '- Ηλικία:' + άτομο.ηλικία ) ;
console.log ( '- ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: ' + πρόσωπο.email ) ;
console.log ( '-Τηλέφωνο #:' + άτομο.τηλέφωνο ) ;
}

Τώρα, δημιουργήστε ένα αντικείμενο ' πρόσωπο 'τύπου' Χρήστης ” με ζεύγη κλειδιών-τιμών:

const πρόσωπο: Χρήστης = {
όνομα: 'Μίλι' ,
επίθετο: 'Μιχάλης' ,
ηλικία: 28 ,
ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: 'mili124@yahoo.com' ,
τηλέφωνο: '086-34581734'
} ;

Τέλος, εκτυπώστε τις πληροφορίες χρήστη καλώντας τη συνάρτηση getInfo():

console.log ( Πάρτε πληροφορίες ( πρόσωπο ) ) ;

Παραγωγή

Αυτό αφορούσε τη διεπαφή και τον τύπο TypeScript.

συμπέρασμα

Στο TypeScript, ' διεπαφή ' και ' τύπος ' χρησιμοποιούνται για τον καθορισμό προσαρμοσμένων τύπων. Μια διεπαφή μπορεί να υλοποιηθεί από μια κλάση ή ένα αντικείμενο, ενώ οι τύποι μπορούν να ορίσουν πιο σύνθετους τύπους χρησιμοποιώντας χαρακτηριστικά όπως ενώσεις και διασταυρώσεις. Αυτά είναι τα ισχυρά χαρακτηριστικά που μπορούν να βοηθήσουν στη σύνταξη πιο οργανωμένου και επεκτάσιμου κώδικα. Αυτό το ιστολόγιο περιέγραψε τη διεπαφή και τον τύπο TypeScript και τη διαφορά τους.

Τι είναι το TypeScript Interface vs Type;