TypeScript Tutorial: Ce este, Interfață, Enum, Array cu Exemplu

Ce Este TypeScript?

TypeScript este un superset de JavaScenariul. TypeScript este un limbaj de programare pur orientat pe obiecte care acceptă clase, interfețe etc. Este un limbaj open-source dezvoltat de Microsoft care compilează static codul la JavaScenariul. Poate rula cu ușurință într-un browser sau Nodejs.

Toate cele mai recente caracteristici lansate pentru ECMAScript sunt acceptate în TypeScript iar pe lângă aceasta TypeScript are propriile sale caracteristici orientate pe obiecte, cum ar fi interfețele, declarația ambientală, moștenirea clasei etc., ceea ce ajută la dezvoltarea unei aplicații mari, care altfel ar fi dificil de realizat în JavaScenariu.

Cum se descarcă și se instalează TypeScript

Iată procesul pas cu pas pentru descărcare și instalare TypeScript:

Pasul 1) Descărcați și instalați Nodejs

Accesați site-ul oficial al nodejs: https://nodejs.org/en/download/ și descărcați și instalați nodejs conform sistemului dvs. de operare. Instrucțiunile detaliate despre cum să descărcați nodejs sunt disponibile aici: https://www.guru99.com/download-install-node-js.html

Pasul 2) Verificați versiunea Nodejs și npm

Pentru a verifica dacă nodejs și npm sunt instalate, verificați versiunea în linia de comandă.

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

D:\typeproject>npm --version
6.4.1

Deci aveți instalate nodejs v10 și npm 6.

Pas 3) TypeScript Instalare

Creați directorul de proiect typeproject/ și rulați npm init, așa cum se arată în comanda de mai jos:

npm init

Pasul 4) Porniți instalarea

Acum, vom crea pachetul .json care va stoca dependențele pentru proiectul nostru.

Odată terminat instalarea TypeScript după cum urmează:

npm -g install typescript

Comanda de mai sus se va ocupa de instalare TypeScript. Adăugarea „-g” la instalarea npm se va instala TypeScript la nivel global. Avantajul utilizării -g este că veți putea folosi TypeScript tsk comandă din orice director, deoarece este instalat global. În cazul în care nu doriți să instalați TypeScript la nivel global, utilizați comanda de mai jos:

npm --save install typescript

Creați folderul src/ în directorul proiectului și în folderul src/ create TypeScript fișier test.ts și scrieți-vă codul.

Exemplu: test.ts

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

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

Compila TypeScript codul către Javascript

Pentru a compila codul de mai sus, utilizați următoarea comandă:

If TypeScript este instalat la nivel global, utilizați comanda de mai jos:

tsc test.ts

If TypeScript este instalat local în proiectul dvs. pe care trebuie să îl utilizați TypeScript din node_modules așa cum se arată:

node_modules/typescript/bin/tsc test.ts

Comanda de mai sus va crea un fișier test.js și va avea codul compilat în javascript.

Exemplu: test.js

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

Executa Javascript folosind Nodejs

În acest TypeScript tutorial, vom executa test.js în nodejs după cum urmează:

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

Valoarea consolată este afișată pe execuția test.js

Executa JavaScript în Browser

Exemplu:

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

Compila TypeScript codul către Javascript folosind versiunea EcmaScript

TypeScript acceptă toate caracteristicile Ecmascript lansate, iar dezvoltatorii le pot folosi în timp ce codifică. Dar nu toate noile funcții sunt compatibile cu browserele mai vechi, din cauza cărora trebuie să compilați javascript într-o versiune mai veche a Ecmascript. TypeScript oferă opțiuni de compilare care pot face acest lucru.

Exemplu: test.ts

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

addnumbers(10, 20);

Pentru a compila la versiunea ES aleasă de dvs., puteți utiliza opțiunea target sau t din comandă, după cum urmează:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

În mod implicit, ținta este ES3. În cazul în care doriți să o schimbați, puteți utiliza comanda de mai sus.

În prezent vom folosi ES6 în acest sens TypeScript tutorial ca țintă:

tsc --target ES6  test.ts

test.ts pentru a testa.js

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

addnumbers(10, 20);

Codul rămâne așa cum este, deoarece funcția săgeată pe care ați folosit-o este o caracteristică ES6 și aceeași când este compilată în ES6 nu este modificată.

În mod implicit, ținta este ES3, așa că fără țintă obțineți test.js ca:

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

Deci aici, săgeata grăsime este schimbată într-o funcție anonimă normală.

Variabile în TypeScript

Variabile sunt folosite pentru a stoca valori, iar valoarea poate fi un șir, un număr, boolean sau o expresie. Când vine vorba de variabile în TypeScript, sunt asemănătoare cu JavaScenariu. Deci, să învățăm să declarăm și să atribuim valoare variabilelor în TypeScript.

Variabilele nu pot fi folosite în cod fără definire. Pentru a declara o variabilă puteți folosi

a fost cuvânt cheie,

lăsa cuvinte cheie

CONST cuvinte cheie

Lucrul cu variabile în TypeScript este similar cu javascript, iar utilizatorii familiarizați cu javascript îl vor găsi foarte ușor. Doar variabile ca lăsa si CONST nu sunt foarte folosite în comparație cu a fost.

Declararea variabilelor folosind var

Sintaxă:

var firstname = "Roy";

Să aruncăm o privire la câteva TypeScript exemple pentru a înțelege funcționarea cuvântului cheie var și, de asemenea, domeniul de aplicare al variabilelor declarate folosind a fost cuvinte cheie.

Exemplu 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

Exemplu 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.

Exemplu 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.

Declararea variabilelor folosind let

TypeScript sintaxa pentru let este următoarea:

Sintaxă:

let name="Roy";

Funcționarea lăsa variabila este aproape aceeași ca a fost, dar cu o mică diferență și va înțelege același lucru folosind an TypeScript exemplu.

Exemplu:

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

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

Mai sus TypeScript exemplu aruncă o eroare, dar același lucru ar fi funcționat bine dacă ar fi fost cu a fost cuvânt cheie. Utilizarea variabilelor lăsa sunt disponibile în domeniul blocului declarat, de exemplu, variabila t este disponibilă numai în interiorul blocului if și nu pentru întreaga funcție.

De asemenea, dacă se întâmplă să declarați o variabilă în interiorul oricărei funcție, sau bucla for, bucla while, TypeScript bloc comutator, acesta va fi disponibil numai în interiorul blocului respectiv și nicio referire la acesta în afara blocului și va genera o eroare dacă variabila este utilizată în afara blocului. Aceasta este principala diferență dintre variabilele declarate de cuvinte cheie var și let.

Declararea variabilelor folosind const

Const înseamnă variabile constante. Ele sunt similare cu variabilele let, cu singura diferență este că, odată ce i se atribuie o valoare, nu poate fi schimbată.

Sintaxă:

const name;

Exemplu:

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

Deci, utilizatorii pot folosi variabilele const numai în cazurile în care știu că nu trebuie să modifice valorile alocate acestora.

Introduceți TypeScript

TypeScript este un limbaj puternic tipizat, în timp ce javascript nu este. O variabilă care are o valoare definită ca șir poate fi schimbată într-un număr fără probleme Javascript. Același lucru nu este tolerat în TypeScript. În TypeScript, tipul unei variabile este definit doar la început și, prin execuție, trebuie să mențină același tip, orice modificare a acesteia va duce la o eroare de compilare în timpul compilării la javascript.

Următoarele sunt tipurile:

Număr
Şir
boolean
Orice
Gol

Număr

Ia doar numere întregi, flotanți, fracții etc.

Sintaxă:

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

Iată câteva metode importante care pot fi utilizate pentru tipurile de numere:

toFixed() – va converti numărul într-un șir și va păstra zecimale date metodei.

toString () – această metodă va converti numărul într-un șir.

valoarea() – această metodă va restitui valoarea primitivă a numărului.

la Precizie() – această metodă va formata numărul la o lungime specificată.

Exemplu: cu toate metodele String

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

Şir

Șir: numai valori șir

Sintaxă:

let str :string = "hello world";

Iată câteva metode importante care pot fi utilizate pe tipurile String:

împărţi() – această metodă va împărți șirul într-o matrice.
charAt() – această metodă va da primul caracter pentru indexul dat.
Index de() – această metodă va da poziția primei apariții pentru valoarea dată acesteia.
Înlocui () – această metodă ia 2 șiruri, mai întâi valoarea de căutat în șir și dacă este prezentă o va înlocui pe a doua și va da un șir nou înapoi.
Tunde () – această metodă va elimina spațiile albe de pe ambele părți ale șirului.
substr() – această metodă va da o parte din șir care va depinde de poziția dată ca început și sfârșit.
subcord() – această metodă va da o parte din șir care va depinde de poziția dată ca început și sfârșit. Caracterul din poziția finală va fi exclus.
laMajuscule() -va converti șirul în majuscule
toLowerCase() – va converti șirul în minuscule.

Exemplu:

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

Va accepta valori logice precum adevărat, fals, 0 și 1.

Sintaxă:

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

Orice

Sintaxă:

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

Variabilele declarate folosind Orice type poate lua variabila ca șir, număr, matrice, boolean sau void. TypeScript nu va arunca nicio eroare de compilare; aceasta este similară cu variabilele declarate în JavaScenariul. Folosiți orice variabilă de tip numai atunci când nu sunteți sigur de tipul de valoare care va fi asociată cu acea variabilă.

Gol

Tipul Void este folosit în mare parte ca tip de returnare pentru o funcție care nu are nimic de returnat.

Sintaxă:

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

TypeScript Mulțime

An Mulțime in TypeScript este un tip de date în care puteți stoca mai multe valori. Să învățăm cum să declarăm și să atribuim valori pentru operațiunile Array în TypeScript.

Întrucât TypeScript este un limbaj puternic tipizat, trebuie să spuneți care va fi tipul de date al valorilor dintr-o matrice. În caz contrar, îl va considera de tip oricare.

Declarați și inițializați o matrice

Sintaxă:

let nameofthearray : Array<typehere>

Exemplu

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.

Diferite moduri de a accesa elemente dintr-un Array

Pentru a obține elementele dintr-o matrice, valorile pornesc de la indicele 0 până la lungimea matricei.

Exemplu:

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

De asemenea, puteți obține elementele dintr-o matrice folosind TypeScript pentru buclă după cum se arată mai jos:

Utilizarea TypeScript pentru bucla

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

Folosind bucla for-in

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

Output:
2016
2017
2018
2019

Folosind bucla for-of

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

Folosind bucla foreach

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

TypeScript Metode de matrice

TypeScript Obiectul Array are multe proprietăți și metode care ajută dezvoltatorii să gestioneze tablourile cu ușurință și eficientă. Puteți obține valoarea unei proprietăți specificând arrayname.property și rezultatul unei metode prin specificarea array name.method().

proprietatea lungimii

=> Dacă doriți să cunoașteți numărul de elemente dintr-o matrice, puteți utiliza proprietatea length.

Revmetoda erse

=> Puteți inversa ordinea elementelor dintr-o matrice folosind o metodă inversă.

Metoda de sortare

=> Puteți sorta articolele dintr-o matrice folosind metoda sortării.

Metoda pop

=> Puteți elimina ultimul element dintr-o matrice folosind o metodă pop.

Shift metodă

=> Puteți elimina primul element dintr-o matrice folosind metoda shift.

Metoda push

=> Puteți adăuga valoare ca ultimul element al matricei.

metoda concat

=> Puteți uni două matrice într-un singur element de matrice.

Exemplu pentru proprietatea lungimii

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

Exemplu pentru metoda inversă

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"]

Exemplu pentru metoda de sortare

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"]

Exemplu pentru metoda 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

Exemplu pentru metoda schimbului

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

Exemplu pentru metoda push

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

Exemplu pentru metoda 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]

Clasa în TypeScript

TypeScript este un superset de JavaScript, deci orice se poate face în JavaScriptul este, de asemenea, posibil în TypeScript. Clasa este o funcție nouă adăugată de la ES6 încolo, deci mai devreme JavaScript-ul funcționalității de tip de clasă a fost încercat folosind o funcție cu funcționalitate prototip pentru a reutiliza codul. Folosind class, puteți avea codul nostru aproape aproape de limbaje precum java, c#, python etc., unde codul poate fi reutilizat. Cu caracteristica de clasă în TypeScript/JavaScript, face limbajul foarte puternic.

Definirea unei clase în TypeScript

Iată o sintaxă de bază a clasei în TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

Exemplu: Un exemplu de lucru pe 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;
    }
}

În exemplul de mai sus, aveți o clasă numită Studenți. Are proprietăți age, name și roll_no.

Constructor în a TypeScript Clasă

Exemplul de clasă Students pe care l-am definit mai sus, are un constructor așa cum se arată mai jos:

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

Metoda constructorului are parametri age, name și roll_no. Constructorul se va ocupa de inițializarea proprietăților atunci când clasa este apelată. Proprietățile sunt accesate folosind acest cuvânt cheie. Exemplu this.age pentru a accesa proprietatea age, this.roll_no pentru a accesa roll_no etc. Puteți avea, de asemenea, un constructor implicit, așa cum se arată mai jos:

constructor () {}

Metode în interiorul a TypeScript Clasă

Exemplul clasei Students există metode definite, de exemplu getRollNo(), getName(), getAge() care sunt folosite pentru a oferi detalii despre proprietăți roll_no, nume și vârstă.

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

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

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

Crearea instanței de clasă în TypeScript

Exemplu:

In TypeScript pentru a crea o instanță a unei clase trebuie să utilizați operatorul nou. Când creăm o instanță a unei clase folosind operatorul nou, obținem obiectul care poate accesa proprietățile și metodele clasei, așa cum se arată mai jos:

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

Compilarea TypeScript Clasa la JavaScenariu

Puteți utiliza comanda tsc, așa cum se arată mai jos, pentru a compila Javascript.

Command: tsc  Students.ts

Rezultatul Javascript codul de compilare este așa cum se arată mai jos:

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, Clasa este convertită într-o funcție auto-invocată.

Moștenirea de clasă

Clasele pot fi moștenite folosind extinde cuvânt cheie în TypeScript.

Sintaxa moștenirii clasei:

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

}

clasa B va putea împărtăși clasa a metode si proprietati.

Iată un exemplu de lucru al unei clase care utilizează Moștenirea

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

Ai două clase, Persoană și Student. Clasa Student extinde Person, iar obiectul creat pe Student poate accesa propriile metode și proprietăți, precum și clasa pe care a extins-o.

Acum să mai adăugăm câteva modificări la clasa de mai sus.

Exemplu:

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

Modificările pe care le-ați adăugat în comparație cu exemplul anterior sunt că există un constructor definit în clasa Student. Constructorul trebuie să ia aceiași parametri ca și clasa de bază și să adauge orice parametri suplimentari, dacă există.

In TypeScript trebuie să apelați super will toți parametrii ca parametrii de bază din el. Acesta trebuie să fie primul lucru care trebuie făcut în interiorul constructorului. Super va executa constructorul clasei extinse.

Accesați modificatorii în TypeScript

TypeScript acceptă modificatori de acces public, privat și protejat la metodele și proprietățile dvs. În mod implicit, dacă nu se dau modificatori de acces, metoda sau proprietatea este considerată publică și vor fi ușor accesibile din obiectul clasei.

În cazul modificatorilor de acces privat, aceștia nu sunt disponibili pentru a fi accesați din obiectul clasei și sunt menționați să fie utilizați numai în interiorul clasei. Ele nu sunt disponibile pentru clasa moștenită.

În cazul modificatorilor de acces protejat, aceștia sunt menționați să fie utilizați în interiorul clasei și a clasei moștenite și nu vor fi accesibili din obiectul clasei.

Exemplu:

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

Privat: proprietățile sau metodele nu pot fi accesate de obiectul clasei și de asemenea de clasa derivată, ele sunt menite să fie utilizate intern în interiorul clasei.
Protejat: De asemenea, proprietățile și metodele nu pot fi accesate de obiectul creat. Ele sunt accesibile din interiorul clasei și disponibile pentru clasa care o extinde.
f) Public: proprietățile și metodele sunt declarate fără niciun cuvânt cheie. Ele sunt ușor de accesat folosind obiectul clasei din exterior.

Interfață în TypeScript

Una dintre caracteristicile de bază ale TypeScript este interfețe. Interfața este un set de reguli definite care trebuie implementate de entitatea care o folosește. Entitatea poate fi o clasă, o funcție sau o variabilă. O interfață poate fi formată din proprietăți și metode. Puteți defini proprietățile ca opționale folosind „?” sintaxa pentru acea proprietate sau metoda. Interfața adaugă o verificare puternică a tipului pentru orice funcție, variabilă sau clasă care implementează interfața.

Sintaxa unei interfețe în TypeScript

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

Ați definit o interfață numită Dimension care are proprietăți lățime și înălțime și ambele au tipul ca șir.

Acum această interfață poate fi implementată de o variabilă, o funcție sau o clasă. Iată un exemplu de implementare a variabilei interfeței Dimension.

Exemplu:

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

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

Semnătura interfeței Dimension are lățime și înălțime și ambele sunt obligatorii. În cazul în care în timpul implementării interfeței, oricare dintre proprietăți este omisă sau tipul este schimbat, va da o eroare de timp de compilare în timpul compilarii codului în javascript.

Codul de mai sus, atunci când este compilat în javascript, arată după cum urmează:

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

Să vedem acum cum să folosim o interfață cu o funcție.

Utilizarea interfeței pe o funcție ca tip de returnare

Exemplu:

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

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

În exemplul de mai sus, interfața Dimension este implementată pe funcția getDimension() ca tip de returnare. Tipul returnat de getDimension() trebuie să se potrivească cu proprietățile și tipul menționate pentru Interface Dimension.

Codul compilat pentru Javascript va fi după cum urmează:

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

În timpul compilării, dacă tipul de returnare nu se potrivește cu interfața, va genera o eroare.

Interfață ca parametru de funcție

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"

Deci, exemplul de mai sus, ați folosit Interface Dimension ca parametru al funcției getDimension(). Când apelați funcția, trebuie să vă asigurați că parametrul transmis acesteia se potrivește cu regula de interfață definită.

Codul compilat pentru Javascript va fi după cum urmează:

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

Interfață de implementare a clasei

Pentru a utiliza interfața cu o clasă, trebuie să utilizați cuvântul cheie ustensile.

Sintaxă pentru clasă care implementează o interfață:

class NameofClass implements InterfaceName {
}

Următorul exemplu arată funcționarea interfeței cu clasa.

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

În exemplul de mai sus, ați definit interfața Dimension cu proprietăți lățime și înălțime ambele de tip șir și o metodă numită getWidth() care are valoarea returnată ca șir.

Codul compilat pentru Javascript va fi după cum urmează:

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

Functioneaza in TypeScript

Funcțiile sunt un set de instrucțiuni efectuate pentru a îndeplini o sarcină. În Javascript, majoritatea codului este scris sub formă de funcții și joacă un rol major. În TypeScript, aveți la dispoziție clasă, interfețe, module, spații de nume, dar totuși, funcțiile joacă un rol important. Diferența dintre funcția în javascript și TypeScript funcția este tipul de returnare disponibil cu TypeScript Funcția.

JavaFuncția de script:

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

TypeScript funcţie:

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

În funcțiile de mai sus se adaugă numele funcției, parametrii sunt a1 și b1 ambele au un tip ca număr, iar tipul returnat este, de asemenea, un număr. Dacă se întâmplă să transmiteți un șir de caractere funcției, aceasta va genera o eroare de compilare în timp ce îl compilați la JavaScenariul.

Efectuarea apelului la funcția: add

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'.

Parametrii a1 si b1 sunt parametri obligatorii și vor arunca o eroare dacă nu sunt primite în acest mod. De asemenea, tipul param și tipul returnat sunt foarte importante și nu se pot schimba odată definite.

Parametri opționali pentru o funcție

În javascript, toți parametrii funcțiilor sunt opționali și considerați nedefiniti dacă nu sunt transmise. Dar nu același lucru este cazul TypeScript, odată ce definiți parametrii, trebuie să îi trimiteți și pe ei, dar în cazul în care doriți să păstrați orice parametru opțional, puteți face acest lucru folosind? față de numele paramului, așa cum se arată mai jos:

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.

Vă rugăm să rețineți că parametrii opționali trebuie definiți într-o funcție doar la ultima, nu puteți avea primul parametru ca opțional și al doilea parametru ca obligatoriu. Când apelați funcția cu un compilator de parametri va arunca o eroare. Deci este necesar să păstrați parametrii opționali la sfârșit.

Atribuiți valori implicite la Params

Puteți aloca valori implicite parametrilor așa cum se arată mai jos:

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

Similar cu parametrii opționali, și aici parametrii inițializați implicit trebuie păstrați la sfârșitul unei funcții.

Parametrii de odihnă

Ai văzut cum TypeScript gestionează parametrii obligatorii, parametrii opționali și parametrii inițializați cu valoarea implicită. Acum, vom arunca o privire asupra parametrilor de odihnă. Parametrii de odihnă sunt un grup de parametri opționali definiți împreună și sunt definiți folosind trei puncte (…) urmat de numele parametrului, care este o matrice.

Sintaxă pentru parametrii Rest:

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

După cum se arată mai sus, restul parametrilor sunt definiți folosind (…param-name); restul param este o matrice prefixată cu trei puncte. Matricea va avea toți parametrii trecuți. Puteți apela funcția, așa cum se arată în exemplul de mai jos:

Exemplu:

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

Funcții săgeți

O funcție săgeată este una dintre caracteristicile importante lansate în ES6 și este disponibilă în TypeScript prea. Sintaxa funcției săgeată are o săgeată groasă în ea, datorită căreia funcția este numită funcție săgeată.

Sintaxă a funcției săgeată:

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

La ce folosește funcția săgeată?

Să aruncăm o privire la exemplu pentru a înțelege cazul de utilizare al funcției Arrow:

Exemplu:

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

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

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

Ați creat o funcție anonimă care are proprietatea aceasta. Score initialize la 0 și o metodă getScore care are intern un setTimeout, iar în 1 secundă consolă this.score. Valoarea consolată oferă undefined, deși aveți acest.score definit și inițializat. Problema aici este cu this cuvânt cheie. Funcția din setTimeout are propriul ei acest lucru și încearcă să trimită scorul intern și, deoarece nu este definită, dă nedefinit.

Același lucru poate fi îngrijit folosind funcția săgeată, așa cum se arată mai jos:

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

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

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

Ați schimbat funcția din setTimeout la o funcție săgeată, așa cum se arată mai jos:

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

O funcție săgeată nu are propria sa acest definit și își împărtășește părintele acest, astfel încât variabilele declarate în exterior sunt ușor accesibile folosind aceasta în interiorul unei funcție săgeată. Ele sunt utile datorită sintaxei mai scurte, precum și pentru apeluri inverse, handlere de evenimente, funcții de sincronizare din interior etc.

TypeScript Enumere

TypeScript Enum este un obiect care are o colecție de valori înrudite stocate împreună. Javascript nu acceptă enumerari. Cele mai multe dintre limbaj de programare ca Java, C, C++ sprijină TypeScript Enum și este disponibil și cu TypeScript prea. Enumările sunt definite folosind cuvântul cheie enum.

Cum se declară o Enum?

Sintaxă:

enum NameofEnum {
   value1,
   value2,
    ..
}

Exemplu: Enum

enum Directions {
North,
South,
East,
West
}

În exemplul de mai sus, ați definit o enumerare numită Direcții. Valoarea dată este Nord, Sud, Est, Vest. Valorile sunt numerotate de la 0 pentru prima valoare din enumerare și ulterior se incrementează cu 1 pentru următoarea valoare.

Declarați o Enum cu o valoare numerică

În mod implicit, dacă unei enum nu i se dă nicio valoare, o consideră un număr care începe de la 0. Următorul exemplu arată o enumerare cu o valoare numerică.

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

De asemenea, puteți atribui o valoare de pornire enumerației, iar următoarele valori de enumerare vor primi valorile incrementate. De exemplu:

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

Acum, valoarea enumerată North începe cu 5, astfel încât South va obține valoarea 6, Est = 7 și Vest = 8.

De asemenea, puteți atribui valori la alegere în loc să le luați pe cele implicite. De exemplu:

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

Cum se accesează o Enum?

Următorul exemplu arată cum să utilizați Enum în codul dvs.:

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

Codul compilat în javascript este următorul:

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

Întrucât Javascript nu acceptă enumări, transformă enumerarea într-o funcție auto-invocată, așa cum se arată mai sus.

Declarați o Enum cu o valoare șir

Puteți atribui valori ale șirurilor la alegere, așa cum se arată în exemplul de mai jos:

Exemplu:

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

Codul compilat în javascript este următorul:

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

În ce sunt modulele TypeScript?

Fișierele create în TypeScript au acces global, ceea ce înseamnă că variabilele declarate într-un fișier sunt ușor de accesat în alt fișier. Această natură globală poate provoca conflicte de cod și poate cauza probleme cu execuția în timpul execuției. Aveți o funcționalitate de export și importare a modulelor care poate fi folosită pentru a evita conflictele între variabile globale și funcții. Această caracteristică este disponibilă în JavaScript cu lansare ES6 și, de asemenea, acceptat în TypeScript.

De ce aveți nevoie de module în TypeScript?

Următorul exemplu arată problema fără module:

Exemplu test1.ts

let age : number = 25;

Ați definit o vârstă variabilă a numărului de tip în test1.ts.

Exemplu test2.ts

În fișierul test2.ts puteți accesa cu ușurință variabila vârstă definit în test1.ts și, de asemenea, modificați-l după cum se arată mai jos:

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

Deci, cazul de mai sus poate crea o mulțime de probleme, deoarece variabilele sunt disponibile la nivel global și pot fi modificate.

cu Panouri, codul scris rămâne local pentru fișier și nu poate fi accesat în afara acestuia. Pentru a accesa orice din fișier, acesta trebuie să fie exportat folosind cuvântul cheie export. It este utilizat atunci când doriți ca variabila, clasa, funcția sau interfața să fie utilizate într-un alt fișier. Import este utilizat atunci când doriți să accesați și variabila, clasa sau interfața sau funcția exportată. Făcând astfel, codul este scris rămâne intact în fișier și chiar dacă definiți aceleași nume de variabile, acestea nu sunt amestecate și se comportă local cu fișierul în care sunt declarate.

Folosind Export și Import

Există multe modalități de a exporta și de a importa. Deci, vom discuta aici despre sintaxa care este folosită cel mai mult.

Sintaxa pentru import și export 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"

Iată un exemplu de lucru folosind export și import.

Exemplu:

test1.ts

export let age: number = 25;

Cuvântul cheie Export este folosit pentru a partaja variabila de vârstă într-un alt fișier.

test2.ts

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

Cuvântul cheie Import este folosit pentru a accesa vârstă variabilă și trebuie să specificați locația fișierului așa cum se arată mai sus.

Sintaxă pentru import și export 2:

Există o altă modalitate de a exporta și de a importa, iar sintaxa pentru același lucru este cea prezentată mai jos:

export = classname;

import classname = require(“file path of modulename”)

Când utilizați export = pentru a vă exporta modulul, importul trebuie să folosească require(„calea fișierului numemodulului”) pentru a-l importa.

Iată un exemplu de lucru care arată cazul de mai sus:

Client.ts

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

Încărcător de module

Modulele nu pot funcționa singure, așa că aveți nevoie de încărcătorul de module pentru a localiza dependențele de import, așa cum ați văzut în TypeScript exemplele prezentate mai sus. Încărcătorul de module disponibil este CommonJS pentru nodejs și Require.js pentru a rula în browser.

Pentru a compila codul folosind modulul CommonJS, utilizați următoarea comandă:

tsc --module commonjs testCustomer.ts

Pentru a compila codul folosind modulul Requirejs, utilizați următoarea comandă:

tsc --module amd testCustomer.ts

Fișierele dependente vor fi convertite în fișierul js cu comanda de mai sus.

Exemplu testCustomer.ts pentru a testCustomer.js folosind Requirejs

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

Exemplu Customer.ts către Customer.js folosind 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;
});

Pentru a-l testa folosind require.js, trebuie să creați un fișier numit main.js, care are referință la dependențe așa cum se arată.

Iată structura folderului:

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>

Spații de nume în TypeScript

Namespace are practic o colecție de clase, interfețe, variabile, funcții împreună într-un singur fișier.

Sintaxa spațiului de nume

namespace name{

export class {
}

export interface {
}

export const constname;

}

Codul aferent este disponibil sub un singur spațiu de nume.

Exemplu de lucru cu spațiul de nume: 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;
        }
    }
}

Numele spațiului de nume este StudentSetup, ați adăugat o interfață StudDetails, funcția addSpace și o clasă numită Student.

Accesarea spațiului de nume

Următorul este codul în care utilizați spațiul de nume StudentSetup.

testStudentSetup.ts

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

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

Clasa, interfața, o funcție disponibilă în interiorul unui spațiu de nume trebuie să fie referite folosind numele exemplului de spațiu de nume StudentSetup.addSpace pentru a accesa funcția, StudentSetup.Student pentru a accesa clasa.

Puteți compila ambele fișiere într-un singur js, așa cum se arată mai jos:

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

Verificați rezultatul în linia de comandă folosind comanda de mai jos:

node namespace.js

Va afișa rezultatul ca:

The name is: H a r r y

Declarații de mediu în TypeScript

TypeScript vă permite să utilizați fișiere javascript terță parte folosind declarația ambientală. Avantajul acestei caracteristici este că nu trebuie să rescrieți și totuși să utilizați toate caracteristicile bibliotecii TypeScript.

Sintaxa ambientală

Pentru a declara modulul ambiental:

declare module moduleName {
   //code here
}

Fișierul ambiental trebuie salvat ca:

filename.d.ts

Pentru a utiliza fișierul nume de fișier.d.ts în .ts-ul dvs. trebuie să îl referiți ca:

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

Declarația de tip ambiental în TypeScript va avea o referință la biblioteca terță parte și va re-declara funcțiile necesare cu propriul tip. De exemplu, considerați că aveți o bibliotecă javascript mică, așa cum se arată mai jos:

Terță parte JavaFișier script: testString.js

Exemplu: 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();
    }
};

Aveți un obiect numit StringChecks care are funcții precum isString, convertToUpperCase, convertToLowerCase și converToStringBold.

Crearea Modulului Ambient în TypeScript

Acum va crea un modul ambiental care va avea referire la funcțiile js de mai sus și, de asemenea, va adăuga verificarea tipului conform cerințelor noastre.

Nume fișier: 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;

Trebuie să definiți un nume de modul ca TestString și să aveți exportat interfața StringsFunc.

isString(str: șir): boolean

=> Acesta va lua param ca șir, iar tipul returnat va fi boolean. Când utilizați în fișierul dvs. .ts, în cazul în care se întâmplă să treceți parametrul ca număr sau orice altceva decât șir, vă va da o eroare de tip de compilare.

convertToUpperCase(str:string): șir

=> Acesta va lua argumentul ca șir și va returna un șir. Același lucru este valabil și pentru convertToLowerCase(str: șir)
: sfoară; și convertToStringBold(str: șir): șir
;

Deoarece în fișierul javascript aveți numele obiectului ca StringChecks, în cele din urmă trebuie să facem referire la același lucru în fișierul .d.ts, care se face ca:

declare var StringChecks: TestString.StringsFunc;

Folosind modulul Ambient în TypeScript

Acum, aici este fișierul test.ts unde va folosi fișierul ambiental tstring.d.ts

Exemplu: 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);

Compila TypeScript tsc test.ts la 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);

Acum puteți utiliza test.js în fișierul html și, de asemenea, fișierul de bibliotecă testString.js

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

Aceasta este ieșirea văzută în consolă:

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

TypeScript Istorie

Să vedem repere importante din istoria TypeScript:

După doi ani de dezvoltare internă la Microsoft. TypeScript 0.9, lansat în 2013
Suport suplimentar pentru medicamente generice TypeScript 1.0 a fost lansat la Build 2014
În iulie 2014, un nou TypeScript A venit compilatorul care este de cinci ori mai rapid decât versiunea anterioară.
În iulie 2015, suport pentru module ES6, cuvânt cheie namespace, pentru, de suport, decoratori.
În noiembrie 2016, o funcție adăugată, cum ar fi tipurile de cheie și de căutare ale tipurilor mapate și restul.
Pe 27 martie 2018, tipurile condiționate, cheia îmbunătățită cu suporturi pentru tipurile de intersecție adăugată în TypeScript.

De ce sa folosim TypeScript?

Iată avantajele/beneficiile importante ale utilizării TypeScript

Proiect mare și complex în JavaScripturile sunt dificil de codat și întreținut.
TypeScript ajută foarte mult la organizarea codului și totuși scapă de majoritatea erorilor din timpul compilării.
TypeScript acceptă biblioteci JS și documentație API
Este opțional un limbaj de scripting tastat
TypeScript Codul poate fi convertit în simplu JavaCod script
Structurare mai bună a codului și tehnici de programare orientate pe obiecte
Permite un suport mai bun pentru instrumentul de dezvoltare
Poate extinde limbajul dincolo de decoratorii standard, async/wait

Cine folosește TypeScript?

Iată câteva dintre cele mai comune aplicații ale TypeScript:

Echipa unghiulară folosește TypeScript.
Instalare NodeJS și NPM
TypeScript Instalare
Compila TypeScript codul către Javascript
Executați codul folosind Nodejs
Executa Javascript în Browser
Compila TypeScript codul către Javascript folosind versiunea EcmaScript
Puteți compila cu ușurință codul scris în TypeScript la JavaScript folosind NodeJS.
Deci să lucrez cu TypeScript mai întâi trebuie să descărcați și să instalați NodeJS.

Rezumat

TypeScript este un superset de JavaScenariul. TypeScript este un limbaj de programare pur orientat pe obiecte care acceptă clase, interfețe etc.
TypeScript acceptă toate caracteristicile Ecmascript lansate, iar dezvoltatorii le pot folosi în timp ce codifică.
Variabilele sunt folosite pentru a stoca valori, iar valoarea poate fi un șir, un număr, boolean sau o expresie.
In TypeScript, tipul unei variabile este definit doar la început și, prin execuție, trebuie să mențină același tip, orice modificare a acesteia va duce la o eroare de compilare în timpul compilării la javascript.
O matrice în TypeScript este un tip de date în care puteți stoca mai multe valori.
Clasa este o funcție nouă adăugată de la ES6 încolo, deci mai devreme JavaScript-ul funcționalității de tip de clasă a fost încercat folosind o funcție cu funcționalitate prototip pentru a reutiliza codul.
TypeScript acceptă modificatori de acces public, privat și protejat la metodele și proprietățile dvs.
Una dintre caracteristicile de bază ale TypeScript este interfețe. Interfața este un set de reguli definite care trebuie implementate de entitatea care o folosește.
Funcțiile sunt un set de instrucțiuni efectuate pentru a îndeplini o sarcină.
TypeScript Enum este un obiect care are o colecție de valori înrudite stocate împreună.

S-ar putea sa-ti placa:

Ce Este TypeScript?

Cum se descarcă și se instalează TypeScript

Compila TypeScript codul către Javascript

Executa Javascript folosind Nodejs

Compila TypeScript codul către Javascript folosind versiunea EcmaScript

ARTICOLE SIMILARE

Variabile în TypeScript

Declararea variabilelor folosind var

Declararea variabilelor folosind let

Declararea variabilelor folosind const

Introduceți TypeScript

Număr

Şir

boolean

Orice

Gol

TypeScript Mulțime

Declarați și inițializați o matrice

Diferite moduri de a accesa elemente dintr-un Array

Utilizarea TypeScript pentru bucla

Folosind bucla for-in

Folosind bucla for-of

Folosind bucla foreach

TypeScript Metode de matrice

proprietatea lungimii

Revmetoda erse

Metoda de sortare

Metoda pop

Shift metodă

Metoda push

metoda concat

Exemplu pentru proprietatea lungimii

Exemplu pentru metoda inversă

Exemplu pentru metoda de sortare

Exemplu pentru metoda pop

Exemplu pentru metoda schimbului

Exemplu pentru metoda push

Exemplu pentru metoda concat

Clasa în TypeScript

Definirea unei clase în TypeScript

Exemplu: Un exemplu de lucru pe Class

Constructor în a TypeScript Clasă

Metode în interiorul a TypeScript Clasă

Crearea instanței de clasă în TypeScript

Compilarea TypeScript Clasa la JavaScenariu

Moștenirea de clasă

Sintaxa moștenirii clasei:

Accesați modificatorii în TypeScript

Interfață în TypeScript

Sintaxa unei interfețe în TypeScript

Utilizarea interfeței pe o funcție ca tip de returnare

Interfață ca parametru de funcție

Interfață de implementare a clasei

Functioneaza in TypeScript

Efectuarea apelului la funcția: add

Parametri opționali pentru o funcție

Atribuiți valori implicite la Params

Parametrii de odihnă

Funcții săgeți

La ce folosește funcția săgeată?

TypeScript Enumere

Cum se declară o Enum?

Declarați o Enum cu o valoare numerică

Cum se accesează o Enum?

Declarați o Enum cu o valoare șir

În ce sunt modulele TypeScript?

De ce aveți nevoie de module în TypeScript?

Folosind Export și Import

Sintaxa pentru import și export 1:

Sintaxă pentru import și export 2:

Încărcător de module

Exemplu testCustomer.ts pentru a testCustomer.js folosind Requirejs

Exemplu Customer.ts către Customer.js folosind Requirejs

Spații de nume în TypeScript

Sintaxa spațiului de nume

Accesarea spațiului de nume

Declarații de mediu în TypeScript

Sintaxa ambientală

Pentru a declara modulul ambiental:

Fișierul ambiental trebuie salvat ca: