suchen
HeimWeb-FrontendCSS-TutorialErstellen von wiederverwendbaren Basisklassen in Typenkript mit einem realen Beispiel

Erstellen wiederverwendbarer Basisklassen in Typenkript mit einem realen Beispiel

Dieser Artikel befasst sich mit der Erstellung wiederverwendbarer Basisklassen in TypeScript und erweitert einen früheren Beitrag zur Konvertierung von TypeScript. Während dieser Beitrag allein steht, bietet der verknüpfte Beitrag wertvolle Erkenntnisse in das Umschreiben von Codebase und die Einheitstests.

Johnny-Five, eine IoT- und Robotics-Bibliothek für Node.js, vereinfacht die Hardware-Interaktion mit einem JQuery-ähnlichen Ansatz: Normalisierung der Unterschiede zwischen Plattformen und Bereitstellung von Abstraktionen auf höherer Ebene. Es unterstützt verschiedene Plattformen über IO -Plugins, einschließlich Arduino, Tessel und Raspberry Pi. Raspi Io, ein Plugin unterstützend Raspberry Pi, wurde in Typenkript umgeschrieben, was zur Erstellung einer wiederverwendbaren Basisklasse führte.

Entwerfen einer wiederverwendbaren Basisklasse

Für diejenigen, die mit klassenbasiertem Vererbung nicht vertraut sind, bietet eine Basisklasse eine gemeinsame Struktur und Funktionalität, die sich die Unterklassen ausdehnen können. Betrachten Sie dieses vereinfachte TypeScript -Beispiel:

 Abstraktes Klassenautomobil {
  private _speed: number = 0;
  private _direction: number = 0;
  öffentlicher Drive (Geschwindigkeit: Nummer): void {
    this._speed = Geschwindigkeit;
  }

  öffentliche Kurve (Richtung: Nummer): void {
    if (Richtung> 90 || Richtung <p> Diese <code>Automobile</code> -Basisklasse wird erweitert, um eine <code>Sedan</code> zu erstellen. Alle Methoden beider Klassen sind zugänglich. In ähnlicher Weise wurde eine <code>AbstractIO</code> Basisklasse für die IO-Plugins von Johnny-Five erstellt.</p><h3 id="Implementierung-von-Abstractio"> Implementierung von Abstractio</h3><p> <code>AbstractIO</code> ist ein NPM -Paket, das eine Basisklasse bietet, die sowohl den Best Practices TypeScript- als auch den JavaScript -Best Practices entspricht. Untersuchen wir die <code>MODES</code> -Eigenschaft und <code>digitalWrite</code> -Methode:</p><p> Die Eigenschaft <code>MODES</code> ist ein Objektzuordnungsmodus (Eingabe, Ausgabe usw.) für numerische Konstanten. In TypeScript ist ein Enum ideal, aber JavaScript fehlt diese Funktion. Die Lösung? Eine Typscript -Enum wird intern verwendet und einem JavaScript -Objekt extern zugeordnet:</p><pre class="brush:php;toolbar:false"> Exportieren des Enum -Modus {
  Input = 0,,
  Ausgabe = 1,,
  Analog = 2,
  Pwm = 3,
  Servo = 4,
  Stepper = 5,
  Unbekannt = 99
}

public Get modes () {
  zurückkehren {
    Eingabe: modus.input,
    Ausgabe: modus.output,
    Analog: Modus.Analog,
    PWM: modus.pwm,
    Servo: modus.servo,
    Unbekannt: modus.Unnown
  };
}

Für Methoden, die Unterklassenüberschreibungen erfordern (wie digitalWrite ), wurde ein JavaScript -Ansatz angewendet: Ein Fehler in der Basisklasse zu werfen:

 public digitalWrite (PIN: String | Nummer, Wert: Nummer): void {
  Neuen Fehler werfen (`digitalWrite wird nicht von $ {this.name}`) unterstützt;
}

Dies funktioniert sowohl in TypeScript als auch in JavaScript, obwohl TypeScript keine Warnungen für nicht übertriebene Methoden enthält.

Wichtige Erkenntnisse

Der Entwurfsprozess für Typscript und JavaScript hat diese wichtigen Punkte hervorgehoben:

  1. Priorisieren Sie gemeinsame Best Practices.
  2. Wenn Konflikte auftreten, verwenden Sie die Best Practices von TypeScript intern und ordnen Sie sie extern auf JavaScript ab.
  3. Wenn weder funktioniert, standardmäßig die Best Practices von JavaScript.

Abstrakte Klassen erwiesen sich in JavaScript weniger nützlich, und die Enten -Typing über Module hinweg stellten Wartungsherausforderungen dar. Das iterative Feedback der Bibliotheksverbraucher war für ein erfolgreiches Design von entscheidender Bedeutung.

Abschluss

Das Erstellen von Basisklassen sowohl für Typscript- als auch für JavaScript -Benutzer ist erreichbar, obwohl einige Kompromisse erforderlich sind. AbstractIO dient erfolgreich beide Gemeinschaften und zeigt, dass ein Gleichgewicht getroffen werden kann.

Das obige ist der detaillierte Inhalt vonErstellen von wiederverwendbaren Basisklassen in Typenkript mit einem realen Beispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Dies soll nicht passieren: Fehlerbehebung beim UnmöglichenDies soll nicht passieren: Fehlerbehebung beim UnmöglichenMay 15, 2025 am 10:32 AM

Wie es aussieht, eines dieser unmöglichen Probleme zu beheben, die sich als etwas ganz anderes herausstellen, an das Sie nie gedacht haben.

@Keyframes vs CSS Übergänge: Was ist der Unterschied?@Keyframes vs CSS Übergänge: Was ist der Unterschied?May 14, 2025 am 12:01 AM

@KeyFramesandcsStransitionSdifferinComplexity:@keyFramesAllowsfordetailedanimationsequenzen, whilecsStransitionShandleSmplestatechanges.USecsStransitionsForHovereffectSlikeButtonColorchanges sowie@keyframesforintricateanimationslikerotierungen.

Verwenden von Seiten CMS für statische Site Content ManagementVerwenden von Seiten CMS für statische Site Content ManagementMay 13, 2025 am 09:24 AM

Ich weiß, ich weiß: Es gibt eine Menge von Content -Management -Systemoptionen, und während ich mehrere getestet habe, war keiner wirklich derjenige, den Sie wirklich wissen? Seltsame Preismodelle, schwierige Anpassungen, einige werden sogar ein Ganzes &

Die ultimative Anleitung zum Verknüpfen von CSS -Dateien in HTMLDie ultimative Anleitung zum Verknüpfen von CSS -Dateien in HTMLMay 13, 2025 am 12:02 AM

Das Verknüpfen von CSS -Dateien mit HTML kann durch die Verwendung von Elementen in einem HTML erreicht werden. 1) Verwenden Sie Tags, um lokale CSS -Dateien zu verknüpfen. 2) Mehrere CSS -Dateien können durch Hinzufügen mehrerer Tags implementiert werden. 3) Externe CSS -Dateien verwenden absolute URL -Links wie z. 4) Stellen Sie die korrekte Verwendung von Dateipfaden und CSS -Dateiladeauftrag sicher und optimieren Sie die Leistung können mit CSS -Präprozessor zusammengeführt werden, um Dateien zu verschmelzen.

CSS Flexbox vs Grid: Eine umfassende ÜberprüfungCSS Flexbox vs Grid: Eine umfassende ÜberprüfungMay 12, 2025 am 12:01 AM

Die Auswahl von Flexbox oder Grid hängt von den Layoutanforderungen ab: 1) Flexbox ist für eindimensionale Layouts wie die Navigationsleiste geeignet. 2) Das Gitter eignet sich für zweidimensionale Layouts wie Zeitschriftenlayouts. Die beiden können im Projekt verwendet werden, um den Layout -Effekt zu verbessern.

So füge CSS -Dateien ein: Methoden und Best PracticesSo füge CSS -Dateien ein: Methoden und Best PracticesMay 11, 2025 am 12:02 AM

Der beste Weg, um CSS -Dateien einzubeziehen, besteht darin, Tags zu verwenden, um externe CSS -Dateien in den HTML -Teil einzuführen. 1. Verwenden Sie Tags, um externe CSS -Dateien einzuführen, wie z. 2. Für kleine Anpassungen können Inline -CSS verwendet werden, sollten jedoch mit Vorsicht verwendet werden. 3. Große Projekte können CSS -Präprozessoren wie SASS oder weniger verwenden, um andere CSS -Dateien über @import zu importieren. 4. Für die Leistung sollten CSS -Dateien zusammengeführt und CDN verwendet und mit Tools wie CSSNano komprimiert werden.

Flexbox vs Grid: Soll ich sie beide lernen?Flexbox vs Grid: Soll ich sie beide lernen?May 10, 2025 am 12:01 AM

Ja, youShouldlearnbothflexBoxandgrid.1) FlexBoxiSidealfore-dimensional, flexibelayoutslikenAvigationMenus.2) GridexcelStwo-dimensional, komplexDesignsuchasmagazinelayouts.3) Kombininierungs-Botenhances-Flexible-und-und -Anteilungskraft, und -forsfossivität,

Orbitalmechanik (oder wie ich eine CSS -Keyframes -Animation optimiert habe)Orbitalmechanik (oder wie ich eine CSS -Keyframes -Animation optimiert habe)May 09, 2025 am 09:57 AM

Wie sieht es aus, Ihren eigenen Code neu zu gestalten? John Rhea nimmt eine alte CSS -Animation auseinander, die er geschrieben hat, und geht durch den Denkprozess der Optimierung.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Nordhold: Fusionssystem, erklärt
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
Mandragora: Flüstern des Hexenbaum
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.