TypeScript este unul dintre subiectele fierbinți actuale în dezvoltarea web și din motive întemeiate.

Ne permite să tastăm cast atunci când declarăm variabile, ceea ce înseamnă că stabilim în mod explicit tipul de date pe care îl așteptăm înapoi. Apoi aruncă erori dacă datele returnate nu sunt de tipul pe care ne așteptam să le revenim sau dacă un apel de funcție are prea puține sau prea multe argumente. Și aceasta este doar o mostră a tot ceea ce oferă.

Dacă doriți o prezentare generală a tipurilor de date, veți găsi util să citiți datele mele articolul anterior. Citirea acestui articol nu este necesară, dar vă va oferi o înțelegere excelentă a tipurilor de date și a sintaxei pentru TypeScript.

Înainte de a începe, este important să rețineți că TypeScript poate fi utilizat împreună cu un cadru / bibliotecă, dar poate fi utilizat și independent de un cadru / bibliotecă. TypeScript este implicit în proiectele Angular și am un articol în lucru despre cum să începeți cu el.

De asemenea, acest articol presupune că aveți o înțelegere de bază a programării JavaScript.

Deci, acum suntem gata să începem cu TypeScript și să începem să folosim caracteristicile sale minunate.

Hai să săpăm!

Instalarea TypeScript

Există două modalități principale de a instala TypeScript. Primul este prin Studio vizual (nu trebuie confundat cu Cod Visual Studio) care este un IDE. Versiunile 2015, 2017 și cred că 2019 vin cu TypeScript instalat deja.

Acesta nu este traseul pe care îl voi parcurge astăzi, deoarece folosesc în principal Visual Studio Code pentru toate nevoile mele.

A doua modalitate și modul în care ne vom concentra este prin NPM (Manager pachet nod).

Dacă nu aveți deja NPM și / sau Nodul instalat (veți obține NPM când instalați Node), acum este un moment excelent pentru a face acest lucru, deoarece este o cerință pentru pașii următori (și, prin asociere, o cerință de utilizare a TypeScript).

pagina de descărcare a nodului js
Pagina de descărcare a nodului – este o idee bună să utilizați versiunea LTS, deoarece este cea mai stabilă

După ce ați instalat Node și NPM, deschideți terminalul în VS Code și rulați următoarea comandă:

npm install -g typescript

După ce ați terminat instalarea, veți vedea că a fost adăugat un pachet. Veți vedea, de asemenea, un mesaj care indică versiunea TypeScript care a fost instalată.

Acesta este tot ce aveți nevoie pentru a începe să compilați TypeScript în JavaScript.

Acum sunteți gata să începeți să scrieți TypeScript!

Lansarea unui proiect TypeScript

Să creăm un proiect TypeScript, astfel încât să putem profita de toate acele caracteristici grozave care vin împreună cu utilizarea acestuia.

În editorul ales (folosesc codul VS), să creăm un fișier HTML care să fie partea vizuală a codului nostru. Iată cum arată fișierul meu HTML de bază:

text html pe un fundal întunecat
Boilerplate HTML de bază cu un text substituent

Sincer, folosim doar acest HTML, astfel încât să putem vedea ceva pe pagină. Ceea ce ne preocupă cu adevărat este utilizarea consolei.

Veți observa că am app.js legat în capul nostru index.html fişier.

Probabil îți spui pentru tine Am crezut că acesta este un articol despre TypeScript?

Ei bine, ține-ți caii, așa este. Vreau doar să evidențiez câteva dintre diferențele dintre JavaScript și TypeScript (Veți afla de unde provine acest fișier mai jos).

Mai jos veți vedea o declarație simplă de variabilă și o declarație jurnal consolă:

cod javascript care prezintă o declarație de variabilă de nume de utilizator
O declarație variabilă simplă și o declarație jurnal consolă

Ca o notă laterală, dacă doriți să dezactivați unele ES-Lint reguli, puteți plasa regulile în partea de sus a comentariilor, așa cum am făcut mai sus. Sau dacă vrei complet dezactivați ES-Lint doar pentru fișierul respectiv /* eslint-disable */ în partea de sus a fișierului.

Și iată consola browserului:

consola din interiorul browserului Firefox
Variabila noastră UserName din FireFox

Să ne prefacem că construiesc o aplicație și pentru userName Mă aștept să primesc întotdeauna un șir înapoi. Pe parcurs, pot face o greșeală sau datele mele pot fi mutate din altă sursă.

Acum, userName este un număr 🙁

cod javascript care prezintă o declarație de variabilă de nume de utilizator
Acum UserName este un număr!

Și aici este consola browserului care arată modificările la userName că probabil nu am vrut să se întâmple dacă aceasta ar fi o aplicație de producție:

1612048990 171 Cum se instaleaza si se incepe utilizarea TypeScript
Consola FireFox care arată rezultatele mutației variabile

Ce se întâmplă dacă se întorc userName a fost apoi trecut într-o altă funcție sau folosit ca o piesă dintr-un puzzle de date mai mare?

Nu ar fi doar o mizerie să ne dăm seama unde a apărut mutația (mai ales dacă am avea o aplicație mai mare), dar ar crea și un număr nespus de erori în codul nostru.

Acum, să încercăm același experiment în TypeScript. Pentru a face acest lucru, va trebui să creăm un fișier nou cu .ts extensie pentru a indica un fișier TypeScript.

O voi numi pe a mea app.ts pentru a rămâne în concordanță cu convențiile de denumire și a pune același cod din fișierul nostru JavaScript în noul nostru fișier TypeScript.

cod dactilografiat pe un fundal întunecat
Același cod din JavaScript nostru a fost copiat în fișierul TypeScript

Veți observa că folosesc castingul de tip atunci când declar variabila mea acum și îi spun explicit TypeScript că această variabilă ar trebui să indice doar o valoare șir.

Veți observa, de asemenea, că am o linie de eroare sub userName când îi reamintesc valoarea.

Compilarea TypeScript cu CLI

Pentru a vedea cum arată acest lucru în consola noastră, trebuie să îl compilăm în JavaScript. Facem asta alergând tsc app.ts în consola noastră VS Code (puteți rula, de asemenea, aceeași comandă în orice terminal, atâta timp cât vă aflați în directorul corect).

Când executăm această comandă, va compila TypeScript-ul nostru în JavaScript. De asemenea, va genera un alt fișier cu același nume, numai cu un .js extensie.

Aici este acolo app.js fișierul provine din cel menționat anterior în articol.

Pentru a compila mai multe fișiere simultan, furnizați acele nume în comanda dvs., unul după altul: tsc app.ts header.component.ts

De asemenea, este posibil să compilați mai multe fișiere TypeScript într-un singur fișier JavaScript adăugând fișierul --out steag:

tsc *.ts --out index.js

Există, de asemenea, o comandă de ceas care va recompila automat toate TypeScript-ul de fiecare dată când este detectată o modificare. Acest lucru vă împiedică să executați aceeași comandă de mai multe ori:

tsc *.ts --out app.js --watch

Iată rezultatul din asta tsc app.ts comanda de mai sus:

1612048990 889 Cum se instaleaza si se incepe utilizarea TypeScript
Eroarea din consola mea

Această eroare ne spune că există o problemă cu reatribuirea userName. Pentru că ne-am setat în mod explicit variabila să fie un șir (chiar dacă nu aș fi setat variabila la un șir, eroarea ar apărea în continuare deoarece TypeScript deduce tipuri de date) nu îl putem reatribui la un număr.

Aceasta este o caracteristică excelentă, deoarece ne obligă să fim expliciți cu declarațiile noastre variabile și ne scutește de a face greșeli care s-ar putea dovedi enervante și consumatoare de timp. Dacă vă așteptați la un anumit tip de date, ar trebui să le obțineți, altfel ar trebui să primiți o eroare.

Utilizarea matricilor și obiectelor declarative în mod explicit

Să presupunem că construiesc un proiect și, în loc să setez manual legăturile de navigare, vreau să stochez acele informații într-o serie de obiecte.

Mă aștept la un format specific pentru informațiile stocate, astfel încât să fie consecvent pe toate linkurile.

Iată cum pot seta o matrice „complexă” în TypeScript:

1612048990 770 Cum se instaleaza si se incepe utilizarea TypeScript
O matrice cu un format specific

În partea stângă declarăm numele variabilei navLinks, urmat de un colon. La parantezele bucle este locul unde începem să declarăm formatul informațiilor pe care le așteptăm în această matrice.

Îi spunem TypeScript că ne așteptăm ca această matrice să conțină un obiect sau obiecte cu aceste nume și tipuri de proprietăți. Ne așteptăm la o name care este un șir, a link care este un șir și un alt care este și un șir.

Ca și în cazul altor tipuri de date, dacă ne abatem de la formatul stabilit pentru această variabilă, vom întâlni erori.

Aici am încercat să adăugăm o nouă intrare care era necompletată și am primit următoarea eroare:

Type '{}' is missing the following properties from type '{ name: string; link: string; alt: string; }' : name, link, alt ts(2739)

1612048990 417 Cum se instaleaza si se incepe utilizarea TypeScript

Primim erori similare dacă încercăm să adăugăm o altă intrare cu un tip greșit de informații:

{ name: 'Jonathan', link: 15, alt: false }

{ name: ['Jon','Marley'], link: `https://link123.net`, alt: null }

this.navLinks[0].img = '../../assets/img'

this.navLinks[0].name="Barnaby"✔️

Ai ideea totuși. Odată ce stabilim formatul, TypeScript ne va ține la acel format și ne va informa dacă / când ne abatem de la acesta cu o eroare.

De asemenea, iată câteva modalități de a defini o matrice:

const arr1: Array<any> = ['Dave', 35, true]; // ne va permite să avem orice număr de elemente cu orice tip

const people: [string,string,string] = ['John', 'Sammy', 'Stephanie']; // va arunca o eroare dacă în matrice apar mai mult de 3 șiruri sau elemente care nu sunt șiruri

const people: Array<string> = ['Jimmy', 'Theresa', 'Stanley']; // ne va permite să avem orice număr de elemente de șir numai în matricea noastră

Obiectele funcționează la fel ca și matricile în TypeScript. Acestea pot fi definite în mod explicit cu tipuri de seturi sau puteți lăsa TypeScript să facă toate deducțiile. Iată un exemplu de bază al unui obiect:

const person: {name:string, address: string, age: number} = {name: 'Willy', address: '123 Sunshine Ln', age: 35}

Din nou, în partea stângă declarăm persoana drept numele variabilei cu primul set de acolade care definesc formatul în care dorim să fie datele noastre.

Este important de reținut că în obiecte, ordinea în care ne definim proprietățile nu trebuie să se potrivească cu ordinea formatului:

1612048990 947 Cum se instaleaza si se incepe utilizarea TypeScript
Proprietățile nu trebuie să se potrivească ordinii în care au fost definite

Funcții, parametri și argumente

Unele dintre cele mai mari beneficii pe care le veți vedea în TypeScript vin atunci când utilizați funcții.

Ați construit vreodată o funcție pentru a efectua o anumită sarcină doar pentru a afla că nu funcționează așa cum ați intenționat?

În timp ce utilizați TypeScript nu va fi pentru că nu ați primit / trimis tipul corect de date sau nu ați utilizat numărul corect de parametri / argumente.

Iată un exemplu minunat:

1612048990 914 Cum se instaleaza si se incepe utilizarea TypeScript
O funcție TypeScript care ar trebui să returneze un număr

În funcția noastră ne așteptăm să primim 3 argumente când calculator execută. Cu toate acestea, dacă primim un număr greșit de argumente (prea puține sau prea multe) TypeScript ne va da o eroare frumoasă:

1612048990 3 Cum se instaleaza si se incepe utilizarea TypeScript
Eroarea pe care o primim atunci când apelăm o funcție cu cantitatea / tipul de argumente incorecte

La fel, dacă primim un tip greșit de date atunci când executăm această funcție TypeScript va genera o eroare și funcția nu va rula.

calculator('12', '11', 'add) ;

Acum s-ar putea să-ți spui ‘Și ce dacă? Totul este bine, dar nu pare a fi o afacere imensă. Dar imaginați-vă că aplicația dvs. este de zeci și zeci de fișiere cu multe straturi de abstracții.

Un exemplu excelent în acest sens ar fi o aplicație angulară cu servicii, modele de date, componente pe mai multe niveluri și toate dependențele care merg împreună cu aceasta. Devine din ce în ce mai dificil să identifici de unde vine o eroare atunci când aplicația ta devine mare.

Asta e tot

Sperăm că puteți vedea acum beneficiile TypeScript. Sunt mult mai multe decât cele pe care le-am subliniat aici și vă încurajez să citiți documentația dacă doriți să găsiți mai multe.

Puteți găsi acest articol și alții ca acesta pe mine blog. Mi-ar plăcea să treci pe aici!

În timp ce sunteți acolo, de ce să nu vă înscrieți pentru mine Buletin informativ – puteți face acest lucru în partea dreaptă sus a paginii principale a blogului. Promit că nu voi trimite niciodată spam la căsuța de e-mail, iar informațiile dvs. nu vor fi distribuite nimănui / site-ului. Îmi place să trimit ocazional resurse interesante pe care le găsesc, articole despre dezvoltarea web și o listă cu cele mai noi postări ale mele.

Dacă nu ați făcut-o încă, vă puteți conecta și cu mine pe social media! Toate linkurile mele sunt, de asemenea, în partea din dreapta sus a acelei pagini. Îmi place să mă conectez cu ceilalți și să cunosc oameni noi, așa că nu vă fie teamă să vă salut. ?

Aveți o zi minunată, prietene și o codificare fericită!