Share
We begonnen deze serie met een inleidende zelfstudie waarin u kennismaakte met verschillende TypeScript-functies. Het heeft je ook geleerd hoe je TypeScript moet installeren en hebt een aantal IDE's voorgesteld die je kunt gebruiken om je eigen TypeScript-code te schrijven en te compileren.
In de tweede zelfstudie hebben we verschillende gegevenstypen behandeld die beschikbaar zijn in TypeScript en hoe het gebruik ervan u kan helpen veel fouten te voorkomen. Het toewijzen van een gegevenstype zoals a draad aan een bepaalde variabele vertelt TypeScript dat u er alleen een string aan wilt toewijzen. Op basis van deze informatie kan TypeScript u er later op wijzen wanneer u een bewerking probeert uit te voeren die niet op tekenreeksen zou moeten worden uitgevoerd.
In deze zelfstudie leert u meer over interfaces in TypeScript. Met interfaces kunt u een stap verder gaan en de structuur of het type meer complexe objecten in uw code definiëren. Net als bij eenvoudige variabeletypen, zullen deze objecten ook een reeks regels moeten volgen die door u zijn gemaakt. Dit kan u helpen om zelfverzekerder code te schrijven, met minder kans op fouten.
Laten we zeggen dat je een meerobject in je code hebt, en je gebruikt het om informatie op te slaan over enkele van de grootste meren per gebied over de hele wereld. Dit object met een meer zal eigenschappen hebben zoals de naam van het meer, zijn oppervlakte, lengte, diepte en de landen waarin dat meer bestaat.
De namen van de meren worden opgeslagen als een touwtje. De lengte van deze meren zal in kilometers zijn, en de gebieden zullen in vierkante kilometers zijn, maar beide eigenschappen zullen als getallen worden opgeslagen. De diepten van de meren worden in meters, en dit kan ook een dobber zijn.
Omdat al deze meren erg groot zijn, zijn hun oevers over het algemeen niet beperkt tot één enkel land. We zullen een reeks snaren gebruiken om de namen van alle landen op de kustlijn van een bepaald meer op te slaan. Een Boolean kan worden gebruikt om aan te geven of het meer zout water of zoet water is. Het volgende codefragment maakt een interface voor ons object Lake.
interface Meren naam: tekenreeks, gebied: getal, lengte: getal, diepte: getal, isFreshwater: boolean, landen: tekenreeks []
De Lakes interface bevat het type van elke eigenschap die we gaan gebruiken bij het maken van onze meerobjecten. Als u nu probeert om verschillende soorten waarden toe te wijzen aan een van deze eigenschappen, krijgt u een foutmelding. Hier is een voorbeeld dat informatie over ons eerste meer opslaat.
let firstLake: Lakes = naam: 'Caspian Sea', lengte: 1199, diepte: 1025, oppervlakte: 371000, isFreshwater: false, landen: ['Kazakhstan', 'Russia', 'Turkmenistan', 'Azerbaijan', 'Iran ']
Zoals u ziet, doet de volgorde waarin u een waarde toewijst aan deze eigenschappen er niet toe. U kunt echter een waarde niet weglaten. U moet aan elke eigenschap een waarde toewijzen om fouten tijdens het compileren van de code te voorkomen.
Op deze manier zorgt TypeScript ervoor dat u per ongeluk geen van de vereiste waarden hebt gemist. Hier is een voorbeeld waarbij we vergaten de waarde van de toe te wijzen diepte eigendom voor een meer.
let secondLake: Lakes = name: 'Superior', length: 616, area: 82100, isFreshwater: true, countries: ['Canada', 'United States']
De onderstaande schermafbeelding toont het foutbericht in Visual Studio-code nadat we vergaten het diepte. Zoals je kunt zien, geeft de fout duidelijk aan dat we de missen diepte eigendom voor ons object aan het meer.
Soms hebt u mogelijk een eigenschap nodig voor een aantal specifieke objecten. Stel dat u bijvoorbeeld een eigenschap wilt toevoegen om de maanden te specificeren waarin een meer bevroren is. Als u de eigenschap rechtstreeks aan de interface toevoegt, zoals we tot nu toe hebben gedaan, krijgt u een foutmelding voor andere meren die niet bevriezen en daarom geen bevroren eigendom. Als u die eigenschap toevoegt aan meren die zijn bevroren maar niet in de interface-aangifte, krijgt u nog steeds een foutmelding.
In dergelijke gevallen kunt u een vraagteken toevoegen (?) achter de naam van een eigenschap om deze als optioneel in te stellen in de interface-declaratie. Op deze manier krijgt u geen foutmelding voor ontbrekende eigenschappen of onbekende eigenschappen. Het volgende voorbeeld zou het duidelijk moeten maken.
interface Meren naam: string, oppervlakte: aantal, lengte: aantal, diepte: getal, isFreshwater: boolean, landen: string [], bevroren ?: string [] let secondLake: Lakes = name: 'Superior', depth: 406.3, lengte: 616, oppervlakte: 82100, isFreshwater: true, landen: ['Canada', 'Verenigde Staten'] laten ThirdLake: Lakes = name: 'Baikal', depth: 1637, length: 636, area: 31500 , isFreshwater: waar, landen: ['Rusland'], bevroren: ['januari', 'februari', 'maart', 'april', 'mei']
Optionele eigenschappen zijn handig wanneer een flink aantal van uw objecten deze gaat gebruiken. Echter, wat als elk meer ook een eigen unieke reeks eigenschappen zou hebben, zoals economische activiteiten, de bevolking van verschillende soorten flora en fauna die bloeien in dat meer, of de nederzettingen rond het meer? Het toevoegen van zoveel verschillende eigenschappen binnen de declaratie van de interface zelf en ze optioneel te maken is niet ideaal.
Als een oplossing kunt u met TypeScript extra eigenschappen aan specifieke objecten toevoegen met behulp van indexhandtekeningen. Door een indexhandtekening aan de interface-declaratie toe te voegen, kunt u een willekeurig aantal eigenschappen opgeven voor verschillende objecten die u aan het maken bent. U moet de volgende wijzigingen in de interface aanbrengen.
In dit voorbeeld heb ik een indexhandtekening gebruikt om informatie over verschillende nederzettingen rond de meren toe te voegen. Aangezien elk meer zijn eigen nederzettingen heeft, zou het gebruik van optionele eigenschappen geen goed idee zijn geweest.
interface Meren naam: string, gebied: aantal, lengte: aantal, diepte: getal, isFreshwater: boolean, landen: string [], bevroren ?: string [], [extraProp: string]: any let fourthLake: Lakes = naam: 'Tanganyika', diepte: 1470, lengte: 676, oppervlakte: 32600, is Friswater: waar, landen: ['Burundi', 'Tanzania', 'Zambia', 'Congo'], kigoma: 'Tanzania', kalemie: 'Congo', bujumbura: 'Burundi'
Als een ander voorbeeld, laten we zeggen dat je een spel maakt met verschillende soorten vijanden. Al deze vijanden zullen enkele gemeenschappelijke eigenschappen hebben zoals hun grootte en gezondheid. Deze eigenschappen kunnen direct in de interface-aangifte worden opgenomen. Als elke categorie van deze vijanden een unieke reeks wapens heeft, kunnen deze wapens worden opgenomen met behulp van een indexhandtekening.
Wanneer u met verschillende objecten werkt, moet u mogelijk met eigenschappen werken die alleen moeten worden gewijzigd wanneer we het object voor het eerst maken. U kunt deze eigenschappen als markeren alleen lezen in de interface-verklaring. Dit lijkt op het gebruik van de const zoekwoord, maar const wordt verondersteld te worden gebruikt met variabelen, terwijl alleen lezen is bedoeld voor eigenschappen.
Met TypeScript kunt u ook arrays alleen-lezen maken met behulp van ReadonlyArray. Als u een alleen-lezen array maakt, worden alle mutatiemethoden verwijderd. Dit wordt gedaan om ervoor te zorgen dat u de waarde van afzonderlijke elementen later niet meer kunt wijzigen. Hier is een voorbeeld van het gebruik van alleen-lezen eigenschappen en arrays in interface-aangiften.
interface Enemy readonly size: number, health: number, range: number, readonly damage: number let tank: Enemy = size: 50, health: 100, range: 60, damage: 12 // This is Okay tank. gezondheid = 95; // Fout omdat 'schade' alleen-lezen is. tank.damage = 10;
U kunt ook interfaces gebruiken om een functietype te beschrijven. Dit vereist dat u de functie een oproepsignatuur geeft met zijn parameterlijst en retourtype. U moet ook voor elk van de parameters zowel een naam als een type opgeven. Hier is een voorbeeld:
interface EnemyHit (name: Enemy, damageDone: number): number; let tankHit: EnemyHit = function (tankName: Enemy, damageDone: number) tankName.health - = damageDone; return tankName.health;
In de bovenstaande code hebben we een functie-interface opgegeven en deze gebruikt om een functie te definiëren die de schade die aan een tank wordt toegeschreven, verrekent met zijn gezondheidstoestand. Zoals je kunt zien, hoef je niet dezelfde naam te gebruiken voor parameters in de interface-declaratie en de definitie om de code te laten werken.
Deze tutorial heeft je geïntroduceerd in interfaces en hoe je deze kunt gebruiken om ervoor te zorgen dat je meer robuuste code schrijft. U zou nu in staat moeten zijn om uw eigen interfaces te maken met optionele en alleen-lezen eigenschappen.
U hebt ook geleerd hoe u indexhandtekeningen kunt gebruiken om een verscheidenheid aan andere eigenschappen aan een object toe te voegen die niet zijn opgenomen in de interface-aangifte. Deze tutorial was bedoeld om u op weg te helpen met interfaces in TypeScript, en u kunt meer over dit onderwerp lezen in de officiële documentatie.
In de volgende zelfstudie leer je over klassen in TypeScript. Als je vragen hebt over interfaces, laat me dit dan weten in de reacties.
Accentsconagua