Share
Vi startet denne serien med en introduksjonsveiledning som introduserte deg til forskjellige TypeScript-funksjoner. Det lærte deg også hvordan du installerer TypeScript og foreslo noen IDEer du kan bruke til å skrive og kompilere din egen TypeScript-kode.
I den andre opplæringen dekket vi forskjellige datatyper som er tilgjengelige i TypeScript, og hvordan du bruker dem, kan du unngå mange feil. Tilordne en datatype som a string til en bestemt variabel forteller TypeScript at du bare vil tilordne en streng til den. Med utgangspunkt i denne informasjonen kan TypeScript vise det til deg senere når du prøver å utføre en operasjon som ikke skal gjøres på strenger.
I denne opplæringen lærer du om grensesnitt i TypeScript. Med grensesnitt kan du gå et skritt videre og definere strukturen eller typen mer komplekse objekter i koden din. På samme måte som enkle variabeltyper, må disse objektene også følge et sett med regler som er opprettet av deg. Dette kan hjelpe deg med å skrive kode mer trygt, med mindre sjanse for feil.
La oss si at du har et innsjøobjekt i koden din, og du bruker den til å lagre informasjon om noen av de største innsjøene etter område rundt om i verden. Dette innsjøobjektet vil ha egenskaper som navnet på sjøen, dens område, lengde, dybde og landene der sjøen eksisterer.
Navene på innsjøene lagres som en streng. Lengden på disse innsjøene vil være i kilometer, og områdene vil være i kvadratkilometer, men begge disse egenskapene vil bli lagret som tall. Dybden av innsjøene vil være i meter, og dette kan også være en flyte.
Siden alle disse innsjøene er svært store, er deres strandlinjer generelt ikke begrenset til et enkelt land. Vi vil bruke en rekke strenger for å lagre navnene på alle landene på en bestemt innsjøs strandlinje. En boolsk kan brukes til å spesifisere om sjøen er saltvann eller ferskvann. Følgende kodestykke oppretter et grensesnitt for vårt innsjøobjekt.
grensesnitt Innsjøer navn: streng, område: nummer, lengde: antall, dybde: tall, isFreshwater: boolean, land: streng []
De Lakes grensesnittet inneholder typen av hver eiendom vi skal bruke mens du lager våre innsjøobjekter. Hvis du nå prøver å tilordne forskjellige typer verdier til noen av disse egenskapene, får du en feil. Her er et eksempel som lagrer informasjon om vår første innsjø.
la førstLake: Innsjøer = navn: 'Kaspiske hav', lengde: 1199, dybde: 1025, areal: 371000, isFreshwater: falsk, land: ['Kasakhstan', 'Russland', 'Turkmenistan', 'Aserbajdsjan', 'Iran ']
Som du kan se, spiller ikke rekkefølgen der du tilordner en verdi til disse egenskapene. Du kan imidlertid ikke utelate en verdi. Du må tildele en verdi til hver eiendom for å unngå feil mens du samler koden.
På denne måten sørger TypeScript for at du ikke har gått glipp av noen av de nødvendige verdiene ved en feil. Her er et eksempel hvor vi glemte å tilordne verdien av dybde eiendom til en innsjø.
la secondLake: Lakes = navn: 'Superior', lengde: 616, areal: 82100, isFreshwater: true, countries: ['Canada', 'United States']
Skjermbildet nedenfor viser feilmeldingen i Visual Studio Code etter at vi har glemt å spesifisere dybde. Som du kan se, påpeker feilen tydelig at vi mangler dybde eiendom for vår innsjøobjekt.
Noen ganger trenger du kanskje bare en eiendom for noen bestemte objekter. For eksempel, la oss si at du vil legge til en eiendom for å angi månedene der en innsjø er frossen. Hvis du legger eiendommen direkte til grensesnittet, som vi har gjort til nå, vil du få en feil for andre innsjøer som ikke fryser og derfor ikke har noen frossen eiendom. På samme måte, hvis du legger til egenskapen til innsjøer som er frosset, men ikke i grensesnittdeklarasjonen, vil du fortsatt få en feil.
I slike tilfeller kan du legge til et spørsmålstegn (?) etter navnet på en eiendom for å sette det som valgfritt i grensesnittdeklarasjonen. På denne måten får du ikke en feil for enten manglende egenskaper eller ukjente egenskaper. Følgende eksempel skal gjøre det klart.
grensesnitt Innsjøer navn: streng, område: tall, lengde: antall, dybde: tall, isFreshwater: boolean, land: streng [], frosset ?: streng [] la secondLake: Innsjøer = navn: 'Superior' 406.3, lengde: 616, areal: 82100, isFreshwater: true, countries: ['Canada', 'United States'] la tredjeLake: Innsjøer = navn: 'Baikal', dybde: 1637, lengde: 636, areal: 31500 , isFreshwater: true, countries: ['Russia'], frosset: ['januar', 'februar', 'mars', 'april', 'mai']
Valgfrie egenskaper er nyttige når mange av objektene dine skal bruke dem. Men, om hver innsjø også hadde sitt eget unike sett med egenskaper som økonomiske aktiviteter, blomstrer befolkningen i forskjellige slags flora og fauna i sjøen eller bosetningene rundt innsjøen? Å legge så mange forskjellige egenskaper inne i selve grensesnittets erklæring og gjøre dem valgfrie, er ikke ideelle.
Som en løsning, lar TypeScript deg legge til ekstra egenskaper til bestemte objekter ved hjelp av indekssignaturer. Hvis du legger til en indekssignatur i grensesnittdeklarasjonen, kan du angi et hvilket som helst antall egenskaper for ulike objekter du lager. Du må gjøre følgende endringer i grensesnittet.
I dette eksemplet har jeg brukt en indekssignatur for å legge til informasjon om forskjellige bosetninger rundt innsjøene. Siden hver innsjø vil ha egne bosetninger, ville det ikke vært en god idé å bruke valgfrie egenskaper.
grensesnitt Innsjøer navn: streng, område: tall, lengde: tall, dybde: tall, isFreshwater: boolean, land: streng [], frosset ?: streng [], [ekstraProp: streng]: noen la fourthLake: Innsjøer = navn: 'Tanganyika', dybde: 1470, lengde: 676, areal: 32600, isFreshwater: true, countries: ['Burundi', 'Tanzania', 'Zambia', 'Kongo'], kigoma: 'Tanzania', kalemie: 'Kongo', bujumbura: 'Burundi'
Som et annet eksempel, la oss si at du lager et spill med forskjellige typer fiender. Alle disse fiender vil ha noen vanlige egenskaper som deres størrelse og helse. Disse egenskapene kan inkluderes direkte i grensesnittdeklarasjonen. Hvis hver kategori av disse fiender har et unikt sett med våpen, kan disse våpnene bli inkludert ved hjelp av en indeks signatur.
Når du arbeider med forskjellige objekter, må du kanskje jobbe med egenskaper som bare skal endres når vi først lager objektet. Du kan merke disse egenskapene som skrivebeskyttet i grensesnittdeklarasjonen. Dette ligner på å bruke konst søkeord, men konst skal brukes med variabler, mens skrivebeskyttet er ment for egenskaper.
TypeScript lar deg også lage arrays skrivebeskyttet bare ved å bruke ReadonlyArray. Å lage en skrivebeskyttet matrise vil resultere i fjerning av alle muterende metoder fra den. Dette gjøres for å sikre at du ikke kan endre verdien av enkelte elementer senere. Her er et eksempel på bruk av skrivebeskyttede egenskaper og arrayer i grensesnittdeklarasjoner.
grensesnitt Enemy readonly størrelse: nummer, helse: nummer, rekkevidde: nummer, lett skade: nummer la tanken: Enemy = størrelse: 50, helse: 100, rekkevidde: 60, skade: 12 // Dette er ok tank. helse = 95; // Feil fordi "skade" er skrivebeskyttet. tank.damage = 10;
Du kan også bruke grensesnitt til å beskrive en funksjonstype. Dette krever at du gir funksjonen en anrops signatur med parameterlisten og returtype. Du må også gi både et navn og en type for hver av parameterne. Her er et eksempel:
grensesnitt EnemyHit (navn: Enemy, damageDone: number): number; la tankHit: EnemyHit = funksjon (tankName: Enemy, damageDone: number) tankName.health - = damageDone; retur tankName.health;
I ovennevnte kode har vi erklært et funksjonsgrensesnitt og brukt det til å definere en funksjon som trekker skaden ut av en tank fra helsen. Som du ser, trenger du ikke å bruke det samme navnet på parametere i grensesnittdeklarasjonen og definisjonen for koden til å fungere.
Denne opplæringen introduserte deg til grensesnitt og hvordan du kan bruke dem til å sørge for at du skriver mer robust kode. Du bør nå kunne lage dine egne grensesnitt med valgfrie og skrivebeskyttede egenskaper.
Du lærte også å bruke indekssignaturer for å legge til en rekke andre egenskaper til et objekt som ikke er inkludert i grensesnittdeklarasjonen. Denne opplæringen var ment å komme i gang med grensesnitt i TypeScript, og du kan lese mer om dette emnet i den offisielle dokumentasjonen.
I neste veiledning lærer du om klasser i TypeScript. Hvis du har spørsmål knyttet til grensesnitt, gi meg beskjed i kommentarene.
Accentsconagua