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.
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.
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.
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.
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.
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.