TypeScript Εκμάθηση: Τι είναι, Διεπαφή, Απαριθμητής, Πίνακας

Τι είναι TypeScript?

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

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

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

Γιατί να χρησιμοποιήσετε TypeScript?

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

• Μεγάλα και σύνθετα έργα σε JavaΤα σενάρια είναι δύσκολο να κωδικοποιηθούν και να διατηρηθούν.
• TypeScript Βοηθά πολύ στην οργάνωση του κώδικα και αφαιρεί τα περισσότερα σφάλματα κατά τη μεταγλώττιση και όχι κατά τον χρόνο εκτέλεσης.
• TypeScript Υποστηρίζει βιβλιοθήκες JS και τεκμηρίωση API.
• Είναι μια προαιρετικά πληκτρολογημένη γλώσσα σεναρίων, επομένως οι τύποι μπορούν να υιοθετηθούν σταδιακά.
• TypeScript ο κώδικας μπορεί να μετατραπεί σε απλό JavaΚώδικας σεναρίου για οποιονδήποτε στόχο προγράμματος περιήγησης.
• Προσφέρει καλύτερη δομή κώδικα και τεχνικές αντικειμενοστρεφούς προγραμματισμού.
• Επιτρέπει καλύτερη υποστήριξη εργαλείων χρόνου ανάπτυξης, συμπεριλαμβανομένης της αυτόματης συμπλήρωσης και της ασφαλούς αναδιάρθρωσης.
• Μπορεί να επεκτείνει τη γλώσσα πέρα ​​από το τυπικό, με χαρακτηριστικά όπως διακοσμητές.

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

TypeScript Η ιστορία μας

Ας δούμε τα σημαντικότερα ορόσημα από την ιστορία της TypeScript:

• Μετά από δύο χρόνια εσωτερικής ανάπτυξης στο Microsoft, TypeScript Η έκδοση 0.9 κυκλοφόρησε το 2013.
• TypeScript Η έκδοση 1.0, με πρόσθετη υποστήριξη για γενόσημα, κυκλοφόρησε στο Build 2014.
• Τον Ιούλιο του 2014, ένα νέο TypeScript Έφτασε ο μεταγλωττιστής που ήταν πέντε φορές πιο γρήγορος από την προηγούμενη έκδοση.
• Τον Ιούλιο του 2015, προστέθηκε υποστήριξη για τις ενότητες ES6, τη λέξη-κλειδί ονομάτων, για…από και διακοσμητές.
• Τον Νοέμβριο του 2016, προστέθηκαν οι αντιστοιχισμένοι τύποι, οι τύποι κλειδιού και αναζήτησης, καθώς και η ανάπαυση και η εξάπλωση αντικειμένων.
• Στις 27 Μαρτίου 2018, προστέθηκαν οι υπό όρους τύποι και το βελτιωμένο keyof με τύπους διασταύρωσης.
• TypeScript Η έκδοση 5.0, που κυκλοφόρησε τον Μάρτιο του 2023, εκσυγχρόνισε τους διακοσμητές και μείωσε το μέγεθος της συσκευασίας.
• TypeScript Η έκδοση 6.0 κυκλοφόρησε τον Μάρτιο του 2026 ως η τελική έκδοση που βασίστηκε στο JavaΒάση κώδικα σεναρίου.
• TypeScript Η έκδοση 7.0 μετακινεί τον μεταγλωττιστή σε μια εγγενή υλοποίηση Go, η οποία Microsoft αναφέρεται ως περίπου δέκα φορές ταχύτερο από το 6.0.

Ποιος χρησιμοποιεί TypeScript?

TypeScript δεν αποτελεί πλέον μια εξειδικευμένη επιλογή. Υποστηρίζει πολλά από τα πιο ευρέως χρησιμοποιούμενα εργαλεία front-end και back-end και η παρακάτω λίστα δείχνει πού είναι πιο πιθανό να το συναντήσει ένας αρχάριος.

• Γωνιώδης: Το Angular framework είναι γραμμένο σε TypeScript, και αναμένεται να γραφτεί και κώδικας εφαρμογής σε αυτό.
• Έργα React και Vue: Και τα δύο οικοσυστήματα φέρουν επίσημο πλοίο TypeScript πρότυπα και τα περισσότερα σύγχρονα προγράμματα εκκίνησης το ενεργοποιούν από προεπιλογή.
• Παρασκήνια Node.js: Τα πλαίσια διακομιστών όπως το NestJS είναι χτισμένα γύρω από TypeScript μαθήματα και διακοσμητές.
• Εργαλεία επεξεργασίας: Visual Studio Code είναι η ίδια μια μεγάλη TypeScript βάση κώδικα, γι' αυτό και η υποστήριξη γλωσσών είναι τόσο ολοκληρωμένη.
• Προεκτάσεις μεγάλων επιχειρήσεων: Ομάδες που συνεργάζονται με πολλούς συνεισφέροντες το υιοθετούν για να εντοπίζουν σφάλματα ενσωμάτωσης πριν από την ανάπτυξη.

Τρόπος λήψης και εγκατάστασης TypeScript

Ακολουθεί η βήμα προς βήμα διαδικασία λήψης και εγκατάστασης TypeScript:

Βήμα 1) Λήψη και εγκατάσταση του Nodejs

Πηγαίνετε στην επίσημη ιστοσελίδα του Nodejs, https://nodejs.org/en/download/και κατεβάστε και εγκαταστήστε το Nodejs για το λειτουργικό σας σύστημα. Λεπτομερείς οδηγίες είναι διαθέσιμες στον οδηγό στη διεύθυνση πώς να κατεβάσετε και να εγκαταστήσετε το Node.js.

Βήμα 2) Ελέγξτε την έκδοση Nodejs και npm

Για να ελέγξετε αν είναι εγκατεστημένα τα Nodejs και npm, ελέγξτε την έκδοση στη γραμμή εντολών σας.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Οποιαδήποτε τρέχουσα έκδοση Node LTS λειτουργεί. TypeScript Το ίδιο απαιτεί μόνο μια υποστηριζόμενη έκδοση Node για να εκτελέσει τον μεταγλωττιστή.

Βήμα 3) TypeScript Εγκατάσταση

Δημιουργήστε τον κατάλογο έργου σας typeproject\ και εκτελέστε την εντολή npm init, όπως φαίνεται στην παρακάτω εντολή:

npm init

Βήμα 4) Ξεκινήστε την εγκατάσταση

Αυτό δημιουργεί το package.json, το οποίο θα αποθηκεύσει τις εξαρτήσεις για το έργο μας.

Μόλις τελειώσετε, εγκαταστήστε TypeScript ως ακολούθως:

npm -g install typescript

Η παραπάνω εντολή θα φροντίσει για την εγκατάσταση TypeScript. Η προσθήκη "-g" στην εγκατάσταση npm θα εγκατασταθεί TypeScript παγκοσμίως. Το πλεονέκτημα της χρήσης του -g είναι ότι θα μπορείτε να χρησιμοποιήσετε το TypeScript tsc εντολή από οποιονδήποτε κατάλογο, καθώς εγκαθίσταται καθολικά. Σε περίπτωση που δεν θέλετε να εγκαταστήσετε TypeScript παγκοσμίως, χρησιμοποιήστε την παρακάτω εντολή:

npm install --save-dev typescript

Δημιουργήστε έναν φάκελο src\ στον κατάλογο του έργου σας και μέσα σε αυτόν δημιουργήστε το TypeScript αρχείο test.ts και γράψτε τον κωδικό σας.

Παράδειγμα: test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

Μεταγλωττίστε TypeScript κωδικός σε Javascript

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

If TypeScript είναι εγκατεστημένο παγκοσμίως, χρησιμοποιήστε την παρακάτω εντολή:

tsc test.ts

If TypeScript είναι εγκατεστημένο τοπικά στο έργο σας, πρέπει να χρησιμοποιήσετε τη διαδρομή του TypeScript από το node_modules, όπως φαίνεται, ή εκτελέστε το μέσω npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Η παραπάνω εντολή θα δημιουργήσει ένα αρχείο test.js το οποίο θα έχει τον κώδικα μεταγλωττισμένο σε JavaΓραφή.

Παράδειγμα: test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Εκτέλεση Javascript χρησιμοποιώντας το Nodejs

Τώρα θα εκτελέσουμε το test.js σε Nodejs ως εξής:

D:\typeproject\src>node test.js
15

Η τιμή που διαβιβάζεται στο console.log εμφανίζεται όταν εκτελείται το test.js.

Εκτέλεση JavaΣενάριο στο πρόγραμμα περιήγησης

Παράδειγμα:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

Μεταγλωττίστε TypeScript κωδικός σε Javascript χρησιμοποιώντας την έκδοση EcmaScript

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

Παράδειγμα: test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Για να μεταγλωττίσετε στην έκδοση ES της επιλογής σας, μπορείτε να χρησιμοποιήσετε την επιλογή target ή t στην εντολή σας ως εξής:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Από προεπιλογή, ο στόχος είναι το ES3 για τον κλασικό μεταγλωττιστή. Σε περίπτωση που θέλετε να τον αλλάξετε, μπορείτε να χρησιμοποιήσετε την παραπάνω εντολή.

Προς το παρόν θα χρησιμοποιήσουμε το ES6 ως στόχο:

tsc --target ES6  test.ts

test.ts σε test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

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

Από προεπιλογή, ο στόχος είναι ES3, επομένως χωρίς στόχο λαμβάνετε το test.js ως εξής:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

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

Μεταβλητές σε TypeScript

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

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

var λέξη-κλειδί,

ας λέξη-κλειδί

const λέξη-κλειδί

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

Δήλωση μεταβλητών χρησιμοποιώντας var

Σύνταξη:

var firstname = "Roy";

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

Παράδειγμα 1:

var k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

test(); // output as 1
test(); // output as 2
alert(c); // will throw error, Uncaught ReferenceError: c is not defined

Παράδειγμα 2:

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

Παράδειγμα 3:

var i = 0;
function test() {
    if (i > 0) {
      var t = 1;
    }
    return t;
}

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

Δήλωση μεταβλητών χρησιμοποιώντας let

The TypeScript η σύνταξη για το let είναι όπως δίνεται παρακάτω:

Σύνταξη:

let name = "Roy";

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

Παράδειγμα:

let i = 1;
function test() {
    if (i > 0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error: Cannot find name 't'

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

Το ίδιο ισχύει και μέσα σε οποιαδήποτε συνάρτηση, βρόχο for, βρόχο while ή μπλοκ διακόπτη. Μια μεταβλητή let είναι διαθέσιμη μόνο μέσα σε αυτό το μπλοκ και η αναφορά της εκτός αυτής προκαλεί σφάλμα. Αυτή είναι η κύρια διαφορά μεταξύ var και let.

Δήλωση μεταβλητών χρησιμοποιώντας const

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

Σύνταξη:

const name = "Roy";

Παράδειγμα:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

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

Τύποι σε TypeScript

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

Οι ακόλουθοι είναι οι βασικοί τύποι:

αριθμός

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

Σύνταξη:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Ακολουθούν μερικές σημαντικές μέθοδοι που μπορούν να χρησιμοποιηθούν σε τύπους αριθμών:

toFixed() – θα μετατρέψει τον αριθμό σε συμβολοσειρά και θα διατηρήσει τα δεκαδικά ψηφία που έχουν δοθεί στη μέθοδο.

toString () – αυτή η μέθοδος θα μετατρέψει τον αριθμό σε συμβολοσειρά.

αξία του() – αυτή η μέθοδος θα δώσει πίσω την πρωταρχική τιμή του αριθμού.

toPrecision() – αυτή η μέθοδος θα μορφοποιήσει τον αριθμό σε ένα καθορισμένο μήκος.

Παράδειγμα: με όλες τις αριθμητικές μεθόδους

let _num :number = 10.345;
_num.toFixed(2);      // "10.35"
_num.valueOf();      // 10.345
_num.toString();     // "10.345"
_num.toPrecision(2); // "10"

Σπάγγος

Σειρά χαρακτήρων: μόνο τιμές συμβολοσειρών.

Σύνταξη:

let str :string = "hello world";

Ακολουθούν μερικές σημαντικές μέθοδοι που μπορούν να χρησιμοποιηθούν σε τύπους συμβολοσειρών:

• διαίρεση() – αυτή η μέθοδος θα διαιρέσει τη συμβολοσειρά σε έναν πίνακα.
• χαρΑτ() – αυτή η μέθοδος θα δώσει τον χαρακτήρα στον δεδομένο δείκτη.
• ευρετήριοΟφ() – αυτή η μέθοδος θα δώσει τη θέση της πρώτης εμφάνισης της τιμής που της έχει δοθεί.
• αντικαθιστώ() – αυτή η μέθοδος δέχεται 2 συμβολοσειρές. Αναζητά την πρώτη τιμή στη συμβολοσειρά και, εάν υπάρχει, την αντικαθιστά με τη δεύτερη, δίνοντας πίσω μια νέα συμβολοσειρά.
• τακτοποίηση() – αυτή η μέθοδος θα αφαιρέσει τον λευκό χώρο και από τις δύο πλευρές της συμβολοσειράς.
• substr() – αυτή η μέθοδος θα δώσει ένα μέρος της συμβολοσειράς, ανάλογα με την αρχική θέση και το μήκος που δίνεται.
• υπόστρωμα() – αυτή η μέθοδος θα δώσει ένα μέρος της συμβολοσειράς, ανάλογα με τις θέσεις έναρξης και λήξης. Ο χαρακτήρας στην τελική θέση εξαιρείται.
• σε κεφαλαία() – θα μετατρέψει τη συμβολοσειρά σε κεφαλαία γράμματα.
• σε πεζά() – θα μετατρέψει τη συμβολοσειρά σε πεζά.

Παράδειγμα:

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

Boolean

Μια λογική συνάρτηση δέχεται μόνο τις λογικές τιμές true και false. Σε αντίθεση με την απλή συνάρτηση JavaΣενάριο, οι αριθμοί 0 και 1 δεν γίνονται δεκτοί, επειδή είναι τύπου number.

Σύνταξη:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

Κάθε

Σύνταξη:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Μεταβλητές που δηλώνονται χρησιμοποιώντας το κάθε Ο τύπος μπορεί να περιέχει μια συμβολοσειρά, έναν αριθμό, έναν πίνακα, μια λογική τιμή ή ένα κενό. TypeScript δεν θα εμφανίσει κανένα σφάλμα χρόνου μεταγλώττισης, το οποίο είναι παρόμοιο με τις μεταβλητές στο JavaΣενάριο. Χρησιμοποιήστε τον τύπο "any" μόνο όταν δεν είστε σίγουροι για τον τύπο τιμής που θα συσχετιστεί με αυτήν τη μεταβλητή, επειδή απενεργοποιεί κάθε έλεγχο σε αυτήν την τιμή.

Κενός

Ο τύπος Void χρησιμοποιείται κυρίως ως ο τύπος επιστροφής μιας συνάρτησης που δεν επιστρέφει τίποτα.

Σύνταξη:

function testfunc():void{
 //code here
}

TypeScript Παράταξη

An Παράταξη in TypeScript είναι ένας τύπος δεδομένων στον οποίο μπορείτε να αποθηκεύσετε πολλαπλές τιμές. Ας μάθουμε πώς να δηλώνουμε και να αντιστοιχίζουμε τιμές για λειτουργίες πίνακα σε TypeScript.

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

Δηλώστε και αρχικοποιήστε έναν πίνακα

Σύνταξη:

let nameofthearray : Array<typehere>

Παράδειγμα

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; // array with all string values

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array with all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; // mixed

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

Διαφορετικοί τρόποι πρόσβασης σε στοιχεία από έναν πίνακα

Για να λάβουμε τα στοιχεία από έναν πίνακα, οι τιμές ξεκινούν από τον δείκτη 0 έως το μήκος του πίνακα μείον ένα.

let years: Array<number> = [2016, 2017, 2018, 2019];
years[0]; // output will be 2016
years[1]; // output will be 2017
years[2]; // output will be 2018
years[3]; // output will be 2019

Μπορείτε επίσης να λάβετε τα στοιχεία από έναν πίνακα χρησιμοποιώντας ένα TypeScript για βρόχος, όπως φαίνεται παρακάτω.

Χρησιμοποιώντας TypeScript για βρόχο

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i = 0; i < years.length; i++) {
     console.log(years[i]);
}

Παραγωγή:

2016
2017
2018
2019

Χρήση βρόχου for-in

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i in years) {
     console.log(years[i]);
}

Παραγωγή:

2016
2017
2018
2019

Χρήση βρόχου for-of

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i of years) {
     console.log(i);
}

Παραγωγή:

2016
2017
2018
2019

Χρησιμοποιώντας τον βρόχο forEach

let years: Array<number> = [2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
  console.log(yrs);
});

Παραγωγή:

2016
2017
2018
2019

TypeScript Μέθοδοι Πίνακας

The TypeScript Το αντικείμενο πίνακα έχει πολλές ιδιότητες και μεθόδους που βοηθούν τους προγραμματιστές να χειρίζονται πίνακες εύκολα και αποτελεσματικά. Μπορείτε να λάβετε την τιμή μιας ιδιότητας καθορίζοντας arrayname.property και την έξοδο μιας μεθόδου καθορίζοντας arrayname.method().

Παράδειγμα για την ιδιότητα μήκους

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

console.log(months.length);  // 12

Παράδειγμα για την αντίστροφη μέθοδο

console.log(months.reverse());
// ["Dec","Nov","Oct","Sept","Aug","July","June","May","April","March","Feb","Jan"]

Παράδειγμα για τη μέθοδο ταξινόμησης

console.log(months.sort());
// ["April","Aug","Dec","Feb","Jan","July","June","March","May","Nov","Oct","Sept"]

Παράδειγμα για τη μέθοδο pop

console.log(months.pop()); // Dec

Παράδειγμα για τη μέθοδο βάρδιας

console.log(months.shift()); // Jan

Παράδειγμα για τη μέθοδο ώθησης

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
years.forEach(function(yrs, i) {
  console.log(yrs); // 2015, 2016, 2017, 2018, 2019, 2020
});

Παράδειγμα για τη μέθοδο concat

let array1: Array<number> = [10, 20, 30];
let array2: Array<number> = [100, 200, 300];
console.log(array1.concat(array2)); // [10, 20, 30, 100, 200, 300]

Τάξη μέσα TypeScript

TypeScript είναι ένα υπερσύνολο του JavaΣενάριο, άρα ό,τι είναι δυνατό JavaΤο σενάριο είναι επίσης δυνατό στο TypeScriptΗ κλάση είναι μια δυνατότητα που προστέθηκε από την έκδοση ES6 και μετά. Νωρίτερα στο JavaΗ λειτουργικότητα τύπου script και κλάσης επιτεύχθηκε χρησιμοποιώντας μια συνάρτηση με πρωτότυπες μεθόδους για την επαναχρησιμοποίηση κώδικα. Χρησιμοποιώντας κλάση, ο κώδικά σας μπορεί να πλησιάσει γλώσσες όπως Java, C# και Python, όπου ο κώδικας επαναχρησιμοποιείται εύκολα.

Καθορισμός τάξης σε TypeScript

Εδώ είναι η βασική σύνταξη της κλάσης στο TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

Παράδειγμα: Ένα παράδειγμα εργασίας στο Class

class Students {
    age : number;
    name : string;
    roll_no : number;

    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

Στο παραπάνω παράδειγμα, έχετε μια κλάση που ονομάζεται Students. Έχει τις ιδιότητες age, name και roll_no.

Κατασκευαστής σε α TypeScript Τάξη

Η κλάση Students που ορίστηκε παραπάνω έχει έναν κατασκευαστή όπως φαίνεται παρακάτω:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

Η μέθοδος κατασκευής έχει τις παραμέτρους age, name και roll_no. Ο κατασκευαστής φροντίζει για την αρχικοποίηση των ιδιοτήτων κατά την έναρξη της κλάσης. Η πρόσβαση στις ιδιότητες γίνεται χρησιμοποιώντας το αυτό λέξη-κλειδί, για παράδειγμα this.age για πρόσβαση στην ηλικία και this.roll_no για πρόσβαση στο roll_no. Μπορείτε επίσης να έχετε έναν προεπιλεγμένο κατασκευαστή, όπως φαίνεται παρακάτω:

constructor () {}

Μέθοδοι μέσα σε α TypeScript Τάξη

Στην κλάση Students ορίζονται μέθοδοι, για παράδειγμα getRollNo(), getName() και getAge(), οι οποίες επιστρέφουν τις τιμές των ιδιοτήτων roll_no, name και age.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Δημιουργία μιας παρουσίας μιας κλάσης σε TypeScript

In TypeScript, για να δημιουργήσετε μια παρουσία μιας κλάσης χρησιμοποιείτε τον τελεστή new. Όταν δημιουργείτε μια παρουσία με new, λαμβάνετε ένα αντικείμενο που μπορεί να έχει πρόσβαση στις ιδιότητες και τις μεθόδους της κλάσης, όπως φαίνεται παρακάτω:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge();  // 15
student_details.getName(); // Harry John

Μεταγλώττιση ενός TypeScript Τάξη προς JavaΓραφή

Μπορείτε να χρησιμοποιήσετε την εντολή tsc όπως φαίνεται παρακάτω για να μεταγλωττίσετε σε JavaΓραφή.

Command: tsc  Students.ts

Η έξοδος του JavaΟ κώδικας σεναρίου κατά τη μεταγλώττιση φαίνεται παρακάτω:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In JavaΣενάριο, η κλάση μετατρέπεται σε μια αυτοκαλούμενη συνάρτηση.

Κληρονομιά τάξης

Οι κλάσεις μπορούν να κληρονομηθούν χρησιμοποιώντας το Επεκτείνεται λέξη-κλειδί σε TypeScript.

Σύνταξη κληρονομικότητας κλάσης:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

τάξη Β θα μπορεί να μοιραστεί τάξη Α μεθόδους και ιδιότητες.

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

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge();      // output is 24
_std1.setMarks(500);
_std1.getMarks();    // output is 500

Έχετε δύο κλάσεις, την Person και την Student. Η Student επεκτείνει την Person και το αντικείμενο που δημιουργείται από την Student μπορεί να έχει πρόσβαση στις δικές του μεθόδους και ιδιότητες, καθώς και σε εκείνες της κλάσης που επεκτείνει.

Τώρα ας προσθέσουμε μερικές αλλαγές στην παραπάνω κλάση.

Παράδειγμα:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge();   // output is 24
_std1.getMarks(); // output is 500

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

In TypeScript Πρέπει να καλέσετε την εντολή super με όλες τις παραμέτρους της βασικής κλάσης. Αυτή πρέπει να είναι η πρώτη εντολή μέσα στον κατασκευαστή, επειδή η εντολή super εκτελεί τον κατασκευαστή της εκτεταμένης κλάσης. Οποιαδήποτε ιδιότητα δηλώνεται από την παράγωγη κλάση, όπως το tmarks, πρέπει στη συνέχεια να αντιστοιχιστεί ρητά, διαφορετικά η εντολή getMarks θα επιστρέψει απροσδιόριστη.

Πρόσβαση στους τροποποιητές TypeScript

TypeScript Υποστηρίζει τους τροποποιητές πρόσβασης public, private και protected στις μεθόδους και τις ιδιότητες σας. Από προεπιλογή, εάν δεν δοθεί τροποποιητής πρόσβασης, η μέθοδος ή η ιδιότητα θεωρείται public και είναι εύκολα προσβάσιμη από το αντικείμενο της κλάσης.

Στην περίπτωση των τροποποιητών ιδιωτικής πρόσβασης, τα μέλη δεν είναι διαθέσιμα από το αντικείμενο της κλάσης και προορίζονται για χρήση μόνο εντός της κλάσης. Δεν είναι διαθέσιμα σε μια κληρονομημένη κλάση.

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

Παράδειγμα:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is " + this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks;
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks();    // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails();  // output is Name is Sheena

Διεπαφή σε TypeScript

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

Σύνταξη μιας διεπαφής σε TypeScript

interface Dimension {
    width: string;
    height: string;
}

Έχετε ορίσει μια διεπαφή με όνομα Dimension η οποία έχει τις ιδιότητες width και height, και οι δύο τύπου string.

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

Παράδειγμα:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

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

Ο παραπάνω κώδικας, όταν μεταγλωττιστεί σε JavaΤο σενάριο, φαίνεται ως εξής:

var _imagedim = {
    width: "100px",
    height: "200px"
};

Ας δούμε τώρα πώς να χρησιμοποιήσουμε μια διεπαφή με μια συνάρτηση.

Χρήση μιας διεπαφής σε μια συνάρτηση ως τύπου επιστροφής

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

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

Το μεταγλωττισμένο JavaΟ κώδικας σεναρίου θα έχει ως εξής:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

Κατά τη μεταγλώττιση, εάν ο τύπος επιστροφής δεν ταιριάζει με τη διεπαφή, θα εμφανιστεί ένα σφάλμα.

Διεπαφή ως παράμετρος συνάρτησης

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width + "-" + dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // "300px-250px"

Στο παραπάνω παράδειγμα, χρησιμοποιήσατε τη διεπαφή Dimension ως παράμετρο στη συνάρτηση getDimension(). Όταν καλείτε τη συνάρτηση, η παράμετρος που της διαβιβάζεται πρέπει να ταιριάζει με τους κανόνες που ορίζονται από τη διεπαφή.

Το μεταγλωττισμένο JavaΟ κώδικας σεναρίου θα έχει ως εξής:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Κλάση που υλοποιεί μια διεπαφή

Για να χρησιμοποιήσετε μια διεπαφή με μια κλάση, πρέπει να χρησιμοποιήσετε τη λέξη-κλειδί υλοποιεί.

Σύνταξη για μια κλάση που υλοποιεί μια διεπαφή:

class NameofClass implements InterfaceName {
}

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

interface Dimension {
    width : string,
    height: string,
    getWidth(): string;
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

Στο παραπάνω παράδειγμα, έχετε ορίσει τη διεπαφή Dimension με τις ιδιότητες width και height, και οι δύο τύπου string, και μια μέθοδο που ονομάζεται getWidth() η οποία επιστρέφει μια συμβολοσειρά.

Το μεταγλωττισμένο JavaΟ κώδικας σεναρίου θα έχει ως εξής:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

Λειτουργίες σε TypeScript

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

JavaΛειτουργία σεναρίου:

function add (a1, b1) {
   return a1+b1;
}

TypeScript λειτουργία:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

Στην παραπάνω συνάρτηση, το όνομα της συνάρτησης είναι add, οι παράμετροι είναι a1 και b1, και τα δύο τύπου number, και ο τύπος επιστροφής είναι επίσης αριθμός. Εάν περάσετε μια συμβολοσειρά στη συνάρτηση, θα εμφανίσει ένα σφάλμα μεταγλώττισης κατά τη μεταγλώττιση σε JavaΓραφή.

Πραγματοποίηση κλήσης στη συνάρτηση: προσθήκη

let x = add(5, 10);   // will return 15
let b = add(5);       // error TS2554: Expected 2 arguments, but got 1
let c = add(3,4,5);   // error TS2554: Expected 2 arguments, but got 3
let t = add("Harry", "John");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

Οι παράμετροι a1 και b1 είναι υποχρεωτικά και θα προκαλέσουν σφάλμα εάν δεν παρέχονται. Οι τύποι παραμέτρων και ο τύπος επιστροφής είναι εξίσου σημαντικοί και δεν μπορούν να αλλάξουν αφού οριστούν.

Προαιρετικές παράμετροι για μια συνάρτηση

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

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3

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

Εκχώρηση προεπιλεγμένων τιμών στις Params

Μπορείτε να αντιστοιχίσετε προεπιλεγμένες τιμές σε παραμέτρους όπως φαίνεται παρακάτω:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John");      // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

Όπως και με τις προαιρετικές παραμέτρους, οι προεπιλεγμένες αρχικοποιημένες παράμετροι πρέπει επίσης να διατηρούνται στο τέλος της λίστας παραμέτρων.

Παράμετροι ηρεμίας

Έχετε δει πώς TypeScript χειρίζεται υποχρεωτικές παραμέτρους, προαιρετικές παραμέτρους και παραμέτρους προεπιλεγμένης τιμής. Τώρα θα εξετάσουμε τις παραμέτρους ηρεμίας. Οι παράμετροι ηρεμίας είναι μια ομάδα προαιρετικών παραμέτρων που ορίζονται μαζί, χρησιμοποιώντας τρία τελείες (…) ακολουθούμενο από το όνομα της παραμέτρου, η οποία είναι ένας πίνακας.

Σύνταξη για παραμέτρους ανάπαυσης:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

Όπως φαίνεται παραπάνω, η παράμετρος rest είναι ένας πίνακας που έχει πρόθεμα τρεις τελείες. Ο πίνακας θα περιέχει όλα τα υπόλοιπα ορίσματα που διαβιβάζονται στη συνάρτηση.

Παράδειγμα:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is MondayTuesdayWednesdayThursday

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

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

Σύνταξη συνάρτησης βέλους:

var nameoffunction = (params) => {
 // code here
}

Ποια είναι η χρήση μιας συνάρτησης βέλους;

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

Παράδειγμα:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

Δημιουργήσατε μια συνάρτηση με μια ιδιότητα score αρχικοποιημένη στο 0 και μια μέθοδο getScore η οποία χρησιμοποιεί εσωτερικά το setTimeout και, μετά από ένα δευτερόλεπτο, καταγράφει this.score. Η καταγεγραμμένη τιμή είναι απροσδιόριστη παρόλο που το this.score έχει οριστεί και αρχικοποιηθεί. Το πρόβλημα έγκειται στο αυτό λέξη-κλειδί. Η συνάρτηση μέσα στο setTimeout έχει το δικό της αυτό, και επειδή η βαθμολογία δεν ορίζεται σε αυτήν, το αποτέλεσμα είναι απροσδιόριστο.

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

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(() => {
            console.log(this.score);   // you get 0
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

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

TypeScript Τα ποσά

A TypeScript Το enum είναι ένα αντικείμενο που περιέχει μια συλλογή από σχετικές τιμές που είναι αποθηκευμένες μαζί. JavaΤο σενάριο δεν υποστηρίζει εγγενώς απαρίθμηση. Οι περισσότερες γλώσσες προγραμματισμού, όπως η Java, C, και C++ υποστήριξη απαρίθμησης και TypeScript τα καθιστά επίσης διαθέσιμα. Οι απαριθμήσεις ορίζονται χρησιμοποιώντας τη λέξη-κλειδί enum.

Πώς να δηλώσετε ένα Enum;

Σύνταξη:

enum NameofEnum {
   value1,
   value2,
    ..
}

Παράδειγμα: Αριθμ

enum Directions {
    North,
    South,
    East,
    West
}

Στο παραπάνω παράδειγμα, έχετε ορίσει μια απαρίθμηση που ονομάζεται Directions (Κατευθύνσεις) με τις τιμές North (Βορράς), South (Νότος), East (Ανατολικά) και West (Δύση). Οι τιμές αριθμούνται από το 0 για την πρώτη καταχώρηση και αυξάνονται κατά 1 για κάθε επόμενη καταχώρηση.

Δηλώστε μια απαρίθμηση με αριθμητική τιμή

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

enum Directions {
North = 0,
South = 1,
East = 2,
West = 3
}

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

enum Directions {
North = 5,
South, // will be 6
East,  // 7
West   // 8
}

Τώρα ο Βορράς ξεκινά από το 5, άρα ο Νότος είναι 6, η Ανατολή είναι 7 και η Δύση είναι 8.

Μπορείτε επίσης να αντιστοιχίσετε τιμές της επιλογής σας αντί για τις προεπιλογές. Για παράδειγμα:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Πώς να αποκτήσετε πρόσβαση σε ένα Enum;

Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιήσετε μια απαρίθμηση στον κώδικά σας:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North);      // output is 0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]);       // output is North

Το μεταγλωττισμένο JavaΤο σενάριο έχει ως εξής:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Από JavaΤο σενάριο δεν υποστηρίζει απαρίθμηση, ο μεταγλωττιστής μετατρέπει την απαρίθμηση σε μια αυτο-καλούμενη συνάρτηση, όπως φαίνεται παραπάνω. Η διπλή ανάθεση είναι αυτή που δημιουργεί την αντίστροφη αντιστοίχιση.ping από τον αριθμό πίσω στο όνομα.

Δηλώστε μια απαρίθμηση με τιμή συμβολοσειράς

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

Παράδειγμα:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North);      // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]);       // output is undefined

Το μεταγλωττισμένο JavaΤο σενάριο έχει ως εξής:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Σε τι βρίσκονται οι Ενότητες TypeScript?

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

Γιατί χρειάζεστε Ενότητες μέσα TypeScript?

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

Παράδειγμα τεστ1.ts

let age : number = 25;

Έχετε ορίσει μια μεταβλητή ηλικία αριθμού τύπου στο test1.ts.

Παράδειγμα τεστ2.ts

Στο test2.ts μπορείτε να αποκτήσετε πρόσβαση στη μεταβλητή την ηλικία του ορίζεται στο test1.ts και επίσης τροποποιήστε το, όπως φαίνεται παρακάτω:

age = 30; // changed from 25 to 30.
let _new_age = age;

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

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

Χρήση εξαγωγής και εισαγωγής

Υπάρχουν πολλοί τρόποι εξαγωγής και εισαγωγής. Θα συζητήσουμε τη σύνταξη που χρησιμοποιείται πιο συχνά.

Η σύνταξη για εισαγωγή και εξαγωγή 1:

export  nameofthevariable or class name or interface name etc

//To import the above variable or class name or interface you have to use import as shown below:

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

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

test1.ts

export let age: number = 25;

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

test2.ts

import { age } from "./test1"
let new_age :number = age;

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

Σύνταξη για εισαγωγή και εξαγωγή 2:

Υπάρχει ένας άλλος τρόπος εξαγωγής και εισαγωγής και η σύνταξη είναι όπως φαίνεται παρακάτω:

export = classname;

import classname = require("file path of modulename")

Όταν χρησιμοποιείτε εξαγωγή = Για να εξαγάγετε την ενότητα σας, η εισαγωγή πρέπει να χρησιμοποιήσει την εντολή require("διαδρομή αρχείου του ονόματος ενότητας").

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

Πελάτης.τσ

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Module Loader

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

Για να μεταγλωττίσετε κώδικα χρησιμοποιώντας τη μορφή ενότητας CommonJS, χρησιμοποιήστε την ακόλουθη εντολή:

tsc --module commonjs testCustomer.ts

Για να μεταγλωττίσετε κώδικα χρησιμοποιώντας τη μορφή ενότητας Requirejs, χρησιμοποιήστε την ακόλουθη εντολή:

tsc --module amd testCustomer.ts

Τα εξαρτώμενα αρχεία θα μετατραπούν σε αρχεία js με την παραπάνω εντολή.

Παράδειγμα testCustomer.ts σε testCustomer.js χρησιμοποιώντας Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Παράδειγμα μετατροπής Customer.ts σε Customer.js χρησιμοποιώντας Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

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

Εδώ είναι η δομή του φακέλου:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

main.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Module testing using Requirejs</title>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    <h3>Testing modules using Requirejs</h3>
</body>
</html>

Χώροι ονομάτων σε TypeScript

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

Σύνταξη χώρου ονομάτων

namespace name{

export class {
}

export interface {
}

export const constname;

}

Ο σχετικός κώδικας είναι διαθέσιμος σε έναν χώρο ονομάτων.

Παράδειγμα εργασίας χώρου ονομάτων: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

Το όνομα του χώρου ονομάτων είναι Ρύθμιση Φοιτητή, και έχετε προσθέσει μια διεπαφή StudDetails, μια συνάρτηση addSpace και μια κλάση που ονομάζεται Student.

Πρόσβαση σε χώρο ονομάτων

Ακολουθεί ο κώδικας όπου χρησιμοποιείτε τον χώρο ονομάτων Ρύθμιση Φοιτητή.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

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

Μπορείτε να μεταγλωττίσετε και τα δύο αρχεία σε ένα αρχείο js όπως φαίνεται παρακάτω:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Ελέγξτε την έξοδο στη γραμμή εντολών χρησιμοποιώντας την παρακάτω εντολή:

node namespace.js

Παραγωγή:

The name is :H a r r y

Δηλώσεις περιβάλλοντος σε TypeScript

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

Σύνταξη περιβάλλοντος

Για να δηλώσετε μια μονάδα περιβάλλοντος:

declare module moduleName {
   //code here
}

Το αρχείο ambient πρέπει να αποθηκευτεί ως εξής:

filename.d.ts

Για να χρησιμοποιήσετε το αρχείο όνομα αρχείου.d.ts στο αρχείο .ts πρέπει να το αναφέρετε ως εξής:

/// <reference path="filename.d.ts"/>

Η δήλωση τύπου περιβάλλοντος σε TypeScript αναφέρεται στη βιβλιοθήκη τρίτου μέρους και δηλώνει εκ νέου τις συναρτήσεις που απαιτούνται με τους δικούς τους τύπους. Για παράδειγμα, σκεφτείτε το μικρό JavaΗ βιβλιοθήκη σεναρίων εμφανίζεται παρακάτω.

Τρίτων JavaΑρχείο σεναρίου: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

Έχετε ένα αντικείμενο που ονομάζεται StringChecks το οποίο έχει τις συναρτήσεις isString, convertToUpperCase, convertToLowerCase και convertToStringBold.

Δημιουργία μιας ενότητας περιβάλλοντος στο TypeScript

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

Όνομα αρχείου: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

Ορίζετε μια ενότητα με όνομα TestString και εξάγετε τη διεπαφή StringsFunc. Κάθε υπογραφή δηλώνει τι δέχεται και επιστρέφει η συνάρτηση:

• isString(str: string): boolean – δέχεται μια συμβολοσειρά και επιστρέφει μια λογική τιμή. Η διαβίβαση ενός αριθμού ή οποιουδήποτε άλλου τύπου παράγει ένα σφάλμα χρόνου μεταγλώττισης.
• convertToUpperCase(str: string): string – δέχεται μια συμβολοσειρά και επιστρέφει μια συμβολοσειρά.
• convertToLowerCase(str: string): string – δέχεται μια συμβολοσειρά και επιστρέφει μια συμβολοσειρά.
• convertToStringBold(str: string): συμβολοσειρά – δέχεται μια συμβολοσειρά και επιστρέφει μια συμβολοσειρά.

Δεδομένου ότι η JavaΤο αρχείο script εμφανίζει το όνομα αντικειμένου StringChecks, και τελικά αναφέρουμε το ίδιο όνομα στο αρχείο .d.ts:

declare var StringChecks: TestString.StringsFunc;

Χρήση μιας μονάδας Ambient σε TypeScript

Εδώ είναι το αρχείο test.ts που χρησιμοποιεί το αρχείο περιβάλλοντος tstring.d.ts.

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Μεταγλωττίστε με το tsc test.ts για να δημιουργήσετε το test.js:

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Τώρα μπορείτε να χρησιμοποιήσετε το test.js σε ένα αρχείο HTML μαζί με το αρχείο βιβλιοθήκης testString.js.

<html>
<head>
    <title>Test TypeScript Ambient</title>
    <script src="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

Παραγωγή:

true
HELLO WORLD
hello
<b>Hello World</b>

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

Συχνές Ερωτήσεις