Share
AngularJS slått utviklingsverdenen på toppsiden opp og ned når den ble løslatt, og samlet en rekke nye eller nyere webapplikasjonsutviklingspraksis inn i et kraftig og brukervennlig rammeverk. Med versjon 2 har Angular-teamet startet fra bunnen av med et helt nytt system. Mange av ideene bak Angular er likevel de samme, men API og utvikleropplevelsen er veldig forskjellig.
I denne videoopplæringen fra kurset mitt, Kom i gang med Angular 2, ser vi på hvordan TypeScript fungerer med Angular 2. Jeg vil også vise deg noen grunnleggende TypeScript-syntaks.
Angular 2 er bygget på TypeScript, som bruker ES6 syntaks og kompilerer til vanilje JavaScript. Standard ES5 JavaScript er også gyldig TypeScript, så du kan fortsatt bruke din eksisterende kode.
Hvor TypeScript er forskjellig, er i skrivesystemet. Selv om det er valgfritt, anbefaler jeg at du bruker skrivesystemet i prosjektene dine. Et skrivesystem hjelper med store prosjekter ved å identifisere den forventede typen av verdi i koden din.
Dette strekker seg til arrays og objekter, og lar en redaktør som Visual Studio Code gjenkjenne forventet verdi. Dette er nyttig i et stort prosjekt, eller når andre utviklere vil jobbe med koden din. I stedet for å lure på hvilke data du bør bruke i en generell variabel, vil du ved å skrive inn hva slags verdi du skal bruke.
Før vi ser på en liten typeScript-syntaks, diskuterer vi tsconfig.json og typings.json fil vi satt opp med vårt prosjekt.
Først tsconfig.json filen som styrer vår TypeScript-fil, blir kompilert. Målet i kompilatoralternativene forteller kompilatoren å generere ES5 JavaScript.
modul bestemmer stilen til modullasteren som vi bruker Andre alternativer er vanlige JS, AMD og UMD. moduleResolution bestemmer hvordan moduler løses, og sourceMap genererer en tilsvarende kartfil som kartlegger den genererte JavaScript til sin kilde TypeScript. De emitDecoratorMetadata og experimentalDecorators la oss bruke dekoratører i vår app. Vi vil diskutere dekoratører mer i et øyeblikk. removeComments avgjør om eventuelle kommentarer vi legger til, blir fjernet når vi kompilerer, og til slutt har vi noImplicitAny. Dette styrer hvordan kompilatoren vil oppføre seg når den ikke kan utlede en type. Siden TypeScript er valgfritt skrevet, hvis vi ikke leverer en type, må den finne ut hvilken type som er basert på hvordan vi bruker variabelen.
Med noImplicitAny satt til falsk, kompilatoren vil standard til noen For en type kan den ikke finne ut. Hvis vi setter dette til ekte, TypeScript vil rapportere en feil når den ikke kan avlede typen. Da har vi utelukke blokkere, der vi ekskluderer filer vi vil ha kompilatoren å ignorere.
I tillegg til nodemodulene som inneholder TypeScript-filer, har vi også inkludert noen filer fra typings mappe. Dette skyldes at det er to sett med skrivinger som ble installert, så vi må ignorere en av dem.
Hvis vi går til typings.json, vi ser ES6-mellomlegg. Dette representerer en skriving som er lagt til i vårt prosjekt.
TypScript-kompilatoren forstår ikke metoder som kan være inkludert i eksterne biblioteker. Når dette skjer, får du en feil i kompilatoren. For å fikse dette, kan vi få innskrivinger for biblioteket som vi bruker, slik at TypeScript forstår metodene i kompilatorfunksjonene.
I dette tilfellet indikerer omgivelsesflagget og tilhørende avhengigheter at skrivefilen kommer fra DefinitelyTyped. DefinitelyTyped er et stort arkiv for å skrive filer til de fleste populære biblioteker. I vår typings.json fil, vi tar tak i ES6-mellomlegg skrivingsfil. Tallet på slutten representerer commit ID for typingsfilen. Skrivingene ble installert i postinstallasjonen og skrivefilen ble deretter kopiert til vår typings mappe for oss.
Nå som vi forstår hva vi har satt opp så langt som TypeScript-kompilatoren er bekymret, la oss ta en titt på språket selv. Det første vi skal se på er å skrive verdier.
Her har vi de grunnleggende typene vi har brukt i JavaScript, men vi har den ekstra identifikatoren som forteller kompilatoren hvilken type verdi som ble brukt med variabelen.
Hvis vi prøver å lagre et nummer i mitt navn variabel, vil vi få en feil. Dette vil være tilfelle hvis vi prøver å lagre feil type i en hvilken som helst variabel. Vi kan også bruke noen å spesifisere at noen type er tilgjengelig for denne variabelen:
var myName2: any = 'Reggie';
Vi kan også bruke tomrom som en type, typisk som returtype av en funksjon som ikke returnerer en verdi.
Så endelig kan vi bruke en matrise som en type. Vi bruker typen av elementene inne i arrayet etterfulgt av firkantede parenteser for å indikere at dette er en array type.
var bokstaver: streng [] = ['a', 'b', 'c'];
Vi kan også skrive en array type slik:
var letters2: Array= ['a', 'b', 'c'];
Deretter har vi grensesnittet, som lar deg definere en kontrakt i koden din om formene dine verdier.
grensesnitt SampleInterface title: string;
Her har vi opprettet et grensesnitt, men for å forstå det bedre, la oss bruke dette grensesnittet.
I funksjonen spesifiserer vi grensesnittet som formen for argumentet vi sender til vår funksjon. Da lager vi et objekt å bruke. Den siste linjen ville logge ut vår tittel hvis vi samlet og sprang dette.
Vi er bare pålagt å bruke tittelegenskapen med dette grensesnittet. Vi har lagt til en annen eiendom, men TypeScript bryr seg ikke så lenge vi har tittelegenskapen inkludert i dette objektet. Hvis vi ikke hadde det, ville vi få en feil. Vær også oppmerksom på at rekkefølgen av egenskapene ikke har betydning så lenge den nødvendige verdien er til stede.
Den neste delen av TypeScript du trenger å forstå er klasser. I TypeScript kan vi bruke klasser til å bygge våre applikasjoner på en objektorientert måte. Vinkel 2 bruker dette ved å bruke klasser som ryggraden i rammen.
I stedet for å lære syntaks som er spesifikk for rammen, er Angular 2-syntaks basert på TypeScript. På denne måten begrenser du ikke deg selv ved å lære Angular 2 siden syntaksen vil være nyttig når du utvikler deg utenfor Angular 2. På sitt mest grunnleggende er en klasse opprettet slik:
klasse prøveklasse
Enhver logikk samt en konstruktors funksjon kan inngå i denne klassen.
Hvordan vi utvider dette i Angular 2 er gjennom bruk av dekoratører, for eksempel @Komponent(). Denne dekoratøren legger til metadata som forteller programmet at denne klassen er en kantet komponent. Vi bygger våre apps for å legge til metadata for våre komponenter, tjenester, direktiver, etc. Alt vi bygger en Angular 2 vil være basert på en klasse. Vi vil utforske dette videre når vi bygger våre applikasjoner.
Til slutt, når vi bygger vår app, kjører vi NPM start script. Dette vil starte vår app i forhåndsvisningen vår og kjøre kompilatoren i visningsmodus. Eventuelle endringer vil bli kompilert og reflektert i forhåndsvisningen. Det er alt grunnleggende for TypeScript du trenger å vite for å komme i gang med Angular 2.
For all del må du sjekke TypeScript-dokumentasjonen for å lære mer, da jeg bare klarte overflaten av funksjonene som er tilgjengelige. Du vil også lære mye mer i resten av kurset - se nedenfor.
I hele kurset, Kom i gang med vinkel 2, lærer du hvordan du bygger en enkel nettapp fra grunnen, og starter med stillas og verktøykonfigurasjon. Du lærer hvordan du bruker TypeScript-statisk skrevet variasjon av JavaScript for å opprette Angular 2-komponenter, -tjenester og -direktiver. Underveis vil du se hvordan du implementerer grunnleggende for en moderne enkeltside-app: inkludert ruting, ekstern API-tilgang, brukerinngang og validering.
Enten du er en erfaren Angular dev som ønsker å hoppe til denne nyeste versjonen eller en ny utvikler som ønsker å lære å lage nettsteder med den nyeste teknologien, er dette kurset et flott utgangspunkt for å lære Angular 2.
Accentsconagua