Share
We hebben een lange weg afgelegd om TypeScript te leren sinds we deze serie begonnen. De eerste tutorial gaf je een korte introductie van TypeScript en stelde enkele IDE's voor die je kunt gebruiken om TypeScript te schrijven. De tweede zelfstudie was gericht op gegevenstypen en de derde zelfstudie besprak de basisbeginselen van interfaces in TypeScript.
Zoals u wellicht al weet, heeft JavaScript pas native ondersteuning voor klassen en objectgeoriënteerd programmeren toegevoegd. TypeScript heeft ontwikkelaars echter toegestaan om klassen lange tijd in hun code te gebruiken. Deze code wordt vervolgens gecompileerd naar JavaScript dat werkt in alle belangrijke browsers. In deze zelfstudie leer je over klassen in TypeScript. Ze lijken op hun ES6-tegenhangers, maar zijn strenger.
Laten we beginnen met de basis. Klassen zijn een fundamenteel onderdeel van objectgeoriënteerd programmeren. U gebruikt klassen om een entiteit weer te geven die enkele eigenschappen en functies heeft die op bepaalde eigenschappen kunnen werken. TypeScript geeft u volledige controle over de eigenschappen en functies die toegankelijk zijn binnen en buiten de eigen klasse. Hier is een heel eenvoudig voorbeeld van het maken van een Persoon klasse.
Accentsconagua
klasse Persoon naam: string; constructor (theName: string) this.name = theName; introductionSelf () console.log ("Hallo, ik ben" + this.name + "!"); let personA = new Person ("Sally"); personA.introduceSelf ();De bovenstaande code maakt een heel eenvoudige klasse genaamd Persoon. Deze klasse heeft een eigenschap genaamd naam en een functie genaamd introduceSelf. De klasse heeft ook een constructor, die in feite ook een functie is. Constructors zijn echter speciaal omdat ze worden opgeroepen telkens wanneer we een nieuw exemplaar van onze klasse maken.
U kunt parameters ook aan constructeurs doorgeven om verschillende eigenschappen te initialiseren. In ons geval gebruiken we de constructor om de naam te initialiseren van de persoon die we maken met behulp van de Persoon klasse. De introduceSelf functie is een methode van de Persoon klasse, en we gebruiken het hier om de naam van de persoon naar de console af te drukken. Al deze eigenschappen, methoden en de constructor van een klasse worden gezamenlijk klassenleden genoemd.
Houd er rekening mee dat het Persoon klasse maakt niet automatisch een persoon alleen. Het werkt meer als een blauwdruk met alle informatie over de kenmerken die een persoon ooit had moeten hebben. Met dat in gedachten hebben we een nieuwe persoon gecreëerd en haar Sally genoemd. De methode aanroepen introduceSelf op deze persoon zal de regel "Hallo, ik ben Sally!" naar de console.
In het vorige gedeelte hebben we een persoon met de naam Sally gemaakt. Op dit moment is het mogelijk om de naam van de persoon van Sally naar Mindy overal in onze code te wijzigen, zoals in het volgende voorbeeld wordt getoond.
klasse Persoon naam: string; constructor (theName: string) this.name = theName; introductionSelf () console.log ("Hallo, ik ben" + this.name + "!"); let personA = new Person ("Sally"); // Prints "Hallo, ik ben Sally!" personA.introduceSelf (); personA.name = "Mindy"; // Prints "Hallo, ik ben Mindy!" personA.introduceSelf (); Je hebt misschien gemerkt dat we beide konden gebruiken naam eigendom en de introduceSelf methode buiten de bevattende klasse. Dit komt omdat alle leden van een klasse in TypeScript zijn openbaar standaard. U kunt ook expliciet aangeven dat een eigenschap of methode openbaar is door het trefwoord toe te voegen openbaar voor het.
Soms wilt u niet dat een eigenschap of methode toegankelijk is buiten de bestaande klasse. Dit kan worden bereikt door die leden privé te maken met behulp van de privaat trefwoord. In de bovenstaande code kunnen we de eigenschap name maken privaat en voorkomen dat het buiten de bevattende klasse wordt gewijzigd. Na deze wijziging toont TypeScript u een foutmelding dat het naam eigendom is privaat en je hebt er alleen toegang toe binnen de Persoon klasse. De onderstaande schermafbeelding toont de fout in Visual Studio-code.
Met overerving kunt u meer complexe klassen maken die beginnen bij een basisklasse. We kunnen bijvoorbeeld de Persoon klasse uit de vorige sectie als basis om een te maken vriend klas die alle leden van de. zal hebben Persoon en voeg een aantal eigen leden toe. U kunt ook een toevoegen Familie of Leraar klasse.
Ze zullen allemaal de methoden en eigenschappen van de Persoon terwijl je enkele eigen methoden en eigenschappen toevoegt om ze van elkaar te onderscheiden. Het volgende voorbeeld zou het duidelijker moeten maken. Ik heb ook de code voor de Persoon class hier, zodat u eenvoudig de code van zowel de basisklasse als de afgeleide klasse kunt vergelijken.
class Person private name: string; constructor (theName: string) this.name = theName; introductionSelf () console.log ("Hallo, ik ben" + this.name + "!"); klas Vriend verlengt Persoon yearsKnown: number; constructor (naam: string, yearsKnown: number) super (name); this.yearsKnown = yearsKnown; timeKnown () console.log ("We zijn vrienden geweest voor" + this.yearsKnown + "years.") let friendA = new Friend ("Jacob", 6); // Prints: Hallo, ik ben Jacob! friendA.introduceSelf (); // Prints: we zijn al 6 jaar vrienden. friendA.timeKnown (); Zoals je kunt zien, moet je de gebruiken uitbreiden sleutelwoord voor de vriend klasse om alle leden van de. te erven Persoon klasse. Het is belangrijk om te onthouden dat de constructor van een afgeleide klasse altijd de constructor van de basisklasse moet aanroepen met een aanroep naar super().
Je hebt misschien gemerkt dat de constructor van vriend hoefde niet hetzelfde aantal parameters te hebben als de basisklasse. De parameter first name is echter doorgegeven aan super() om de constructor van de ouder aan te roepen, die ook een parameter accepteerde. We hoefden het niet opnieuw te definiëren introduceSelf functie binnen de vriend klasse omdat het is overgenomen van de Persoon klasse.
Tot nu toe hebben we alleen de leden van een klas gemaakt privaat of openbaar. Door ze openbaar te maken, kunnen we ze overal openen, waardoor de leden privé beperken tot hun eigen klasse. Soms wilt u misschien dat de leden van een basisklasse toegankelijk zijn in alle afgeleide klassen.
U kunt de beschermde modifier in dergelijke gevallen om de toegang van een lid tot afgeleide klassen te beperken. U kunt ook de beschermde sleutelwoord met de constructor van een basisklasse. Hiermee wordt voorkomen dat iemand een exemplaar van die klasse maakt. U kunt echter nog steeds klassen uitbreiden op basis van deze basisklasse.
class Person private name: string; beschermde leeftijd: aantal; protected constructor (theName: string, theAge: number) this.name = theName; this.age = theAge; introductionSelf () console.log ("Hallo, ik ben" + this.name + "!"); klas Vriend verlengt Persoon yearsKnown: number; constructor (naam: string, leeftijd: aantal, jaarBekend: aantal) super (naam, leeftijd); this.yearsKnown = yearsKnown; timeKnown () console.log ("We zijn vrienden geweest voor" + this.yearsKnown + "years.") friendSince () let firstAge = this.age - this.yearsKnown; console.log ('We zijn vrienden sinds ik $ firstAge jaar oud was.') vriend A = nieuwe vriend ("William", 19, 8); // Prints: We zijn vrienden sinds ik 11 jaar oud was. friendA.friendSince ();In de bovenstaande code kun je zien dat we de leeftijd eigendom beschermde. Dit voorkomt het gebruik van leeftijd buiten klassen afgeleid van Persoon. We hebben ook het beschermde sleutelwoord voor de constructor van de Persoon klasse. De constructor wordt aangegeven als beschermde betekent dat we niet langer direct kunnen beginnen met het maken van de Persoon klasse. De volgende schermafbeelding toont een fout die opduikt tijdens het proberen om een klas te instantiëren met de beschermde bouwer.
In deze zelfstudie heb ik geprobeerd de basisbeginselen van klassen in TypeScript te behandelen. We zijn begonnen met de zelfstudie door een erg eenvoudige basis te maken Persoon klas die de naam van de persoon op de console heeft afgedrukt. Daarna leerde je over de privaat sleutelwoord, dat kan worden gebruikt om te voorkomen dat leden van een klasse op een willekeurig punt in het programma worden benaderd.
Ten slotte hebt u geleerd hoe u verschillende klassen in uw code kunt uitbreiden met een basisklasse met overerving. Er is veel meer dat u kunt leren over klassen in de officiële documentatie.
Als je nog vragen hebt over deze tutorial, laat het me dan weten in de comments.
