TypeScript Εκμάθηση: Τι είναι, Interface, Enum, Array with Example

Τι είναι TypeScript?

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

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

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

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

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

Μεταβείτε στον επίσημο ιστότοπο του nodejs: https://nodejs.org/en/download/ και κατεβάστε και εγκαταστήστε nodejs σύμφωνα με το λειτουργικό σας σύστημα. Οι λεπτομερείς οδηγίες σχετικά με τον τρόπο λήψης των nodejs είναι διαθέσιμες εδώ: https://www.guru99.com/download-install-node-js.html

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

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

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

Έτσι έχετε εγκατεστημένα τα nodejs v10 και npm 6.

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

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

npm init

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

Τώρα, θα δημιουργήσουμε πακέτο .json που θα αποθηκεύει τις εξαρτήσεις για το έργο μας.

Μόλις ολοκληρωθεί η εγκατάσταση TypeScript ως ακολούθως:

npm -g install typescript

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

npm --save install typescript

Δημιουργήστε φάκελο src/ στον κατάλογο του έργου σας και στον φάκελο 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 όπως φαίνεται:

node_modules/typescript/bin/tsc test.ts

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

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

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

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

Σε αυτή τη TypeScript tutorial, θα εκτελέσουμε το test.js στο nodejs ως εξής:

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

Η τιμή που παράγεται εμφανίζεται κατά την εκτέλεση του test.js

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

Παράδειγμα:

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

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

TypeScript υποστηρίζει όλες τις δυνατότητες του Ecmascript που κυκλοφόρησαν και οι προγραμματιστές μπορούν να χρησιμοποιούν τις ίδιες κατά την κωδικοποίηση. Ωστόσο, δεν υποστηρίζονται όλες οι νέες δυνατότητες σε παλαιότερα προγράμματα περιήγησης, λόγω των οποίων πρέπει να μεταγλωττίσετε τη javascript σε μια παλαιότερη έκδοση του 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 σε αυτό TypeScript φροντιστήριο ως στόχος:

tsc --target ES6  test.ts

test.ts σε test.js

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

addnumbers(10, 20);

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

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

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

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

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

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

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

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

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

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

Εργασία με μεταβλητές στο TypeScript είναι παρόμοιο με το javascript και οι χρήστες που είναι εξοικειωμένοι με το javascript θα το βρουν πολύ εύκολο. Μόνο μεταβλητές όπως ας και 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 variable and will be accessible inside function test, it will not be available outside the function.
    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; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    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(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

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

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

Σύνταξη:

let name="Roy";

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

Παράδειγμα:

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

test(); // throws an error : Uncaught ReferenceError: t is not defined.

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

Επίσης, αν τύχει να δηλώσετε μια μεταβλητή μέσα σε οποιαδήποτε συνάρτηση, ή for-loop, while-loop, TypeScript μπλοκ διακόπτη, θα είναι διαθέσιμο σε εσάς μόνο μέσα σε αυτό το μπλοκ και καμία αναφορά σε αυτό εκτός του μπλοκ και θα προκαλέσει σφάλμα εάν η μεταβλητή χρησιμοποιείται εκτός του μπλοκ. Αυτή είναι η κύρια διαφορά μεταξύ var και αφήστε τη λέξη-κλειδί να δηλωθεί μεταβλητές.

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

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

Σύνταξη:

const name;

Παράδειγμα:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

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

Τύποι σε TypeScript

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

Ακολουθούν οι τύποι:

αριθμός
Σπάγγος
Boolean
Κάθε
Κενός

αριθμός

Λαμβάνει μόνο ακέραιους αριθμούς, πλωτήρες, κλάσματα κ.λπ.

Σύνταξη:

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

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

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

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

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

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

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

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 συμβολοσειρές, πρώτα την τιμή για αναζήτηση στη συμβολοσειρά και, εάν υπάρχει, θα την αντικαταστήσει με τη 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 is the value does not exist in the string.
_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, 0 και 1.

Σύνταξη:

let bflag :boolean = 1;
let status :boolean = true;

Κάθε

Σύνταξη:

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

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

Κενός

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

Σύνταξη:

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

TypeScript Παράταξη

An Παράταξη in TypeScript είναι ένας τύπος δεδομένων όπου μπορείτε να αποθηκεύσετε πολλές τιμές. Ας μάθουμε πώς να δηλώνουμε και να εκχωρούμε τιμές για λειτουργίες Array στο 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 will all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

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

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

Παράδειγμα:

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
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]);
}
Output:
2016
2017
2018
2019

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

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

Output:
2016
2017
2018
2019

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

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

Χρήση βρόχου foreach

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

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

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

ιδιότητα μήκους

=> Εάν θέλετε να μάθετε τον αριθμό των στοιχείων σε έναν πίνακα, μπορείτε να χρησιμοποιήσετε την ιδιότητα μήκος.

Revάλλη μέθοδος

=> Μπορείτε να αντιστρέψετε τη σειρά των στοιχείων σε έναν πίνακα χρησιμοποιώντας μια αντίστροφη μέθοδο.

Μέθοδος ταξινόμησης

=> Μπορείτε να ταξινομήσετε τα στοιχεία σε έναν πίνακα χρησιμοποιώντας τη μέθοδο ταξινόμησης.

Μέθοδος ποπ

=> Μπορείτε να αφαιρέσετε το τελευταίο στοιχείο ενός πίνακα χρησιμοποιώντας μια μέθοδο pop.

Shift μέθοδος

=> Μπορείτε να αφαιρέσετε το πρώτο στοιχείο ενός πίνακα χρησιμοποιώντας τη μέθοδο shift.

Μέθοδος ώθησης

=> Μπορείτε να προσθέσετε αξία ως το τελευταίο στοιχείο του πίνακα.

μέθοδος συμπύκνωσης

=> Μπορείτε να ενώσετε δύο πίνακες σε ένα στοιχείο πίνακα.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
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. Το Class είναι ένα νέο χαρακτηριστικό που προστέθηκε από το ES6 και μετά, τόσο νωρίτερα JavaΤο σενάριο της λειτουργικότητας τύπου κλάσης δοκιμάστηκε χρησιμοποιώντας μια συνάρτηση με λειτουργικότητα πρωτότυπου για την επαναχρησιμοποίηση του κώδικα. Χρησιμοποιώντας την class, μπορείτε να έχετε τον κώδικά μας σχεδόν κοντά σε γλώσσες όπως java, c#, python κ.λπ., όπου ο κώδικας μπορεί να χρησιμοποιηθεί ξανά. Με το χαρακτηριστικό της τάξης σε TypeScript/JavaΣενάριο, κάνει τη γλώσσα πολύ δυνατή.

Καθορισμός τάξης σε 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. Έχει ιδιότητες ηλικία, όνομα και roll_no.

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

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

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

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

constructor () {}

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

Στο παράδειγμα Students της τάξης υπάρχουν μέθοδοι που ορίζονται για παράδειγμα getRollNo(), getName(), getAge() που χρησιμοποιούνται για να δώσουν λεπτομέρειες για τις ιδιότητες roll_no, το όνομα και την ηλικία.

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

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

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

Δημιουργία Instance of Class in TypeScript

Παράδειγμα:

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

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

Σύνταξη TypeScript Τάξη προς JavaΓραφή

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

Command: tsc  Students.ts

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

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 Javascript, η Τάξη μετατρέπεται σε μια αυτο-εκαλούμενη συνάρτηση.

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

Οι κλάσεις μπορούν να κληρονομηθούν χρησιμοποιώντας το επεκτείνουν λέξη-κλειδί σε 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

}

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

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

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

Έχετε δύο τάξεις, Πρόσωπο και Μαθητή. Η κλάση 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);
    }
    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 will όλες τις παραμέτρους ως παραμέτρους βάσεων σε αυτό. Αυτό πρέπει να είναι το πρώτο πράγμα που πρέπει να γίνει μέσα στον κατασκευαστή. Το super θα εκτελέσει τον κατασκευαστή της εκτεταμένης κλάσης.

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

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

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

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

Παράδειγμα:

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;
}

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

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

Παράδειγμα:

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

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

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

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

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
    }
}

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

Ο μεταγλωττισμένος κώδικας σε Javascript θα είναι ως εξής:

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"}); // will get "300px-250px"

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

Ο μεταγλωττισμένος κώδικας σε Javascript θα είναι ως εξής:

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;
    }
}

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

Ο μεταγλωττισμένος κώδικας σε Javascript θα είναι ως εξής:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return 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("");
}

Όπως φαίνεται παραπάνω, οι υπόλοιπες παράμετροι ορίζονται χρησιμοποιώντας (…param-name). η υπόλοιπη παράμετρος είναι ένας πίνακας με πρόθεμα τρεις τελείες. Ο πίνακας θα έχει όλες τις παραμέτρους που του μεταβιβάζονται. Μπορείτε να καλέσετε τη συνάρτηση, όπως φαίνεται στο παρακάτω παράδειγμα:

Παράδειγμα:

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

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

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

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

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

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

Ας ρίξουμε μια ματιά στο παράδειγμα για να κατανοήσουμε την περίπτωση χρήσης της συνάρτησης Arrow:

Παράδειγμα:

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

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

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

Έχετε δημιουργήσει μια ανώνυμη συνάρτηση που έχει μια ιδιότητα αυτή. Αρχικοποίηση βαθμολογίας στο 0 και μια μέθοδος getScore η οποία εσωτερικά έχει setTimeout και σε 1 δευτερόλεπτο κονσόλαει this.score. Η τιμή της κονσόλας δίνει undefined αν και έχετε ορίσει και αρχικοποιήσει το this.score. Το θέμα εδώ είναι με this λέξη-κλειδί. Η συνάρτηση μέσα στο 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();

Έχετε αλλάξει τη συνάρτηση μέσα στο setTimeout σε μια συνάρτηση με βέλος όπως φαίνεται παρακάτω:

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

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

TypeScript Τα ποσά

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

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

Σύνταξη:

enum NameofEnum {
   value1,
   value2,
    ..
}

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

enum Directions {
North,
South,
East,
West
}

Στο παραπάνω παράδειγμα, έχετε ορίσει έναν αριθμό που ονομάζεται Οδηγίες. Η τιμή που δίνεται είναι Βορράς, Νότος, Ανατολή, Δύση. Οι τιμές αριθμούνται από το 0 για την πρώτη τιμή στο enum και στη συνέχεια αυξάνονται κατά 1 για την επόμενη τιμή.

Δηλώστε ένα Enum με μια αριθμητική τιμή

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

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

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

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 στον κώδικά σας:

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

Ο μεταγλωττισμένος κώδικας σε javascript είναι ο εξής:

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]);

Από Javascript δεν υποστηρίζει enums, μετατρέπει το enum σε συναρτήσεις που καλούνται μόνοι τους, όπως φαίνεται παραπάνω.

Δηλώστε ένα Enum με τιμή συμβολοσειράς

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

Παράδειγμα:

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 North

Ο μεταγλωττισμένος κώδικας σε javascript είναι ο εξής:

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;

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

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

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

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

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

export  nameofthevariable or class name or interface name etc

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

Import {nameof thevariable 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”)

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

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

Πελάτης.τσ

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;
        }
    }
}

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

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

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

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 σας επιτρέπει να χρησιμοποιείτε αρχεία javascript τρίτων χρησιμοποιώντας δήλωση περιβάλλοντος. Το πλεονέκτημα αυτής της δυνατότητας είναι ότι δεν χρειάζεται να ξαναγράψετε και ωστόσο να χρησιμοποιήσετε όλες τις δυνατότητες της βιβλιοθήκης στο TypeScript.

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

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

declare module moduleName {
   //code here
}

Το αρχείο περιβάλλοντος πρέπει να αποθηκευτεί ως:

filename.d.ts

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

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

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

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

Παράδειγμα: 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 και converToStringBold.

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

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

Όνομα αρχείου: 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

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

convertToUpperCase(str:string): συμβολοσειρά

=> Αυτό θα λάβει το όρισμα ως συμβολοσειρά και θα επιστρέψει μια συμβολοσειρά. Το ίδιο ισχύει convertToLowerCase(str: string)
: συμβολοσειρά; και convertToStringBold(str: string): συμβολοσειρά
;

Εφόσον στο αρχείο javascript έχετε το όνομα αντικειμένου ως StringChecks, τελικά πρέπει να αναφέρουμε το ίδιο στο αρχείο .d.ts που γίνεται ως:

declare var StringChecks: TestString.StringsFunc;

Χρήση της μονάδας περιβάλλοντος στο TypeScript

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

Παράδειγμα: test.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);

Μεταγλωττίστε TypeScript 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="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

Αυτή είναι η έξοδος που εμφανίζεται στην κονσόλα:

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

TypeScript Ιστορικό

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

Μετά από δύο χρόνια εσωτερικής ανάπτυξης στο Microsoft. TypeScript 0.9, κυκλοφόρησε το 2013
Πρόσθετη υποστήριξη για γενόσημα TypeScript Το 1.0 κυκλοφόρησε στο Build 2014
Τον Ιούλιο του 2014, ένα νέο TypeScript ήρθε ο μεταγλωττιστής που είναι πέντε φορές πιο γρήγορος από την προηγούμενη έκδοση.
Τον Ιούλιο του 2015, υποστήριξη για μονάδες ES6, λέξη-κλειδί namespace, for, of support, decorators.
Τον Νοέμβριο του 2016, προστέθηκε μια δυνατότητα, όπως τύπους κλειδιών και αναζήτησης αντιστοιχισμένων τύπων και υπόλοιπο.
Στις 27 Μαρτίου 2018, προστέθηκαν τύποι υπό όρους, το βελτιωμένο κλειδί με υποστηρίξεις τύπου διασταύρωσης στο TypeScript.

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

Εδώ, είναι σημαντικά πλεονεκτήματα/πλεονεκτήματα της χρήσης TypeScript

Μεγάλο και πολύπλοκο έργο σε JavaΤα σενάρια είναι δύσκολο να κωδικοποιηθούν και να διατηρηθούν.
TypeScript βοηθά πολύ στην οργάνωση του κώδικα και όμως απαλλαγεί από τα περισσότερα λάθη κατά τη μεταγλώττιση.
TypeScript υποστηρίζει βιβλιοθήκες JS & API Documentation
Είναι προαιρετικά πληκτρολογημένη γλώσσα σεναρίου
TypeScript Ο κώδικας μπορεί να μετατραπεί σε απλό JavaΚώδικας σεναρίου
Καλύτερη δόμηση κώδικα και αντικειμενοστρεφείς τεχνικές προγραμματισμού
Επιτρέπει την καλύτερη υποστήριξη εργαλείων χρόνου ανάπτυξης
Μπορεί να επεκτείνει τη γλώσσα πέρα από τους τυπικούς διακοσμητές, async/wait

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

Εδώ, είναι μερικές από τις πιο κοινές εφαρμογές του TypeScript:

Η γωνιακή ομάδα χρησιμοποιεί TypeScript.
Εγκατάσταση NodeJS και NPM
TypeScript Εγκατάσταση
Μεταγλωττίστε TypeScript κωδικός σε Javascript
Εκτελέστε τον κώδικα χρησιμοποιώντας το Nodejs
Εκτέλεση Javascript στο πρόγραμμα περιήγησης
Μεταγλωττίστε TypeScript κωδικός σε Javascript χρησιμοποιώντας την έκδοση EcmaScript
Μπορείτε εύκολα να μεταγλωττίσετε κώδικα γραμμένο σε TypeScript προς την JavaΣενάριο που χρησιμοποιεί NodeJS.
Έτσι για να συνεργαστείτε TypeScript πρέπει πρώτα να κατεβάσετε και να εγκαταστήσετε το NodeJS.

Περίληψη

TypeScript είναι ένα υπερσύνολο του JavaΓραφή. TypeScript είναι καθαρά αντικειμενοστραφή γλώσσα προγραμματισμού που υποστηρίζει κλάσεις, διεπαφές κ.λπ.
TypeScript υποστηρίζει όλες τις δυνατότητες του Ecmascript που κυκλοφόρησαν και οι προγραμματιστές μπορούν να χρησιμοποιούν τις ίδιες κατά την κωδικοποίηση.
Οι μεταβλητές χρησιμοποιούνται για την αποθήκευση τιμών και η τιμή μπορεί να είναι συμβολοσειρά, αριθμός, Boolean ή έκφραση.
In TypeScript, ο τύπος μιας μεταβλητής ορίζεται μόνο στην αρχή και μέσω της εκτέλεσης, πρέπει να διατηρήσει τον ίδιο τύπο τυχόν αλλαγές σε αυτήν θα οδηγήσουν σε σφάλμα χρόνου μεταγλώττισης κατά τη μεταγλώττιση σε javascript.
Ένας πίνακας μέσα TypeScript είναι ένας τύπος δεδομένων όπου μπορείτε να αποθηκεύσετε πολλές τιμές.
Το Class είναι ένα νέο χαρακτηριστικό που προστέθηκε από το ES6 και μετά, τόσο νωρίτερα JavaΤο σενάριο της λειτουργικότητας τύπου κλάσης δοκιμάστηκε χρησιμοποιώντας μια συνάρτηση με λειτουργικότητα πρωτότυπου για την επαναχρησιμοποίηση του κώδικα.
TypeScript υποστηρίζει δημόσιους, ιδιωτικούς και προστατευμένους τροποποιητές πρόσβασης στις μεθόδους και τις ιδιότητές σας.
Ένα από τα βασικά χαρακτηριστικά του TypeScript είναι διεπαφές. Η διεπαφή είναι ένα σύνολο κανόνων που ορίζεται ο οποίος πρέπει να εφαρμοστεί από την οντότητα που τη χρησιμοποιεί.
Οι συναρτήσεις είναι ένα σύνολο οδηγιών που εκτελούνται για την εκτέλεση μιας εργασίας.
TypeScript Το Enum είναι ένα αντικείμενο που έχει μια συλλογή σχετικών τιμών αποθηκευμένη μαζί.

Τι είναι TypeScript?

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

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

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

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

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

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

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

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

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

Τύποι σε TypeScript

αριθμός

Σπάγγος

Boolean

Κάθε

Κενός

TypeScript Παράταξη

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

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

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

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

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

Χρήση βρόχου foreach

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

ιδιότητα μήκους

Revάλλη μέθοδος

Μέθοδος ταξινόμησης

Μέθοδος ποπ

Shift μέθοδος

Μέθοδος ώθησης

μέθοδος συμπύκνωσης

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

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

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

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

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

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

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

Τάξη μέσα TypeScript

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

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

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

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

Δημιουργία Instance of Class in TypeScript

Σύνταξη TypeScript Τάξη προς JavaΓραφή

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

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

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

Διεπαφή σε TypeScript

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

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

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

Διεπαφή υλοποίησης τάξης

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

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

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

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

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

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

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

TypeScript Τα ποσά

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

Δηλώστε ένα Enum με μια αριθμητική τιμή

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

Δηλώστε ένα Enum με τιμή συμβολοσειράς

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

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

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

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

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

Module Loader

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

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

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

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

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

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

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

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

Το αρχείο περιβάλλοντος πρέπει να αποθηκευτεί ως: