TypeScript pentru începători, Partea 1 Noțiuni de bază

Să începem acest tutorial cu întrebarea: "Ce este TypeScript?" 

TypeScript este un superset tastat de JavaScript care se compilează la JavaScript simplu. Ca o analogie, dacă JavaScript ar fi CSS, atunci TypeScript ar fi SCSS. 

Tot codul JavaScript valid pe care îl scrieți este, de asemenea, codul TypeScript valid. Cu toate acestea, cu ajutorul formularului TypeScript, puteți utiliza scrierea statică și cele mai recente funcții care se compilează la JavaScript simplu, care este acceptat de toate browserele. TypeScript are ca scop rezolvarea problemei de a face JavaScript scalabil și face o treabă destul de bună. 

În acest tutorial, veți începe să citiți despre caracteristicile diferite ale tipului și de ce învățarea este o idee bună. Restul secțiunilor din articol vor acoperi instalarea și compilarea formularului TypeScript împreună cu unele editoare de text populare care vă oferă suport pentru sintaxa TypeScript și alte caracteristici importante.

De ce să învețe tip?

Dacă nu ați folosit anterior niciodată TypeScript, s-ar putea să vă întrebați de ce ar trebui să vă deranjez să învățați deloc când se compilează la JavaScript în cele din urmă. 

Permiteți-mi să vă asigur că nu va trebui să vă petreceți mult timp în învățarea tipului. Atât TypeScript, cât și JavaScript au o sintaxă foarte asemănătoare și puteți doar să le redenumiți .js fișiere la .ts și începeți să scrieți codul TypeScript. Iată câteva caracteristici care ar trebui să vă convingă să începeți să învățați tipul de scriere tip:

1. Spre deosebire de JavaScript, care este tastat dinamic, TypeScript vă permite să utilizați tastarea statică. Această caracteristică face ca codul să fie mai ușor de întreținut și reduce foarte mult șansele de bug-uri care ar fi putut fi cauzate de ipotezele incorecte legate de tipul anumitor variabile. Ca un bonus adăugat, TypeScript poate determina tipul unei variabile bazate pe utilizarea sa fără a vă specifica în mod explicit un tip. Cu toate acestea, trebuie să specificați întotdeauna tipurile de variabile explicit pentru claritate.
2. Pentru a fi sincer, JavaScript nu a fost conceput pentru a servi ca limbaj de dezvoltare pe scară largă. TypeScript adaugă toate aceste caracteristici care lipsesc JavaScript care îl fac într-adevăr scalabil. Cu tastarea statică, IDE-ul pe care îl folosiți acum va fi capabil să înțeleagă codul pe care îl scrieți într-un mod mai bun. Aceasta oferă IDE capacitatea de a furniza caracteristici precum finalizarea codului și refactorizarea în condiții de siguranță. Toate acestea au ca rezultat o experiență de dezvoltare mai bună.
3. De asemenea, TypeScript vă permite să utilizați toate codurile JavaScript cele mai recente în codul dvs., fără a vă îngrijora de sprijinul browserului. Odată ce ați scris codul, îl puteți compila la JavaScript obișnuit vechi, ușor de suportat de toate browserele.
4. O mulțime de cadre populare precum Angular și Ionic utilizează acum TipScript. Acest lucru înseamnă că, dacă decideți vreodată să utilizați oricare dintre cadre în viitor, învățarea de tip TextScript este acum o idee bună.

Instalare

Înainte de a începe să scrieți un cod de tip awesome, trebuie să instalați FirstScript. Acest lucru se poate face cu ajutorul npm. Dacă nu aveți instalat npm, va trebui să instalați mai întâi npm înainte de a instala TypeScript. Pentru a instala TipScript, trebuie să porniți terminalul și să executați următoarea comandă:

npm instalează -g tipcript

Odată ce instalarea este finalizată, puteți verifica versiunea TypeScript instalată prin executarea comenzii tsc -v în terminalul tău. Dacă totul a fost instalat corect, veți vedea numărul de versiune tipărit instalat în terminal.

IDE-uri și editoare de text cu suport TypeScript

TypeScript a fost creat de Microsoft. Deci, faptul că Visual Studio a fost primul IDE care suportă TypeScript nu ar trebui să fie o surpriză. Odată ce TypeScript a început să câștige popularitate, tot mai mulți editori și IDE-uri au adăugat suport pentru această limbă fie din cutie, fie prin pluginuri. Un alt editor ușor și deschis, numit Visual Studio Code, creat de Microsoft, are suport încorporat pentru TypeScript. În mod similar, WebStorm deține, de asemenea, suport pentru modelul TypeScript.

De asemenea, Microsoft a creat un Plug Free Sublime TypeScript. NetBeans are un plugin TypeScript care oferă o varietate de caracteristici pentru ușurința dezvoltării. Expunerea în sintaxă este disponibilă în Vim și Notepad ++, cu ajutorul pluginurilor typcript-vim și notepadplus-typcript. 

Puteți vedea o listă completă a tuturor editorilor de texte și a IDE-urilor care acceptă tipărire pe GitHub. Pentru exemplele din această serie, voi folosi Visual Studio Code pentru a scrie tot codul.

Compilarea tipului JavaScript în JavaScript

Să presupunem că ați scris un cod TypeScript în a .ts fişier. Navigatorii nu vor putea rula singur acest cod. Va trebui să compilați JavaScript în JavaScript simplu, care poate fi înțeles de browsere. 

Dacă utilizați un IDE, codul poate fi compilat în JavaScript în IDE-ul propriu-zis. De exemplu, Visual Studio vă permite să compilați direct codul TypeScript în JavaScript. Va trebui să creați o tsconfig.json fișierul în care specificați toate opțiunile de configurare pentru compilarea fișierului TypeScript în JavaScript. 

Abordarea cea mai potrivită pentru începători atunci când nu lucrați la un proiect mare este să utilizați terminalul în sine. În primul rând, trebuie să vă mutați la locația fișierului TypeScript din terminal și apoi să executați următoarea comandă.

tsc first.ts

Acest lucru va crea un nou fișier numit first.js în aceeași locație. Rețineți că dacă ați avut deja un fișier numit first.js, ar fi suprascris.

Dacă doriți să compilați toate fișierele din directorul curent, puteți face acest lucru cu ajutorul unor metacaracteristici. Amintiți-vă că acest lucru nu va funcționa recursiv.

tsc * .ts 

În cele din urmă, puteți compila numai anumite fișiere prin furnizarea explicită a numelor acestora într-o singură linie. În astfel de cazuri, fișierele JavaScript vor fi create cu numele de fișier corespunzător.

tsc first.ts produs.ts bot.ts

Să aruncăm o privire la următorul program, care multiplică două numere în TypeScript.

da o: numărul = 12; b: numărul = 17; funcția showProduct (primul: numărul, al doilea: numărul): void console.log ("Produsul este:" + first * second);  showProduct (a, b);

Codul TypeScript de mai sus se compilează la următorul cod JavaScript atunci când versiunea vizată este setată la ES6. Rețineți cum toate informațiile despre tipul pe care le-ați furnizat în textul TypeScript au dispărut acum după compilare. Cu alte cuvinte, codul devine compilat în JavaScript, care poate fi înțeles de browser, dar veți face dezvoltarea într-un mediu mult mai bun care vă poate ajuta în capturarea unei mulțimi de bug-uri.

lăsați a = 12; b = 17; show showProduct (primul, al doilea) console.log ("Produsul este:" + first * second);  showProduct (a, b);

În codul de mai sus, am specificat tipul de variabile A și b ca numere. Aceasta înseamnă că, dacă mai târziu încercați să setați valoarea b la un șir de caractere ca "Apple", TypeScript vă va arăta o eroare care "apple" nu este asignabilă la tipul număr. Codul dvs. va continua să se compileze în JavaScript, dar acest mesaj de eroare vă va informa că ați făcut o greșeală și că vă ajutați să evitați o problemă în timpul rulării. 

Iată o captură de ecran care afișează mesajul de eroare din Visual Studio Code:

Exemplul de mai sus arată modul în care TypeScript continuă să vă ofere indicii despre posibile erori în cod. Acesta a fost un exemplu foarte simplu, dar atunci când creați programe foarte mari, mesajele ca acestea merg foarte mult în a vă ajuta să scrieți un cod robust cu mai puține șanse de eroare.

Gândurile finale

Acest tutorial de pornire a seriei a fost menit să vă ofere o scurtă trecere în revistă a diferitelor caracteristici TypeScript și să vă ajute să instalați limba împreună cu câteva sugestii pentru IDE și editoare de text pe care le puteți utiliza pentru dezvoltare. Următoarea secțiune a abordat diferite moduri de compilare a codului dvs. TypeScript în JavaScript și vă arată cum vă poate ajuta TypeScript să evitați unele erori comune.

Sper că ți-a plăcut acest tutorial. Dacă aveți întrebări, vă rugăm să ne anunțați în comentarii. Următorul tutorial al seriei va discuta diferite tipuri de variabile disponibile în TypeScript.