Share
AngularJS veranderde de front-end ontwikkelingswereld op zijn kop toen het werd uitgebracht, waardoor een aantal nieuwe of recente webapplicatie-ontwikkelingspraktijken werden samengebracht in een krachtig en gemakkelijk te gebruiken kader. Met versie 2 is het Angular-team helemaal opnieuw begonnen met een volledig nieuw systeem. Veel van de ideeën achter Angular zijn nog steeds hetzelfde, maar de API en ontwikkelaarervaring zijn heel verschillend.
In deze video-zelfstudie van mijn cursus, Aan de slag met Angular 2, zullen we bekijken hoe TypeScript met Angular 2 werkt. Ik zal u ook enkele basissyntaxis van TypeScript laten zien.
Angular 2 is gebouwd op TypeScript, dat de ES6-syntaxis gebruikt en compileert met vanille JavaScript. Standaard ES5 JavaScript is ook geldig TypeScript, dus u kunt uw bestaande code nog steeds gebruiken.
Waar TypeScript van verschilt, is in het typsysteem. Hoewel het optioneel is, raad ik u aan om het typsysteem in uw projecten te gebruiken. Een typsysteem helpt bij grote projecten door het verwachte type waarde in uw code te identificeren.
Dit strekt zich uit tot arrays en objecten en stelt een editor zoals Visual Studio Code in staat de verwachte waarde te herkennen. Dit is handig in een groot project of wanneer andere ontwikkelaars met uw code werken. In plaats van je af te vragen welke gegevens je zou moeten gebruiken in een generieke variabele, met types, weet je welk type waarde je moet gebruiken.
Voordat we naar een beetje van de TypeScript-syntax gaan kijken, bespreken we de tsconfig.json en de typings.json bestand dat we hebben opgezet met ons project.
Eerst de tsconfig.json bestand dat ons TypeScript-bestand beheert, zal worden gecompileerd. Het doel in de compiler-opties vertelt de compiler om ES5 JavaScript te genereren.
module bepaalt de stijl van de module-lader die we gebruiken; andere opties zijn gemeenschappelijke JS, AMD en UMD. moduleResolution bepaalt hoe modules worden opgelost, en sourceMap genereert een overeenkomstig kaartbestand dat de gegenereerde JavaScript toewijst aan de bron TypeScript. De emitDecoratorMetadata en experimentalDecorators sta ons toe decorateurs te gebruiken in onze app. We bespreken decorateurs meer in een oogwenk. removeComments bepaalt of eventuele opmerkingen die we toevoegen worden verwijderd wanneer we compileren, en ten slotte hebben we noImplicitAny. Dit bepaalt hoe de compiler zich gedraagt als er geen type kan worden afgeleid. Aangezien TypeScript optioneel is getypt, moet het type worden berekend op basis van hoe we de variabele gebruiken als we geen type leveren..
Met noImplicitAny ingesteld op vals, de compiler zal standaard naar ieder voor een type kan het niet achterhalen. Als we dit instellen waar, TypeScript rapporteert een fout wanneer deze het type niet kan afleiden. Dan hebben we de uitsluiten blokkeren, waar we alle bestanden uitsluiten waarvan we willen dat de compiler deze negeert.
Naast de knoopmodules die TypeScript-bestanden bevatten, hebben we ook enkele bestanden van de typeringen map. Dit komt omdat er twee sets types zijn geïnstalleerd, dus we moeten er één negeren.
Als we gaan typings.json, we zien de ES6-shim. Dit is een typering die aan ons project is toegevoegd.
De TypeScript-compiler begrijpt geen methoden die mogelijk zijn opgenomen in externe bibliotheken. Wanneer dit gebeurt, krijgt u een foutmelding in de compiler. Om dit te verhelpen, kunnen we lettertypen verkrijgen voor de bibliotheek die we gebruiken, zodat TypeScript de methoden in de compiler begrijpt.
In dit geval geven de omgevingsvlag en de bijbehorende afhankelijkheden aan dat het typebestand afkomstig is van DefinitelyTyped. DefinitelyTyped is een enorme opslagplaats van typebestanden voor de meeste populaire bibliotheken. In onze typings.json bestand, we pakken de ES6-shim typingsbestand. Het nummer aan het einde vertegenwoordigt de commit-ID van het typingsbestand. De types zijn in de post-installatie geïnstalleerd en het typebestand is vervolgens naar ons gekopieerd typeringen folder voor ons.
Nu we begrijpen wat we hebben ingesteld voor zover het de TypeScript-compiler betreft, laten we de taal zelf eens bekijken. Het eerste dat we zullen bekijken, is het typen van waarden.
Hier hebben we de basistypen die we in JavaScript hebben gebruikt, maar we hebben de toegevoegde ID die de compiler vertelt welk type waarde met de variabele is gebruikt.
Als we proberen een nummer op te slaan in de mijn naam variabele, we krijgen een foutmelding. Dit geldt ook als we proberen het verkeerde type in een variabele op te slaan. We kunnen ook gebruiken ieder om op te geven dat elk type beschikbaar is voor deze variabele:
var myName2: any = 'Reggie';
We kunnen ook gebruiken leegte als een type, meestal als het retourneertype van een functie die geen waarde retourneert.
Ten slotte kunnen we een array als een type gebruiken. We gebruiken het type elementen in de array, gevolgd door vierkante haken om aan te geven dat dit een arraytype is.
var letters: string [] = ['a', 'b', 'c'];
We kunnen ook een arraytype als volgt schrijven:
var letters2: matrix= ['a', 'b', 'c'];
Vervolgens hebben we de interface, waarmee u een contract in uw code kunt definiëren over de vorm van uw waarden.
interface SampleInterface title: string;
Hier hebben we een voorbeeldinterface gemaakt, maar om het beter te begrijpen, laten we deze interface gebruiken.
In de functie specificeren we de interface als de vorm voor het argument dat we doorgeven aan onze functie. Vervolgens maken we een object om te gebruiken. De laatste regel zou onze titel uitloggen als we dit compileerden en runden.
We zijn alleen verplicht om de eigenschap title met deze interface te gebruiken. We hebben een andere eigenschap toegevoegd, maar TypeScript maakt het niet uit, zolang we de eigenschap title in dit object hebben. Als we het niet hadden, zouden we een foutmelding krijgen. Merk ook op dat de volgorde van de eigenschappen niet van belang is zolang de vereiste waarde aanwezig is.
Het volgende deel van TypeScript dat u moet begrijpen, is klassen. In TypeScript kunnen we klassen gebruiken om onze toepassingen objectgericht op te bouwen. Angular 2 maakt hiervan gebruik door klassen te gebruiken als de ruggengraat van het raamwerk.
In plaats van syntaxis te leren die specifiek is voor het raamwerk, is de Angular 2-syntaxis gebaseerd op TypeScript. Op deze manier beperk je jezelf niet om Angular 2 te leren, omdat de syntaxis nuttig zal zijn als je buiten Angular 2 werkt. Op zijn meest elementaire wijze wordt een klasse als volgt gemaakt:
class SampleClass
Elke logica en een constructorfunctie kunnen in deze klasse worden opgenomen.
Hoe we dit in Angular 2 uitbreiden, is door het gebruik van decorateurs, zoals @Component (). Deze decorateur voegt metagegevens toe die de toepassing laten weten dat deze klasse een hoekcomponent is. We bouwen onze apps voor het toevoegen van metadata voor onze componenten, services, richtlijnen, etc. Alles wat we een Angular 2 bouwen, zal gebaseerd zijn op een klasse. We zullen dit verder onderzoeken terwijl we onze applicaties bouwen.
Tot slot, terwijl we onze app bouwen, zullen we het NPM-startscript draaien. Hierdoor wordt onze app in onze preview gestart en wordt de compiler in de horlogemodus uitgevoerd. Alle wijzigingen worden gecompileerd en weergegeven in het voorbeeld. Dat zijn allemaal basisprincipes van TypeScript die u moet kennen om aan de slag te gaan met Angular 2.
Bekijk in alle opzichten de TypeScript-documentatie voor meer informatie, omdat ik alleen maar het oppervlak van de beschikbare functies heb bekrast. Je leert ook veel meer in de rest van de cursus, zie hieronder.
In de volledige cursus, Aan de slag met Angular 2, leert u hoe u vanuit het niets een eenvoudige web-app kunt bouwen - beginnend met steiger- en gereedschappenconfiguratie. U leert hoe u de TypeScript-statisch getypeerde JavaScript-variant gebruikt om Angular 2-componenten, -services en -richtlijnen te maken. Onderweg ziet u hoe u de fundamenten van een moderne app met één pagina kunt implementeren: inclusief routing, externe API-toegang, gebruikersinvoer en validatie.
Of je nu een ervaren Angular-ontwikkelaar bent die de sprong naar deze nieuwste versie wil maken of een nieuwe ontwikkelaar die wil leren websites te maken met de nieuwste technologie, deze cursus is een goed startpunt voor het leren van Angular 2.
Accentsconagua