TypeScript for nybegynnere, del 4 Klasser

Vi har kommet langt i å lære TypeScript siden starten av denne serien. Den første opplæringen ga deg en kort introduksjon til TypeScript og foreslo noen IDEer du kan bruke til å skrive TypeScript. Den andre opplæringen fokuserte på datatyper, og den tredje opplæringen diskuterte grunnleggende grensesnitt i TypeScript.

Som du kanskje allerede vet, har JavaScript bare nylig lagt til opprinnelig støtte for klasser og objektorientert programmering. TypeScript har imidlertid tillatt utviklere å bruke klasser i sin kode i lang tid. Denne koden blir deretter samlet til JavaScript som vil fungere over alle de store nettleserne. I denne opplæringen lærer du om klasser i TypeScript. De ligner på sine ES6-kolleger, men er strengere.

Opprette din første klasse

La oss starte med det grunnleggende. Klasser er en grunnleggende del av objektorientert programmering. Du bruker klasser til å representere alle enheter som har noen egenskaper og funksjoner som kan fungere på bestemte egenskaper. TypeScript gir deg full kontroll over egenskapene og funksjonene som er tilgjengelige innenfor og utenfor egen klasse. Her er et veldig grunnleggende eksempel på å skape en Person klasse.

Klasse Person navn: streng; konstruktør (theName: streng) this.name = theName;  introducér selv () console.log ("Hei, jeg er" + dette.navnet + "!");  la personA = ny person ("Sally"); personA.introduceSelf ();

Ovennevnte kode skaper en veldig enkel klasse som heter Person. Denne klassen har en eiendom som kalles Navn og en funksjon som kalles introduceSelf. Klassen har også en konstruktør, som også i utgangspunktet er en funksjon. Konstruktører er imidlertid spesielle fordi de kalles hver gang vi lager en ny forekomst av vår klasse. 

Du kan også sende parametere til konstruktører for å initialisere forskjellige egenskaper. I vårt tilfelle bruker vi konstruktøren til å initialisere navnet på personen vi oppretter ved hjelp av Person klasse. De introduceSelf funksjon er en metode for Person klassen, og vi bruker den her til å skrive ut navnet på personen til konsollen. Alle disse egenskapene, metodene og konstruktøren til en klasse er kollektivt kalt klassemedlemmer.

Du bør huske på at Person Klassen lager ikke automatisk en person av seg selv. Det virker mer som en tegning med all informasjon om attributter en person burde ha en gang opprettet. Med det i tankene opprettet vi en ny person og kalte henne Sally. Ringer metoden introduceSelf På denne personen vil du skrive ut linjen "Hei, jeg er Sally!" til konsollen.

Private og offentlige modifikatorer

I den forrige delen opprettet vi en person som heter Sally. For øyeblikket er det mulig å endre navnet på personen fra Sally til Mindy hvor som helst i vår kode, som vist i følgende eksempel.

Klasse Person navn: streng; konstruktør (theName: streng) this.name = theName;  introducér selv () console.log ("Hei, jeg er" + dette.navnet + "!");  la personA = ny person ("Sally"); // Utskrifter "Hei, jeg er Sally!" personA.introduceSelf (); personA.name = "Mindy"; // Skrifter "Hei, jeg er Mindy!" personA.introduceSelf (); 

Du har kanskje lagt merke til at vi var i stand til å bruke begge Navn eiendom og introduceSelf metode utenfor den inneholdende klassen. Dette skyldes at alle medlemmene av en klasse i TypeScript er offentlig som standard. Du kan også spesifikt angi at en eiendom eller metode er offentlig ved å legge til søkeordet offentlig før det.

Noen ganger vil du ikke ha en eiendom eller metode for å være tilgjengelig utenfor den som inneholder klassen. Dette kan oppnås ved å gjøre disse medlemmene private ved hjelp av privat søkeord. I ovennevnte kode kan vi gjøre navnet på eiendommen privat og hindre at den endres utenfor den inneholdende klassen. Etter denne endringen vil TypeScript vise deg en feil som sier at Navn eiendommen er privat og du kan bare få tilgang til den inne i Person klasse. Skjermbildet nedenfor viser feilen i Visual Studio-koden.

Arv i TypeScript

Arv gir deg mulighet til å lage mer komplekse klasser fra en grunnklasse. For eksempel kan vi bruke Person klasse fra forrige seksjon som en base for å lage en venn klasse som vil ha alle medlemmene av Person og legg til noen egne medlemmer. På samme måte kan du også legge til en Familie eller Lærer klasse. 

De vil alle arve metodene og egenskapene til Person mens du legger til noen metoder og egenskaper for å sette dem fra hverandre. Følgende eksempel skal gjøre det tydeligere. Jeg har også lagt til koden for Person klasse her, slik at du enkelt kan sammenligne koden til både grunnklassen og den avledede klassen.

klasse Person privat navn: streng; konstruktør (theName: streng) this.name = theName;  introducér selv () console.log ("Hei, jeg er" + dette.navnet + "!");  klasse, venn utvider person yearsKnown: number; konstruktør (navn: streng, år, navn: tall) super (navn); this.yearsKnown = yearsKnown;  timeKnown () console.log ("Vi har vært venner for" + this.yearsKnown + "years.") la vennA = ny venn ("Jacob", 6); // Utskrifter: Hei, jeg er Jacob! friendA.introduceSelf (); // Utskrifter: Vi har vært venner i 6 år. friendA.timeKnown (); 

Som du kan se, må du bruke forlenge søkeord for venn klasse for å arve alle medlemmene av Person klasse. Det er viktig å huske at konstruktøren av en avledet klasse alltid skal påkalle konstruktøren til baseklassen med en samtale til super().

Du har kanskje lagt merke til at konstruktøren til venn trengte ikke å ha samme antall parametere som grunnklassen. Imidlertid ble førsteparameteren passert til super() for å påberope konstruktøren til foreldrene, som også aksepterte en parameter. Vi måtte ikke omdefinere introduceSelf fungere inne i venn klassen fordi den var arvet fra Person klasse.

Bruke Protected Modifier

Opptil dette punktet har vi bare gjort medlemmene av en klasse heller privat eller offentlig. Mens de gjør dem offentlige, kan vi få tilgang til dem fra hvor som helst, slik at medlemmene private begrenser dem til egen klasse. Noen ganger vil du kanskje at medlemmene av en grunnklass skal være tilgjengelig i alle de avledede klassene. 

Du kan bruke beskyttet modifikator i slike tilfeller for å begrense tilgangen til et medlem bare til avledede klasser. Du kan også bruke beskyttet søkeord med konstruktøren til en grunnklasse. Dette forhindrer at noen oppretter en forekomst av den klassen. Du vil imidlertid fortsatt kunne utvide klasser basert på denne grunnklassen.

klasse Person privat navn: streng; beskyttet alder: antall; beskyttet konstruktør (theName: streng, theAge: tall) this.name = theName; this.age = theAge;  introducér selv () console.log ("Hei, jeg er" + dette.navnet + "!");  klasse, venn utvider person yearsKnown: number; konstruktør (navn: streng, alder: antall, årKjenn: tall) super (navn, alder); this.yearsKnown = yearsKnown;  timeKnown () console.log ("Vi har vært venner for" + this.yearsKnown + "years.") friendSince () la firstAge = this.age - this.yearsKnown; console.log ('Vi har vært venner siden jeg var $ firstAge år gammel.') la vennA = ny venn ("William", 19, 8); // Utskrifter: Vi har vært venner siden jeg var 11 år gammel. friendA.friendSince ();

I ovennevnte kode kan du se at vi laget alder eiendom beskyttet. Dette forhindrer bruken av alder utenfor noen klasser avledet fra Person. Vi har også brukt beskyttet søkeord for konstruktøren av Person klasse. Deklarere konstruktøren som beskyttet betyr at vi ikke lenger kan direkte instantiere Person klasse. Følgende skjermbilde viser en feil som dukker opp mens du prøver å ordne en klasse med beskyttet konstruktør.

Siste tanker

I denne opplæringen har jeg forsøkt å dekke grunnleggende om klasser i TypeScript. Vi begynte opplæringen ved å lage en veldig grunnleggende Person klasse som skrev navnet til personen til konsollen. Etter det lærte du om privat søkeord, som kan brukes til å forhindre at medlemmene i en klasse blir tilgang til på ethvert vilkårlig punkt i programmet. 

Til slutt lærte du å utvide forskjellige klasser i koden din ved hjelp av en grunnklasse med arv. Det er mye mer som du kan lære om klasser i den offisielle dokumentasjonen.

Hvis du har spørsmål relatert til denne opplæringen, gi meg beskjed i kommentarene.