Share
AngularJS a transformat lumea dezvoltării de front-end cu susul în jos când a fost lansată, reunind o serie de practici de dezvoltare a aplicațiilor web noi sau recente într-un cadru puternic și ușor de utilizat. Cu versiunea 2, echipa Angular a pornit de la zero cu un sistem complet nou. Multe dintre ideile din spatele Angular sunt în continuare aceleași, dar experiența API și dezvoltatorii sunt foarte diferite.
În acest tutorial video de la cursul meu, Începeți cu Angular 2, vom examina modul în care TypeScript funcționează cu Angular 2. Vă voi arăta, de asemenea, câteva sintaxe tipice de bază.
Angular 2 este construit pe TypeScript, care utilizează sintaxa ES6 și se compilează la JavaScript. Standard ES5 JavaScript este, de asemenea, valid TypeScript, astfel încât să puteți utiliza în continuare codul existent.
În cazul în care TypeScript diferă este în sistemul de tastare. Deși este opțional, vă recomandăm să utilizați sistemul de scriere în proiectele dvs. Un sistem de tiparire ajută la proiectele mari prin identificarea tipului de valoare așteptat în codul dvs..
Aceasta se extinde la matrice și obiecte și permite unui editor precum Visual Studio Code să recunoască valoarea așteptată. Acest lucru este util într-un proiect mare sau când alți dezvoltatori vor lucra cu codul dvs. În loc să întrebați ce date ar trebui să utilizați într-o variabilă generică, cu tastări veți ști ce tip de valoare să utilizați.
Înainte de a ne uita la un pic de sintaxă TypeScript, vom discuta tsconfig.json si typings.json fișierul pe care l-am înființat cu proiectul nostru.
În primul rând, tsconfig.json fișierul care controlează fișierul nostru TypeScript va fi compilat. Obiectivul din opțiunile de compilator indică compilatorului să genereze JavaScript ES5.
modul determină stilul de încărcător modul pe care îl folosim; alte opțiuni sunt comune JS, AMD și UMD. moduleResolution decide modul în care modulele se rezolvă și sourceMap generează un fișier de hartă corespunzător care să hartă JavaScript generat la sursa lui TypeScript. emitDecoratorMetadata și experimentalDecorators ne permite să folosim decoratori în aplicația noastră. Vom discuta despre decoratori mai mult într-un moment. removeComments determină dacă orice comentarii pe care le adăugăm sunt eliminate atunci când compilam și, în final, avem noImplicitAny. Aceasta controlează modul în care compilatorul se va comporta atunci când nu poate deduce un tip. Din moment ce TypeScript este opțional tastat, dacă nu furnizăm un tip, trebuie să ne dăm seama de tipul bazat pe modul în care folosim variabila.
Cu noImplicitAny setat la fals, compilatorul va porni automat orice pentru un tip pe care nu-l poate da seama. Dacă am stabilit asta Adevărat, TypeScript va raporta o eroare atunci când nu poate deduce tipul. Apoi avem exclude bloc, unde excludem orice fișiere pe care compilatorul să le ignore.
În plus față de modulele de nod care conțin fișiere tip text, am inclus și câteva fișiere din typings pliant. Acest lucru se datorează faptului că există două seturi de tastări care au fost instalate, deci trebuie să ignorăm una dintre ele.
Dacă mergem la typings.json, vedem ES6-shim. Aceasta reprezintă o tastare care a fost adăugată proiectului nostru.
Compilatorul TypeScript nu înțelege metodele care pot fi incluse în bibliotecile externe. Când se întâmplă acest lucru, veți primi o eroare în compilator. Pentru a rezolva acest lucru, putem obține instrucțiuni pentru biblioteca pe care o folosim astfel încât TypeScript să înțeleagă metodele din lucrările compilatorului.
În acest caz, pavilionul ambiental și dependențele asociate indică faptul că fișierul de scriere vine de la DefinitelyTyped. DefinitelyTyped este un imens depozit de fișiere de tipar pentru cele mai populare biblioteci. În a noastră typings.json dosar, suntem grabbing ES6-shim fișierul de tipărire. Numărul de la sfârșit reprezintă codul de comitet al fișierului de scriere. Tastările au fost instalate în post install, iar fișierul de tipar a fost apoi copiat pe site-ul nostru typings dosar pentru noi.
Acum, că înțelegem ce am stabilit în ceea ce privește compilarele TypeScript, să aruncăm o privire la limba în sine. Primul lucru la care ne vom uita este tipizarea valorilor.
Aici avem tipurile de bază pe care le-am folosit în JavaScript, dar avem identificatorul adăugat care îi spune compilatorului ce tip de valoare a fost folosit cu variabila.
Dacă încercăm să stocăm un număr în numele meu variabilă, vom primi o eroare. Acest lucru va fi valabil dacă încercăm să stocăm tipul greșit în orice variabilă. Putem de asemenea folosi orice pentru a specifica că orice tip este disponibil pentru această variabilă:
var myName2: any = 'Reggie';
Putem de asemenea folosi vid ca tip, de obicei ca tip de returnare a unei funcții care nu returnează o valoare.
Apoi, în final, putem folosi un matrice ca tip. Utilizăm tipul de elemente din interiorul matricei urmat de paranteze pătrate pentru a indica faptul că acesta este un tip de matrice.
literele var: șir [] = ['a', 'b', 'c'];
Putem scrie, de asemenea, un tip de tip array astfel:
var letters2: Array= ['a', 'b', 'c'];
Apoi avem interfața, care vă permite să definiți un contract în codul dvs. cu privire la forma valorilor dvs..
interfață SampleInterface title: string;
Aici am creat o interfață de probă, dar pentru ao înțelege mai bine, să folosim această interfață.
În funcție, specificăm interfața ca formă a argumentului pe care îl transmitem funcției noastre. Apoi vom crea un obiect de utilizat. Ultimul rând ne-ar dezactiva titlul dacă l-am compilat și l-am executat.
Suntem obligați să folosim proprietatea de titlu numai cu această interfață. Am adăugat o altă proprietate, dar TypeScript nu are grijă atâta timp cât avem proprietatea titlului inclusă în acest obiect. Dacă nu l-am avea, am fi primit o eroare. De asemenea, rețineți că ordinea proprietăților nu contează atâta timp cât este necesară valoarea dorită.
Următoarea parte a formularului pe care trebuie să o înțelegeți este clasa. În TypeScript, putem folosi clasele pentru a construi aplicațiile noastre într-un mod orientat pe obiecte. Angular 2 utilizează acest lucru utilizând clasele drept coloana vertebrală a cadrului.
În loc să înveți sintaxa specifică cadrului, sintaxa Angular 2 se bazează pe tipar. În acest fel, nu vă limitați la învățarea Angular 2, deoarece sintaxa va fi utilă atunci când se dezvoltă în afara Angularului 2. La cea mai de bază, o clasă este creată astfel:
clasă SampleClass
Orice logică, precum și o funcție a constructorului pot fi incluse în această clasă.
Modul în care se extind acest lucru în Angular 2 este prin utilizarea de decoratori, cum ar fi @Component (). Acest decorator adaugă metadate care spun aplicației că această clasă este o componentă unghiulară. Ne construim aplicațiile pentru a adăuga metadate pentru componentele, serviciile, directivele noastre etc. Tot ceea ce construim un Angular 2 se va baza pe o clasă. Vom explora acest lucru mai mult pe măsură ce construim aplicațiile noastre.
În sfârșit, pe măsură ce construim aplicația noastră, vom rula scriptul de pornire NPM. Aceasta va lansa aplicația noastră în previzualizarea noastră și vom rula compilatorul în modul ceas. Orice modificări vor fi compilate și reflectate în previzualizare. Acestea sunt toate elementele de bază ale TypeScript pe care trebuie să le cunoașteți pentru a începe cu Angular 2.
În orice caz, verificați documentația TypeScript pentru a afla mai multe, deoarece am zgâriat numai suprafața caracteristicilor disponibile. Veți învăța, de asemenea, mult mai mult în restul cursului - a se vedea mai jos.
În cursul complet, începeți cu Angular 2, veți învăța cum să creați o aplicație web simplă de la zero - începând cu schele și configurația de scule. Veți învăța cum să utilizați variația de tip JavaScript JavaScript static tipărite pentru a crea componente, servicii și directive Angular 2. Pe parcurs, veți vedea cum să implementați fundamentele unei aplicații moderne de o singură pagină: inclusiv rutarea, accesul API extern, introducerea și validarea de către utilizatori.
Indiferent dacă sunteți un experimentator Angular cu experiență care dorește să faceți saltul la această versiune sau un nou dezvoltator care dorește să învețe să creeze site-uri web cu cea mai recentă tehnologie, acest curs este un excelent punct de plecare pentru învățarea Angular 2.
Accentsconagua