interfaces implementeren in JavaScript met implementeren.js

Josh J
Josh J

Volgen

Nov 7, 2017 · 5 min lezen

In deze blog post zal ik het concept van interfaces en hoe ze kunnen nuttig zijn, zelfs in dynamische talen. Ik zal ook gebruik maken van de bibliotheek implementeren.js om het concept naar JavaScript te brengen, en je te laten zien hoe je wat extra utility uit interfaces kunt halen.

Google definieert een interface als ” een punt waar twee systemen, onderwerpen, organisaties, enz. meet and interact, ” en deze definitie geldt voor interfaces in de programmering. In softwareontwikkeling is een interface een structuur die specifieke eigenschappen afdwingt op een object — in de meeste talen is dit object een klasse.

Hier is een voorbeeld van een interface in Java:

in het bovenstaande voorbeeld beschrijft de interface Car Een klasse die twee methoden heeft zonder return type, die beide een enkel integer argument hebben. De details van de uitvoering van elke functie wordt overgelaten aan de klasse, Dit is de reden waarom de methoden beide hebben geen lichaam. Om er zeker van te zijn dat een klasse de interface Car implementeert, gebruiken we het sleutelwoord implements :

Simple

Interfaces in JavaScript

Interfaces zijn geen ding in JavaScript, niet echt in ieder geval. JavaScript is een dynamische taal, een waar types zo vaak worden veranderd dat de ontwikkelaar misschien niet eens gerealiseerd, vanwege deze mensen beweren dat er geen noodzaak voor een interface om te worden toegevoegd aan de ECMAScript-standaard die JavaScript is gebaseerd op.

JavaScript is echter enorm gegroeid als backend taal in de vorm van Node.js, en met dat komt andere eisen en een andere menigte die een andere mening kan hebben. Om hieraan toe te voegen, de taal is snel de front-end tool aan het worden; het heeft het punt bereikt waarop veel ontwikkelaars het overgrote deel van hun HTML binnen zullen schrijven .js bestanden in de vorm van JSX.

als de taal groeit om meer rollen aan te nemen, is het nuttig om er dan zeker van te zijn dat een van onze meest cruciale datastructuren is wat we verwacht hadden. JavaScript kan het sleutelwoord hebben, maar in werkelijkheid is dit slechts een onbewezen constructorfunctie, en eenmaal aangeroepen is het gewoon een object. Objecten zijn alomtegenwoordig, dus het is soms nuttig om ervoor te zorgen dat ze overeenkomen met een specifieke vorm.

onlangs op het werk vond ik een geval waarin een ontwikkelaar verwachtte dat een eigenschap die geretourneerd werd als onderdeel van een API-antwoord true zou zijn, maar in plaats daarvan "true" kreeg, wat een bug veroorzaakte. Een gemakkelijke fout, en een die ook had kunnen worden vermeden als we een interface hadden.

maar wacht, er is meer!

Interfaces, met een paar kleine wijzigingen, kunnen worden gebruikt om objecten opnieuw vorm te geven. Stel je voor het implementeren van een” strikte ” interface, waar geen eigenschappen buiten de interface zijn toegestaan, kunnen we deze eigenschappen verwijderen of hernoemen, of zelfs een fout gooien als we ze tegenkomen.

dus nu hebben we een interface die ons vertelt wanneer we bepaalde eigenschappen missen, maar ook wanneer we onverwachte eigenschappen hebben, of als de typen van de eigenschappen niet zijn wat we verwachten. Dit voegt andere mogelijkheden, bijvoorbeeld refactoring een reactie van een API, terwijl het toevoegen van die extra laag van de veiligheid op de top van de interface standaard gedrag. We kunnen ook interfaces gebruiken in unit tests als we ze fouten laten gooien.

implementeren.js

implementeren.js is een bibliotheek die probeert om interfaces te brengen naar JavaScript. Het idee is eenvoudig: definieer een interface, definieer de soorten van zijn eigenschappen, en gebruik het om ervoor te zorgen dat een object is wat je verwacht dat het is.

Setup

Installeer eerst het pakket:

npm install implement-js

maak vervolgens een .js-bestand en importeert implementInterface, en type:

Onze eerste interface

Voor het maken van een interface, bel Interface en pas in een tekenreeks als de naam van uw interface — het is niet aanbevolen, maar als u het weglaten van de naam van een unieke ID gegenereerd. Dit geeft een functie terug die een object accepteert waar de eigenschappen allemaal type objecten zijn, een tweede argument kan ook worden doorgegeven met opties om waarschuwingen te tonen, fouten te gooien, eigenschappen te verwijderen of te hernoemen, ervoor te zorgen dat alleen de eigenschappen van de interface aanwezig zijn, of om een bestaande Interfaceuit te breiden.

Hier is een interface die een auto beschrijft:

Het heeft een seats eigenschap die van typenummer moet zijn, een passagiers array die objecten bevat die zelf de Passenger interface moeten implementeren, en het bevat een beep eigenschap, die een functie zou moeten zijn. De opties error en strict zijn ingesteld op true, wat betekent dat er fouten worden gemaakt wanneer een eigenschap van de interface ontbreekt en ook wanneer een eigenschap niet op de interface wordt gevonden.

implementatie van onze interface

nu willen we onze interface implementeren, in een eenvoudig voorbeeld zullen we een object maken met behulp van een object letterlijk en zien of we in staat zijn om onze interface te implementeren.

eerst maken we eenFord object, dan zullen we proberen om het te implementeren tegen onzeCar interface:

zoals we zien in het commentaar hierboven, geeft dit een fout. Laten we terugkijken op onzeCar interface:

We kunnen zien dat hoewel alle eigenschappen aanwezig zijn, de strikte modus ook Waar is, wat betekent dat de extra eigenschap fuelType Een fout veroorzaakt. Bovendien, hoewel we een passengers eigenschap hebben, is het geen array.

om de interface correct te implementeren, verwijderen we fuelType en veranderen we de waarde van passengers zodat het een array is die objecten bevat die de Passenger interface implementeren:

” maar JavaScript is geen objectgeoriënteerde taal!”

hoewel interfaces meestal geassocieerd worden met objectgeoriënteerde talen, en JavaScript een multi-paradigma taal is die prototypale overerving gebruikt, kunnen interfaces nog steeds zeer nuttig zijn.

bijvoorbeeld, met behulp van implement-js kunnen we een API-respons eenvoudig refactor terwijl we er zeker van zijn dat deze niet is afgeweken van wat we verwachten. Hier is een voorbeeld dat gebruikt wordt in combinatie met redux-thunk:

eerst definiëren we de TwitterUser interface, die de User interface uitbreidt, als een object met twitterId en twitterUsername eigenschappen. trim is waar, wat betekent dat we alle eigenschappen die niet beschreven zijn op de TwitterUser interface zullen negeren. Omdat onze API eigenschappen retourneert in een onvriendelijk formaat, hebben we de eigenschappen hernoemd van twitter_username en twitter_id naar camelcase versies van zichzelf.

vervolgens definiëren we een async-actie met redux-thunk, de actie activeert een API-aanroep, en we gebruiken onze TwitterUser interface om eigenschappen die we niet willen negeren en om ervoor te zorgen dat het de eigenschappen implementeert die we verwachten, met de juiste typen. Als u de makers van de actie liever puur(er) houdt of redux-thunk niet gebruikt, kunt u de interface binnen twitterService.getUser controleren en het resultaat retourneren.

opmerking: bij het uitbreiden van een interface opties zijn niet overgenomen

Unit tests zijn ook een geschikte plaats om interfaces te gebruiken:

in het kort

we hebben gezien hoe interfaces nuttig kunnen zijn in JavaScript: hoewel het een zeer dynamische taal is, geeft het controleren van de vorm van een object en dat de eigenschappen een specifiek gegevenstype zijn ons een extra veiligheidslaag die we anders zouden missen. Door voort te bouwen op het concept van interfaces en gebruik te maken van implement-js zijn we ook in staat geweest om extra utility bovenop de toegevoegde beveiliging te krijgen.

Posted on

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.