Εκμάθηση TypeScript: Μάθετε για τις βασικές αρχές του TypeScript



Το TypeScript είναι ένα έντονα τυποποιημένο υπερσύνολο JavaScript. Σε αυτό το σεμινάριο TypeScript, θα φτάσουμε στο βάθος και θα κατανοήσουμε τα βασικά.

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

Εισαγωγή στο TypeScript

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





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

Σύνταξη:



var message: string = 'Καλώς ήλθατε στο Edureka!' console.log (μήνυμα)

Κατά την κατάρτιση, δημιουργεί τον ακόλουθο κώδικα JavaScript:

// Δημιουργήθηκε από τη γραμματοσειρά 1.8.10 var message = 'Καλώς ήλθατε στο Edureka!' console.log (μήνυμα)

Χαρακτηριστικά του TypeScript

χαρακτηριστικά - φροντιστήριο γραφής - edureka

  • Διαγώνια πλατφόρμα: Ο μεταγλωττιστής TypeScript μπορεί να εγκατασταθεί σε οποιοδήποτε λειτουργικό σύστημα όπως Windows, MacOS και Linux.



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

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

  • Προαιρετική στατική πληκτρολόγηση : Το TypeScript επιτρέπει επίσης προαιρετική στατική πληκτρολόγηση σε περίπτωση που χρησιμοποιείτε τη δυναμική πληκτρολόγηση του JavaScript.

  • Χειρισμός DOM : Μπορείτε να χρησιμοποιήσετε το TypeScript για χειρισμό του DOM για προσθήκη ή αφαίρεση στοιχείων.

  • Χαρακτηριστικά ES 6 : Το TypeScript περιλαμβάνει τις περισσότερες δυνατότητες του προγραμματισμένου ECMAScript 2015 (ES 6, 7) όπως κλάση, διεπαφή, λειτουργίες βέλους κ.λπ.

Πλεονεκτήματα της χρήσης TypeScript

  • Το TypeScript είναι γρήγορο, απλό, εύκολο στη μάθηση και εκτελείται σε οποιοδήποτε πρόγραμμα περιήγησης ή μηχανή JavaScript.

  • είναι παρόμοιος προς το JavaScript και χρησιμοποιεί την ίδια σύνταξη και σημασιολογία.

  • Αυτό βοηθά τους προγραμματιστές backend να γράφουν front-end κώδικα πιο γρήγορα .

  • Κωδικός TypeScript μπορεί να κληθεί από ένα υπάρχων κώδικας JavaScript . Επίσης, λειτουργεί με υπάρχοντα πλαίσια JavaScript και βιβλιοθήκες χωρίς προβλήματα.

  • Το αρχείο Definition, με επέκταση .d.ts, παρέχει υποστήριξη για υπάρχουσες βιβλιοθήκες JavaScript όπως Jquery, D3.js , κ.λπ. Έτσι, ο κώδικας TypeScript μπορεί να προσθέσει Βιβλιοθήκες JavaScript χρησιμοποιώντας ορισμούς τύπων για να επωφεληθούν από τα πλεονεκτήματα του ελέγχου τύπου, της αυτόματης συμπλήρωσης κώδικα και της τεκμηρίωσης σε υπάρχουσες βιβλιοθήκες JavaScript με δυναμική πληκτρολόγηση.

  • Περιλαμβάνει χαρακτηριστικά από ES6 και ES7 που μπορούν να εκτελεστούν σε μηχανές JavaScript επιπέδου ES5 όπως Node.js .

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

Τύποι Σενάριο

Το σύστημα τύπου αντιπροσωπεύει τους διαφορετικούς τύπους τιμών που υποστηρίζονται από τη γλώσσα. Ελέγχει το εγκυρότητα των παρεχόμενων αξίες προτού αποθηκευτούν ή χειριστούν από το πρόγραμμα.

Μπορεί να ταξινομηθεί σε δύο τύπους όπως:

  • Ενσωματωμένο : Αυτό περιλαμβάνει τον αριθμό, τη συμβολοσειρά, το δυαδικό, το κενό, το μηδενικό και το απροσδιόριστο.
  • Ορισμένο από τον χρήστη : Περιλαμβάνει απαριθμήσεις (αθροίσματα), τάξεις, διεπαφές, πίνακες και πλειάδα.

Τώρα ας προχωρήσουμε με αυτόν τον οδηγό TypeScript και να κατανοήσουμε περισσότερα σχετικά με τις μεταβλητές.

Εκμάθηση TypeScript: Μεταβλητές

Μια μεταβλητή είναι ένα ονομασμένο διάστημα στη μνήμη που χρησιμοποιείται για την αποθήκευση τιμών.

Η σύνταξη τύπου για τη δήλωση μιας μεταβλητής στο TypeScript περιλαμβάνει μια άνω και κάτω τελεία (:) μετά το όνομα της μεταβλητής, ακολουθούμενη από τον τύπο της. Παρόμοια με το JavaScript, χρησιμοποιούμε το λέξη-κλειδί var να δηλώσει μια μεταβλητή.

Υπάρχουν τέσσερις επιλογές όταν δηλώνουμε μια μεταβλητή:

var [αναγνωριστικό]: [type-annotation] = τιμή
var [αναγνωριστικό]: [τύπος-σχολιασμός]
var [αναγνωριστικό] = τιμή
var [ταυτοποίηση]

Παράδειγμα:

var name: string = 'Daisy' var empid: number = 1001 console.log ('name' + name) console.log ('υπάλληλος id' + empid)

Κατά τη σύνταξη, θα δημιουργήσει τον ακόλουθο κώδικα JavaScript:

// Δημιουργήθηκε από τη γραμματοσειρά 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('id id:' + empid)

Παραγωγή:

Όνομα: Daisy
αναγνωριστικό υπαλλήλου: 1001

Τώρα ας προχωρήσουμε στο επόμενο θέμα του Οδηγού TypeScript.

Χειριστές

Ένας χειριστής χρησιμοποιείται για τον καθορισμό λειτουργιών που θα εκτελεστούν στα δεδομένα. Τα δεδομένα στα οποία λειτουργούν οι χειριστές ονομάζονται τελεστές. Υπάρχουν διαφορετικοί τύποι χειριστές σε TypeScript όπως:

  • Αριθμητικοί τελεστές
  • Λογικοί τελεστές
  • Σχετικοί χειριστές
  • Τελεστές Bitwise
  • Χειριστές ανάθεσης

Αριθμητικοί χειριστές

Χειριστές Περιγραφή

Προσθήκη (+)

επιστρέφει το άθροισμα των τελεστών

Αφαίρεση (-)

επιστρέφει τη διαφορά των τιμών

Πολλαπλασιασμός (*)

επιστρέφει το προϊόν των τιμών

Τμήμα (/)

εκτελεί λειτουργία διαίρεσης και επιστρέφει το πηλίκο

Συντελεστής (%)

εκτελεί λειτουργία διαίρεσης και επιστρέφει το υπόλοιπο

Αύξηση (++)

Αυξάνει την τιμή της μεταβλητής κατά μία

Μείωση (-)

Μειώνει την τιμή της μεταβλητής κατά μία

Παράδειγμα:

var num1: number = 10 var num2: number = 2 var res: number = 0 res = num1 + num2 console.log ('Sum:' + res) res = num1 - num2 console.log ('Διαφορά:' + res) res = num1 * num2 console.log ('Προϊόν:' + res)

Παραγωγή:

Άθροισμα: 12
Διαφορά: 8
Προϊόν: 20

Λογικοί χειριστές

Χειριστές Περιγραφή

ΚΑΙ (&&)

Επιστρέφει true μόνο εάν όλες οι εκφράσεις που καθορίζονται επιστρέφουν true

Ή (||)

Αυτό επιστρέφει true εάν τουλάχιστον μία από τις καθορισμένες εκφράσεις επιστρέφει true

ΔΕΝ (!)

Επιστρέφει το αντίστροφο του αποτελέσματος της έκφρασης.

Παράδειγμα:

var avg: number = 20 var ποσοστό: number = 90 console.log ('Value of avg:' + avg + ', value of سيڪڙو:' + percent) var res: boolean = ((μέσος όρος> 50) && (ποσοστό> 80 )) console.log ('(μέσος όρος> 50) && (ποσοστό> 80):', res)

Παραγωγή:

Τιμή μέσου όρου: 20, τιμή ποσοστού: 90
(μέσος όρος> 50) && (ποσοστό> 80): false

Σχεσιακοί χειριστές

Χειριστές Περιγραφή

>

Μεγαλύτερος από

<

Λιγότερο από

> =

Μεγαλύτερο ή ίσο με

<=

Λιγότερο από ή ίσο με

==

Ισότητα

! =

Όχι ίσο

Παράδειγμα:

var num1: number = 10 var num2: number = 7 console.log ('Value of num1:' + num1) console.log ('Value of num2:' + num2) var res = num1> num2 console.log ('num1) μεγαλύτερη από num2: '+ res) res = num1

Παραγωγή:

Τιμή num1: 10
Τιμή num2: 7
num1 μεγαλύτερο από num2: true
num1 μικρότερο από num2: false

Τελεστές Bitwise

Χειριστές Περιγραφή

Bitwise ΚΑΙ (&)

εκτελεί μια λειτουργία Boolean AND σε κάθε bit από τα ακέραια ορίσματα.

Bitwise Ή (|)

Εκτελεί μια λειτουργία Boolean OR σε κάθε bit των ακέραιων ορισμάτων του.

Bitwise XOR (^)

Εκτελεί μια Boolean αποκλειστική λειτουργία Ή σε κάθε κομμάτι των ακέραιων ορισμάτων του.

ΔΥΟ ΔΥΟ (~)

Αυτός είναι ένας unary τελεστής και λειτουργεί αναστρέφοντας όλα τα bits στον τελεστή.

Αριστερή στροφή (<<)

Μετακινεί όλα τα bits στον πρώτο τελεστή προς τα αριστερά από τον αριθμό των θέσεων που καθορίζονται στο δεύτερο τελεστή.

Δεξιά μετατόπιση (>>)

Η τιμή του αριστερού τελεστή μετακινείται δεξιά από τον αριθμό των bit που καθορίζονται από το δεξί τελεστή.

Δεξιά μετατόπιση με μηδέν (>>>)

Είναι παρόμοιο με το >> χειριστή, εκτός από το ότι τα bit που μετακινούνται στα αριστερά είναι πάντα μηδέν.

Παράδειγμα:

var a: number = 2 // Παρουσίαση bit 10 var b: number = 3 // Παρουσίαση bit 11 var αποτέλεσμα αποτελέσματος = (a & b) console.log ('(a & b) =>', αποτέλεσμα) αποτέλεσμα = ( a | b) console.log ('(a | b) =>', αποτέλεσμα)

Παραγωγή:

(a & b) => 2
(α | β) => 3

Χειριστές ανάθεσης

Χειριστές Περιγραφή

Απλή εργασία (=)

Εκχωρεί τιμές από τον τελεστή από τη δεξιά πλευρά στον τελεστή από την αριστερή πλευρά

Προσθήκη και ανάθεση (+ =)

Προσθέτει τον δεξιό τελεστή στον αριστερό τελεστή και αποδίδει το αποτέλεσμα στον αριστερό τελεστή.

Αφαίρεση και ανάθεση (- =)

Αφαιρεί τον δεξιό τελεστή από τον αριστερό τελεστή και αποδίδει το αποτέλεσμα στον αριστερό τελεστή.

Πολλαπλασιασμός και εκχώρηση (* =)

Πολλαπλασιάζει τον δεξιό τελεστή με τον αριστερό τελεστή και αποδίδει το αποτέλεσμα στον αριστερό τελεστή.

Διαίρεση και ανάθεση (/ =)

Διαιρεί τον αριστερό τελεστή με το δεξί τελεστή και αποδίδει το αποτέλεσμα στον αριστερό τελεστή.

Παράδειγμα:

var a: number = 12 var b: number = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b κονσόλα .log ('a- = b:' + a)

Παραγωγή:

α = β: 10
a + = b: 20
a - = b: 10

Αυτοί ήταν οι διαφορετικοί χειριστές. Τώρα ας προχωρήσουμε με τον Οδηγό TypeScript και να μάθουμε για βρόχους.

Βρόχοι

Μπορεί να υπάρχουν καταστάσεις όπου ένα μπλοκ κώδικα πρέπει να εκτελεστεί αρκετές φορές. ΕΝΑ βρόχος Η δήλωση μας επιτρέπει να εκτελέσουμε μια δήλωση ή μια ομάδα δηλώσεων πολλές φορές.

Οι βρόχοι TypeScript μπορούν να ταξινομηθούν ως:

Για βρόχο

ο για βρόχο είναι μια εφαρμογή ενός συγκεκριμένου βρόχου.

Σύνταξη:

για (πρώτη έκφραση δεύτερη έκφραση τρίτη έκφραση) {// δηλώσεις που θα εκτελούνται επανειλημμένα}

Εδώ, η πρώτη έκφραση εκτελείται πριν ξεκινήσει ο βρόχος. Η δεύτερη έκφραση είναι η συνθήκη για την εκτέλεση του βρόχου. Και η τρίτη έκφραση εκτελείται μετά την εκτέλεση κάθε μπλοκ κώδικα.

Παράδειγμα:

για (let i = 0 i<2 i++) { console.log ('Execute block statement' + i) }

Παραγωγή:

Εκτελέστε τη δήλωση μπλοκ 0
Εκτελέστε τη δήλωση μπλοκ 1

Ενώ βρόχος

Ο βρόχος while εκτελεί τις οδηγίες κάθε φορά που η καθορισμένη συνθήκη αξιολογείται ως αληθής.

Σύνταξη:

ενώ (έκφραση συνθήκης) {// μπλοκ κώδικα που θα εκτελεστεί}

Παράδειγμα:

let i: number = 1 ενώ (i<3) { console.log( 'Block statement execution no.' + i ) i++ }

Παραγωγή:

Εκτέλεση δήλωσης αποκλεισμού αριθ. 1
Εκτέλεση δήλωσης αποκλεισμού αριθ. 2

Κάντε ... Ενώ βρόχος

Ο βρόχος do & hellip Sementara είναι παρόμοιος με τον βρόχο while, εκτός του ότι δεν αξιολογεί την κατάσταση για πρώτη φορά που εκτελείται ο βρόχος.

Σύνταξη:

{// μπλοκ κώδικα που θα εκτελεστεί} ενώ (έκφραση συνθήκης)

Παράδειγμα:

let i: number = 1 do {console.log ('Block statement statement no.' + i) i ++} ενώ (i<3)

Παραγωγή:

Εκτέλεση δήλωσης αποκλεισμού αριθ. 1
Εκτέλεση δήλωσης αποκλεισμού αριθ. 2

Εκτός από αυτά, υπάρχουν οι δηλώσεις διακοπής και συνέχισης στο TypeScript που χρησιμοποιούνται σε βρόχο.

Δήλωση διακοπής

Η δήλωση διακοπής χρησιμοποιείται για να πάρει τον έλεγχο από μια κατασκευή. Η χρήση της δήλωσης διακοπής σε έναν βρόχο βοηθά το πρόγραμμα να βγει από τον βρόχο.

Παράδειγμα:

var i: αριθμός = 1 ενώ (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop

Παραγωγή:

Το πρώτο πολλαπλάσιο των 5 μεταξύ 1 και 10 είναι: 5

Συνέχεια δήλωσης

Η δήλωση συνέχισης παραλείπει τις επόμενες δηλώσεις στην τρέχουσα επανάληψη και επαναφέρει τον έλεγχο στην αρχή του βρόχου.

Παράδειγμα:

var num: number = 0 var count: number = 0 για (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)

Παραγωγή:

Ο αριθμός των περιττών τιμών μεταξύ 0 και 10 είναι: 5

Αυτοί ήταν οι διαφορετικοί βρόχοι στο TypeScript. Τώρα, ας προχωρήσουμε με τον Οδηγό TypeScript και να κατανοήσουμε τις λειτουργίες.

Λειτουργίες

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

Ονομαζόμενες συναρτήσεις

Μια ονομαστική συνάρτηση χρησιμοποιείται για να δηλώσει και να καλέσει μια συνάρτηση με το δεδομένο της όνομα.

Παράδειγμα:

οθόνη λειτουργίας () {console.log ('TypeScript Function')} οθόνη ()

Παραγωγή:

Λειτουργία TypeScript

Ανώνυμη συνάρτηση

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

Παράδειγμα:

Αφήστε χαιρετισμό = function () {console.log ('TypeScript Function')} χαιρετισμό ()

Παραγωγή:

Λειτουργία TypeScript

Λειτουργία βέλους

Οι συμβολισμοί με τα βέλη λίπους χρησιμοποιούνται για ανώνυμες συναρτήσεις, δηλαδή για εκφράσεις συναρτήσεων. Ονομάζονται επίσης λειτουργίες λάμδα σε άλλες γλώσσες.

Σύνταξη:

(param1, param2, ..., paramN) => έκφραση

Η χρήση του βέλους λίπους (=>) μειώνει την ανάγκη χρήσης της λέξης-κλειδιού «συνάρτηση». Οι παράμετροι περνούν στις γωνιακές αγκύλες και η έκφραση της συνάρτησης περικλείεται εντός των σγουρών αγκυλών {}.

Παράδειγμα:

ας άθροισμα = (x: number, y: number): number => {return x + y} άθροισμα (10, 30) // επιστρέφει 40

Λειτουργία υπερφόρτωση

Το TypeScript παρέχει την έννοια της υπερφόρτωσης λειτουργίας. Έτσι, μπορείτε να έχετε πολλές λειτουργίες με το ίδιο όνομα αλλά διαφορετικούς τύπους παραμέτρων και τύπο επιστροφής.

Παράδειγμα:

function add (a: string, b: string): string function add (a: number, b: number): number return a + b} add ('Hello', 'Edureka') // επιστρέφει 'Hello Edureka' προσθήκη ( 10, 10) // επιστρέφει 20

Στο παραπάνω παράδειγμα, έχουμε την ίδια συνάρτηση προσθήκη () με δύο δηλώσεις συναρτήσεων και μία υλοποίηση συνάρτησης. Η πρώτη υπογραφή έχει δύο παραμέτρους συμβολοσειράς τύπου, ενώ η δεύτερη υπογραφή έχει δύο παραμέτρους του αριθμού τύπου.

Αυτοί είναι οι διαφορετικοί τύποι λειτουργιών. Τώρα, ας προχωρήσουμε με τον Οδηγό TypeScript και να κατανοήσουμε τις συμβολοσειρές στο TypeScript.

Εκπαιδευτικό σενάριο: Χορδές

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

Σύνταξη:

var var_name = νέα συμβολοσειρά (συμβολοσειρά)

Υπάρχουν διαφορετικές ιδιότητες των διαθέσιμων μεθόδων στο αντικείμενο String όπως:

  • Οικοδόμος - Επιστρέφει μια αναφορά στη συνάρτηση String που δημιούργησε το αντικείμενο
  • Μήκος - Επιστρέφει το μήκος της συμβολοσειράς
  • Πρωτότυπο - Αυτή η ιδιότητα σάς επιτρέπει να προσθέσετε ιδιότητες και μεθόδους σε ένα αντικείμενο

Παράδειγμα:

let name = new String ('Welcome to Edureka!') console.log ('Μήνυμα:' + όνομα) console.log ('Μήκος:' + name.length)

Παραγωγή:

Μήνυμα: Καλώς ήλθατε στο Edureka!
Μήκος: 19

Μέθοδοι συμβολοσειράς

Η λίστα μεθόδων στο αντικείμενο συμβολοσειράς περιλαμβάνει:

Μέθοδος Περιγραφή

charAt ()

Επιστρέφει τον χαρακτήρα στο καθορισμένο ευρετήριο

charCodeAt ()

Επιστρέφει έναν αριθμό που δείχνει την τιμή Unicode του χαρακτήρα στο δεδομένο ευρετήριο

συμπυκνωμένος ()

Συνδυάζει το κείμενο δύο χορδών και επιστρέφει μια νέα συμβολοσειρά

ευρετήριοOf ()

Επιστρέφει το ευρετήριο στο αντικείμενο συμβολοσειράς κλήσης της πρώτης εμφάνισης της καθορισμένης τιμής

lastIndexOf ()

Επιστρέφει το ευρετήριο μέσα στο αντικείμενο συμβολοσειράς κλήσης της τελευταίας εμφάνισης της καθορισμένης τιμής

αγώνας()

Χρησιμοποιείται για να ταιριάξει μια κανονική έκφραση με μια συμβολοσειρά

localeCompare ()

Επιστρέφει έναν αριθμό που δείχνει εάν μια συμβολοσειρά αναφοράς έρχεται πριν ή μετά ή είναι ίδια με τη δεδομένη συμβολοσειρά σε σειρά ταξινόμησης

Αναζήτηση()

Αυτό εκτελεί την αναζήτηση αντιστοίχισης μεταξύ μιας κανονικής έκφρασης και μιας καθορισμένης συμβολοσειράς

αντικαθιστώ()

Χρησιμοποιείται για την εύρεση μιας αντιστοίχισης μεταξύ μιας κανονικής έκφρασης και μιας συμβολοσειράς και για την αντικατάσταση του αντιστοιχισμένου υποστρώματος με ένα νέο υπόστρωμα

φέτα()

Εξάγει ένα τμήμα μιας συμβολοσειράς και επιστρέφει μια νέα συμβολοσειρά

java μετατροπή από διπλό σε int

διαίρεση()

Διαχωρίζει ένα αντικείμενο String σε μια σειρά συμβολοσειρών διαχωρίζοντας τη συμβολοσειρά σε substrings

υπόστρωμα ()

Επιστρέφει τους χαρακτήρες σε μια συμβολοσειρά που ξεκινά από την καθορισμένη θέση μέσω του καθορισμένου αριθμού χαρακτήρων

υπόστρωμα ()

Επιστρέφει τους χαρακτήρες σε μια συμβολοσειρά μεταξύ δύο ευρετηρίων στη συμβολοσειρά

toLocaleLowerCase ()

Οι χαρακτήρες σε μια συμβολοσειρά μετατρέπονται σε πεζά, σεβόμενοι την τρέχουσα τοπική ρύθμιση

toLocaleUpperCase ()

Οι χαρακτήρες μέσα σε μια συμβολοσειρά μετατρέπονται σε κεφαλαία, σεβόμενοι τις τρέχουσες τοπικές ρυθμίσεις

toLowerCase ()

Επιστρέφει την τιμή συμβολοσειράς κλήσης που μετατράπηκε σε πεζά

σεUpperCase ()

Επιστρέφει την τιμή συμβολοσειράς κλήσης που μετατρέπεται σε κεφαλαία

toString ()

Επιστρέφει μια συμβολοσειρά που αντιπροσωπεύει το καθορισμένο αντικείμενο

αξία του()

Επιστρέφει την αρχική τιμή του καθορισμένου αντικειμένου

Παράδειγμα:

let str: string = 'Καλώς ήλθατε στο Edureka' str.charAt (0) // επιστρέφει 'w' str.charAt (2) // επιστρέφει 'l' 'Καλώς ήλθατε στο Edureka'.charAt (2) επιστρέφει' l 'let str1 : string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // επιστρέφει 'welcomeEdureka' str1.concat ('', str2) // επιστρέφει 'welcome Edureka' str1.concat ('' to ' ') // επιστρέφει' καλώς ήλθατε '

Τώρα που γνωρίζετε για συμβολοσειρές, ας προχωρήσουμε με αυτό το σεμινάριο TypeScript και κατανοήστε τους πίνακες.

Πίνακες σε TypeScript

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

Σύνταξη:

var array_name [: τύπος δεδομένων] // δήλωση array_name = [val1, val2, valn ..] // αρχικοποίηση

Παράδειγμα:

let names: Array names = ['John', 'Daisy', 'Rachel'] let ids: Array ids = [101, 700, 321].

Μέθοδοι συστοιχίας

Ακολουθεί μια λίστα με διαφορετικές μεθόδους Array που μπορούν να χρησιμοποιηθούν για διαφορετικούς σκοπούς:

Μέθοδος Περιγραφή

φίλτρο()

Δημιουργεί έναν νέο πίνακα με όλα τα στοιχεία αυτού του πίνακα για τα οποία η παρεχόμενη λειτουργία φιλτραρίσματος επιστρέφει αληθινή

κάθε()

Επιστρέφει true αν κάθε στοιχείο σε αυτόν τον πίνακα ικανοποιεί την παρεχόμενη δοκιμαστική λειτουργία

συμπυκνωμένος ()

Επιστρέφει έναν νέο πίνακα που αποτελείται από αυτόν τον πίνακα που ενώνεται με άλλους πίνακες

ευρετήριοOf ()

Επιστρέφει τον πρώτο ή τον ελάχιστο δείκτη ενός στοιχείου μέσα στον πίνακα ίσο με την καθορισμένη τιμή

για κάθε()

Καλεί μια συνάρτηση για κάθε στοιχείο του πίνακα

Συμμετοχή()

Συνδέει όλα τα στοιχεία ενός πίνακα σε μια συμβολοσειρά

lastIndexOf ()

Επιστρέφει τον τελευταίο ή μεγαλύτερο δείκτη ενός στοιχείου στον πίνακα ίσο με την καθορισμένη τιμή

χάρτης()

Δημιουργεί έναν νέο πίνακα με τα αποτελέσματα της κλήσης μιας παρεχόμενης λειτουργίας σε κάθε στοιχείο αυτού του πίνακα

Σπρώξτε()

Προσθέτει ένα ή περισσότερα στοιχεία στο τέλος ενός πίνακα και επιστρέφει το νέο μήκος του πίνακα

ποπ ()

Αφαιρεί το τελευταίο στοιχείο από έναν πίνακα και επιστρέφει αυτό το στοιχείο

περιορίζω()

Εφαρμόστε μια συνάρτηση ταυτόχρονα σε δύο τιμές του πίνακα από αριστερά προς τα δεξιά για να τη μειώσετε σε μία τιμή

μείωσηΔικαίωμα ()

Εφαρμόστε μια συνάρτηση ταυτόχρονα σε δύο τιμές του πίνακα από δεξιά προς τα αριστερά για να τη μειώσετε σε μία τιμή

ΑΝΤΙΣΤΡΟΦΗ()

Αντιστρέφει τη σειρά των στοιχείων ενός πίνακα

βάρδια()

Αφαιρεί το πρώτο στοιχείο από έναν πίνακα και επιστρέφει αυτό το στοιχείο

φέτα()

Εξάγει μια ενότητα ενός πίνακα και επιστρέφει έναν νέο πίνακα

μερικοί()

Επιστρέφει αληθές εάν τουλάχιστον ένα στοιχείο σε αυτόν τον πίνακα ικανοποιεί την παρεχόμενη λειτουργία δοκιμής

είδος()

Ταξινομεί τα στοιχεία ενός πίνακα

toString ()

Επιστρέφει μια συμβολοσειρά που αντιπροσωπεύει τον πίνακα και τα στοιχεία του

συνδέω()

Προσθέτει και / ή αφαιρεί στοιχεία από έναν πίνακα

unshift ()

Προσθέτει ένα ή περισσότερα στοιχεία στο μπροστινό μέρος ενός πίνακα και επιστρέφει το νέο μήκος του πίνακα

Παράδειγμα:

var name: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // έξοδος: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // έξοδος: Tara name.push ('Rachel') console.log (name) // έξοδος: ['John', 'Daisy', 'Rachel']

Τώρα ας προχωρήσουμε με αυτό το σεμινάριο TypeScript και να μάθουμε για τις διεπαφές.

Διεπαφές TypeScript

Η διεπαφή είναι μια δομή που καθορίζει τη σύμβαση στην εφαρμογή σας. Ορίζει τη σύνταξη των κλάσεων που πρέπει να ακολουθούν. Περιέχει μόνο τη δήλωση των μελών και είναι ευθύνη της παραγόμενης τάξης να καθορίσει τα μέλη.

Παράδειγμα:

διεπαφή Υπάλληλος {empID: number empName: string getSalary: (number) => number // arrow function getManagerName (number): string}

Στο παραπάνω παράδειγμα, το Υπάλληλος διεπαφή περιλαμβάνει δύο ιδιότητες ΕΜΙΜΙ και empName . Περιλαμβάνει επίσης μια δήλωση μεθόδου getSalaray χρησιμοποιώντας ένα λειτουργία βέλους που περιλαμβάνει μία παράμετρο αριθμού και έναν τύπο επιστροφής αριθμού. ο getManagerName Η μέθοδος δηλώνεται χρησιμοποιώντας μια κανονική συνάρτηση.

Τύπος γραφής Μαθήματα

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

Μια τάξη περιλαμβάνει τα ακόλουθα:

  • Οικοδόμος
  • Ιδιότητες
  • Μέθοδοι

Παράδειγμα:

class Employee {empID: number empName: string buildor (ID: number, name: string) {this.empName = name this.empID = ID} getSalary (): αριθμός {return 40000}}

Κληρονομία

Υποστηρίζει TypeScript Κληρονομία καθώς είναι η ικανότητα ενός προγράμματος να δημιουργεί νέες τάξεις από μια υπάρχουσα τάξη. Η τάξη που επεκτείνεται για τη δημιουργία νεότερων τάξεων ονομάζεται τάξη γονέα ή super class. Οι νέες τάξεις ονομάζονται θυγατρικές ή υποκατηγορίες.

Μια τάξη κληρονομεί από άλλη τάξη χρησιμοποιώντας τη λέξη-κλειδί «επεκτείνεται». Τα παιδικά μαθήματα κληρονομούν όλες τις ιδιότητες και τις μεθόδους εκτός από τα ιδιωτικά μέλη και τους κατασκευαστές από τη μητρική τάξη. Όμως, το TypeScript δεν υποστηρίζει πολλαπλή κληρονομιά.

Σύνταξη:

Η κλάση child_class_name επεκτείνει το όνομα γονικού_κλάσης

Παράδειγμα:

class Person {name: string buildor (name: string) {this.name = name}} class Employee επεκτείνει το άτομο {empID: number buildor (empID: number, name: string) {super (name) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Employee ID =' + this.empID)}} let emp = new Υπάλληλος (701, 'Jason') emp.displayName () // Όνομα = Jason, Αναγνωριστικό υπαλλήλου = 701

Τώρα που γνωρίζετε για τα μαθήματα, ας προχωρήσουμε με αυτόν τον οδηγό TypeScript και μάθετε για τα αντικείμενα.

Αντικείμενα σε TypeScript

Ένα αντικείμενο είναι μια παρουσία που περιέχει ένα διαφορετικό σύνολο ζευγών τιμών-κλειδιών. Οι τιμές μπορεί να είναι κλιμακωτές τιμές ή συναρτήσεις ή ακόμη και μια σειρά από άλλα αντικείμενα.

Σύνταξη:

var object_name = {key1: “value1”, // scalar value key2: “value”, key3: function () {// functions}, key4: [“content1”, “content2”]

Ένα αντικείμενο μπορεί να περιέχει κλιμακωτές τιμές, συναρτήσεις και δομές όπως πίνακες και πλειάδες.

Παράδειγμα:

var person = {firstname: 'Danny', επώνυμο: 'Green'} // πρόσβαση στις τιμές του αντικειμένου console.log (person.firstname) console.log (person.lastname)

Κατά την κατάρτιση, θα δημιουργήσει τον ίδιο κώδικα σε JavaScript.

Παραγωγή:

Ντάνι
Πράσινος

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

Εκμάθηση TypeScript: Περίπτωση χρήσης

Εδώ, θα μάθουμε πώς να μετατρέπουμε ένα υπάρχον σε TypeScript.

Όταν καταρτίζουμε ένα αρχείο TypeScript, παράγει αντίστοιχο αρχείο JavaScript με το ίδιο όνομα. Εδώ, πρέπει να διασφαλίσουμε ότι το αρχικό αρχείο JavaScript που λειτουργεί ως είσοδος δεν μπορεί να βρίσκεται στον ίδιο κατάλογο, ώστε το TypeScript να μην τα παρακάμψει.

Η διαδικασία μετεγκατάστασης από JavaScript σε TypeScript περιλαμβάνει τα ακόλουθα βήματα:

1. Προσθέστε το αρχείο tsconfig.json στο έργο

Πρέπει να προσθέσετε ένα αρχείο tsconfig.json στο έργο. Το TypeScript χρησιμοποιεί ένα αρχείο tsconfig.json για τη διαχείριση των επιλογών συλλογής του έργου, όπως ποια αρχεία θέλετε να συμπεριλάβετε και να εξαιρέσετε.

{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}

2. Ενσωματώστε με ένα εργαλείο κατασκευής

Τα περισσότερα έργα JavaScript διαθέτουν ένα ενσωματωμένο εργαλείο κατασκευής, όπως gulp ή webpack. Μπορείτε να ενσωματώσετε έργα με webpack με τους ακόλουθους τρόπους:

  • Εκτελέστε την ακόλουθη εντολή στο τερματικό:
$ npm εγκαταστήστε τον εκπληκτικό-typecript-loader source-map-loader

Στην ενσωμάτωση του webpack, χρησιμοποιείτε φοβερό-scriptcript-loader σε συνδυασμό με source-map-loader για ευκολότερο εντοπισμό σφαλμάτων του πηγαίου κώδικα.

  • Δεύτερον, συγχωνεύστε την ιδιότητα config module στο αρχείο webpack.config.js για να συμπεριλάβετε τους φορτωτές.

3. Μετακινήστε όλα τα αρχεία .js σε αρχεία .ts

Σε αυτό το βήμα, πρέπει να μετονομάσετε το αρχείο .js σε αρχείο .ts. Ομοίως, εάν το αρχείο χρησιμοποιεί JSX, θα πρέπει να το μετονομάσετε σε .tsx. Τώρα, εάν ανοίξουμε αυτό το αρχείο σε ένα πρόγραμμα επεξεργασίας που υποστηρίζει TypeScript, ορισμένοι από τους κωδικούς ενδέχεται να αρχίσουν να παρέχουν σφάλματα συλλογής. Έτσι, η μετατροπή αρχείων ένα προς ένα επιτρέπει τον χειρισμό σφαλμάτων συλλογής πιο εύκολα. Εάν το TypeScript εντοπίσει σφάλματα συλλογής κατά τη μετατροπή, εξακολουθεί να είναι σε θέση να μεταφράσει τον κώδικα.

4. Ελέγξτε για σφάλματα

Αφού μετακινήσετε το αρχείο js στο αρχείο ts, αμέσως, το TypeScript θα ξεκινήσει τον Έλεγχο τύπου του κώδικα μας. Έτσι, ενδέχεται να λάβετε σφάλματα διαγνωστικού στον κώδικα JavaScript.

5. Χρησιμοποιήστε βιβλιοθήκες JavaScript τρίτων

Τα έργα JavaScript χρησιμοποιούν βιβλιοθήκες τρίτων όπως ή Λοδάς. Για τη συλλογή αρχείων, το TypeScript πρέπει να γνωρίζει τους τύπους όλων των αντικειμένων σε αυτές τις βιβλιοθήκες. Τα αρχεία ορισμού TypeScript Type για βιβλιοθήκες JavaScript είναι ήδη διαθέσιμα στο DefinitelyTyped. Επομένως, δεν χρειάζεται να εγκαταστήσετε αυτόν τον τύπο εξωτερικά. Πρέπει να εγκαταστήσετε μόνο αυτούς τους τύπους που χρησιμοποιούνται στο έργο μας.

Για το jQuery, μπορείτε να εγκαταστήσετε τον ορισμό:

$ npm install @ types / jquery

Μετά από αυτό, κάντε τις αλλαγές στο έργο JavaScript, εκτελέστε το εργαλείο κατασκευής. Τώρα, θα πρέπει να δημιουργήσετε το έργο TypeScript σε απλή JavaScript που μπορεί να εκτελεστεί στο πρόγραμμα περιήγησης.

Με αυτό, φτάσαμε στο τέλος αυτού του Οδηγού TypeScript. Ελπίζω να καταλάβατε όλα τα σημαντικά στοιχεία του TypeScript.

Δείτε το από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στην υπηρεσία απλής αποθήκευσης Amazon (S3).

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του 'TypeScript Tutorial' και θα επικοινωνήσουμε μαζί σας.