TypeScript för nybörjare, del 4 klasser

Vi har kommit långt i att lära sig TypeScript sedan starten av denna serie. Den första handledningen gav dig en kort introduktion till TypeScript och föreslog några IDE som du kan använda för att skriva TypeScript. Den andra handledningen fokuserade på datatyper, och den tredje handledningen diskuterade grunderna för gränssnitt i TypeScript.

Som du kanske redan vet har JavaScript nyligen bara lagt till inbyggt stöd för klasser och objektorienterad programmering. TypScript har dock tillåtit utvecklare att använda klasser i sin kod under lång tid. Koden sammanställs sedan till JavaScript som fungerar över alla större webbläsare. I denna handledning kommer du att lära dig om klasser i TypeScript. De liknar deras ES6 motsvarigheter men är strängare.

Skapa din första klass

Låt oss börja med grunderna. Klasser är en grundläggande del av objektorienterad programmering. Du använder klasser för att representera alla enheter som har vissa egenskaper och funktioner som kan fungera på givna egenskaper. TypeScript ger dig fullständig kontroll över de egenskaper och funktioner som är tillgängliga inom och utanför egen klass. Här är ett mycket grundläggande exempel på att skapa en Person klass.

klass Person namn: string; konstruktör (theName: sträng) this.name = theName;  introducera själv () console.log ("Hej, jag är" + detta.namn + "!");  låt personA = ny person ("Sally"); personA.introduceSelf ();

Ovanstående kod skapar en mycket enkel klass som heter Person. Denna klass har en egendom som heter namn och en funktion som heter introduceSelf. Klassen har också en konstruktör, som i princip också är en funktion. Konstruktörer är dock speciella eftersom de kallas varje gång vi skapar en ny instans av vår klass. 

Du kan även skicka parametrar till konstruktörer för att initialisera olika egenskaper. I vårt fall använder vi konstruktören för att initiera namnet på den person som vi skapar med hjälp av Person klass. De introduceSelf funktion är en metod för Person klass, och vi använder den här för att skriva ut personens namn till konsolen. Alla dessa egenskaper, metoder och konstruktören i en klass kallas kollektivt klassmedlemmar.

Du bör komma ihåg att Person klassen skapar inte automatiskt en person i sig. Det fungerar mer som en blueprint med all information om attribut som en person borde ha skapat. Med det i åtanke skapade vi en ny person och namngav henne Sally. Ringer metoden introduceSelf På den här personen skriver du ut raden "Hej, jag är Sally!" till konsolen.

Privata och offentliga modifierare

I det föregående avsnittet skapade vi en person som heter Sally. Just nu är det möjligt att ändra namnet på personen från Sally till Mindy någonstans i vår kod, som visas i följande exempel.

klass Person namn: string; konstruktör (theName: sträng) this.name = theName;  introducera själv () console.log ("Hej, jag är" + detta.namn + "!");  låt personA = ny person ("Sally"); // Print "Hej, jag är Sally!" personA.introduceSelf (); personA.name = "Mindy"; // Skriv ut "Hej, jag är Mindy!" personA.introduceSelf (); 

Du kanske har märkt att vi kunde använda båda namn egendom och introduceSelf metod utanför den innehållande klassen. Detta beror på att alla medlemmar i en klass i TypeScript är offentlig som standard. Du kan också explicit ange att en egenskap eller metod är allmän genom att lägga till sökordet offentlig före det.

Ibland vill du inte att en egendom eller metod ska vara tillgänglig utanför sin klass. Detta kan uppnås genom att göra medlemmarna privata med hjälp av privat nyckelord. I ovanstående kod kan vi göra namnet egendom privat och förhindra att den ändras utanför den innehållande klassen. Efter denna ändring visar TypeScript ett fel som säger att namn egendom är privat och du kan bara få tillgång till den inuti Person klass. Skärmbilden nedan visar felet i Visual Studio Code.

Arv i TypeScript

Erfarenhet gör att du kan skapa mer komplexa klasser från en basklass. Till exempel kan vi använda Person klass från föregående avsnitt som en bas för att skapa en vän klass som kommer att ha alla medlemmar av Person och lägg till några egna medlemmar. På samma sätt kan du också lägga till en Familj eller Lärare klass. 

De kommer alla att erva de metoder och egenskaper hos Person samtidigt som man lägger till några metoder och egenskaper för att skilja dem från varandra. Följande exempel ska göra det tydligare. Jag har också lagt till koden för Person klass här så att du enkelt kan jämföra koden för både basklassen och den härledda klassen.

klass Person privat namn: string; konstruktör (theName: sträng) this.name = theName;  introducera själv () console.log ("Hej, jag är" + detta.namn + "!");  klassen Friend utökar person yearsKnown: number; konstruktör (namn: sträng, årKänd: nummer) super (namn); this.yearsKnown = yearsKnown;  timeKnown () console.log ("Vi har varit vänner till" + this.yearsKnown + "years.") VännerA = ny vän ("Jacob", 6); // Utskrifter: Hej, jag är Jacob! friendA.introduceSelf (); // Utskrifter: Vi har varit vänner i 6 år. friendA.timeKnown (); 

Som du kan se måste du använda förlänga sökord för vän klass att ärva alla medlemmar av Person klass. Det är viktigt att komma ihåg att konstruktören i en härledd klass alltid måste påkalla konstruktören i basklassen med ett samtal till super().

Du kanske har märkt att konstruktören av vän behövde inte ha samma antal parametrar som basklassen. Förnamnsparametern överfördes dock till super() för att åberopa konstruktören hos föräldern, vilken också accepterade en parameter. Vi behövde inte omdefiniera introduceSelf funktionen inuti vän klass eftersom det var ärvt från Person klass.

Använd den skyddade modifieraren

Fram till denna punkt har vi bara gjort medlemmarna i en klass heller privat eller offentlig. Samtidigt som de gör dem offentliga gör det möjligt för oss att komma åt dem från var som helst, vilket gör medlemmarna privata begränsar dem till sin egen innehållande klass. Ibland kanske du vill att medlemmarna i en basklass ska vara tillgängliga inom alla härledda klasser. 

Du kan använda skyddad modifierare i sådana fall för att begränsa en medlems tillgång endast till härledda klasser. Du kan också använda skyddad nyckelord med konstruktören i en basklass. Detta förhindrar att någon skapar en förekomst av den klassen. Du kan dock fortfarande förlänga klasser baserat på denna basklass.

klass Person privat namn: string; skyddad ålder: antal; skyddad konstruktör (theName: string, theAge: number) this.name = theName; this.age = theAge;  introducera själv () console.log ("Hej, jag är" + detta.namn + "!");  klassen Friend utökar person yearsKnown: number; konstruktör (namn: sträng, ålder: antal, årKänd: nummer) super (namn, ålder); this.yearsKnown = yearsKnown;  timeKnown () console.log ("Vi har varit vänner för" + this.yearsKnown + "years.") friendSince () låt firstAge = this.age - this.yearsKnown; console.log ('Vi har varit vänner sedan jag var $ firstAge år gammal.') vän vänA = ny vän ("William", 19, 8); // Utskrifter: Vi har varit vänner sedan jag var 11 år gammal. friendA.friendSince ();

I ovanstående kod kan du se att vi gjorde ålder fast egendom skyddad. Detta förhindrar användningen av ålder utanför alla klasser som härrör från Person. Vi har också använt skyddad nyckelord för konstruktören av Person klass. Deklarera konstruktören som skyddad innebär att vi inte längre kan direkt inställa Person klass. Följande skärmdump visar ett fel som dyker upp när du försöker skapa en klass med skyddad konstruktör.

Slutgiltiga tankar

I denna handledning har jag försökt att täcka grunderna i klasserna i TypeScript. Vi började handledningen genom att skapa en mycket grundläggande Person klass som skrivit namn på personen till konsolen. Därefter lärde du dig om privat sökord, som kan användas för att förhindra att medlemmarna i en klass får tillgång till någon godtycklig punkt i programmet. 

Slutligen lärde du dig att utöka olika klasser i din kod med en basklass med arv. Det finns mycket mer att du kan lära dig om klasser i den officiella dokumentationen.

Om du har några frågor relaterade till denna handledning, låt mig veta i kommentarerna.