10 Tipps und Tricks für wesentliche Typenkripts für Angular Devs

In diesem Artikel wird eine Reihe von Tipps und Tricks erörtert, die für Winkelprojekte und andere Typenkriptprojekte gelten.

In den letzten Jahren ist die Nachfrage nach statischer Typisierung in JavaScript rasch zugenommen. Große Front-End-Projekte, komplexere Server und komplexe Befehlszeilen-Tools fördern die Notwendigkeit einer defensiveren Programmierung in der JavaScript-Welt. Darüber hinaus wird die Last, eine Anwendung zu erstellen, bevor sie tatsächlich ausgeführt wird, nicht als Schwäche, sondern als Gelegenheit. Während es zwei starke Konkurrenten gibt (TypeScript und Flow), deuten viele Trends tatsächlich darauf hin, dass nur einer Gewinn - TypeScript.

Abgesehen von Marketing und bekannten Funktionen hat TypeScript eine erstaunliche Community mit sehr aktiven Mitwirkenden. Es hat auch eines der besten Teams der Branche im Sprachdesign. Unter Anders Hejlsberg verwandelte das Team die Landschaft großer JavaScript -Projekte erfolgreich in ein Unternehmen, das von Typenkript fast ausschließlich betrieben wurde. Mit sehr erfolgreichen Projekten wie VSTS oder Visual Studio Code ist Microsoft selbst ein überzeugender Unterstützer der Technologie.

, aber was anzieht, sind nicht nur die Funktionen von Typenkript, sondern auch die Möglichkeiten und Frameworks für die Typuskripts -Unterstützung. Die Entscheidung von Google, TypeScript als bevorzugte Sprache für Angular 2 vollständig zu übernehmen, hat sich als Win-Win-Situation erwiesen. Typscript hat nicht nur mehr Aufmerksamkeit gewonnen, sondern Angular selbst hat auch sehr profitiert. Mit der statischen Typisierung kann der Compiler uns bereits informative Warnungen und nützliche Erklärungen darüber geben, warum der Code nicht funktioniert.

Schlüsselpunkte

• benutzerdefinierte Moduldefinitionen: Wenn externe Bibliotheken nicht typeScript -Definitionen sind, erstellen Sie Ihre eigenen Definitionen in der Datei module.d.ts, um die Entwicklungsgenauigkeit zu verbessern, und kann durch die Freigabe dieser Definitionen zur Community beitragen.
• Verständnis von Aufzügen und konstanten Aufzählungen: Verwenden Sie const enum für die Leistungsoptimierung, da er keinen Laufzeitcode generiert, während gewöhnliche Enums Laufzeit -Code generieren, wodurch sie auf den Projektanforderungen basieren können für die Projektanforderungen für die Anforderungen für die Projektanforderungen geeignet sind verschiedene Szenarien.
• Verwenden Sie Typ -Ausdrücke und Alias: Vereinfachen Sie die Code -Wartung und verbessern Sie die Wiederverwendbarkeit durch Verwendung von Typausdrücken und Alias, wodurch es einfacher ist, Änderungen und bessere Typprüfungen in der gesamten Codebasis vorzunehmen.
• Verwenden Sie den Diskriminator für gemeinsame Typen: Authentifizierungsunion implementieren, um Daten unterschiedlicher Formen effizienter zu verarbeiten, damit öffentliche Eigenschaften sicher verwendet werden können, um den korrekten Typkontext zu bestimmen.
• Vermeiden Sie die Verwendung any für die Spezifität: Verwenden Sie any bis wirklich allgemeine Daten und arbeiten Sie hart daran, spezifischere Typen zu definieren, wodurch die Sicherheit der Typ aufrechterhalten wird und die Laufzeitfehler reduziert.
• Verwenden Sie Generika, um flexiblen und wiederverwendbaren Code zu erstellen: Generika anwenden, um hochverwendbare und flexible Funktionen und Komponenten zu erstellen, die mit verschiedenen Typen funktionieren und gleichzeitig die Typensicherheit beibehalten können.

TypeScript -Tipps 1: Geben Sie Ihre eigene Moduldefinition

an

TypeScript ist ein Superet von JavaScript. Daher kann jedes vorhandene NPM -Paket verwendet werden. Obwohl das Typscript -Ökosystem riesig ist, sind nicht alle Bibliotheken mit geeigneten Typdefinitionen ausgestattet. Schlimmer noch, für einige (kleine) Pakete gibt es keine separate Deklaration (in Form von @typen/{Paket}). Zu diesem Zeitpunkt haben wir zwei Möglichkeiten:

1. Legacy -Code mithilfe von TypeScript -Tipps 7
einführen
2. Definieren Sie die API des Moduls selbst.

Letzteres ist definitiv die erste Wahl. Wir müssen trotzdem die Dokumentation des Moduls anzeigen, aber das Eingeben verhindert einfache Fehler während der Entwicklung. Wenn wir mit der von uns gerade erstellten Typdefinition sehr zufrieden sind, können wir sie immer an @Types senden, um sie in NPM aufzunehmen. Dies gibt uns auch Respekt und Dankbarkeit der Gemeinschaft. Gut!

Was ist der einfachste Weg, um unsere eigene Moduldefinition bereitzustellen? Erstellen Sie einfach ein modul.d.ts im Quellverzeichnis (kann auch denselben Namen wie das Paket genannt werden-beispielsweise kann es für das NPM-Paket unbekanntes Modul als unbekannte Modul.d.ts bezeichnet werden).

Stellen wir eine Beispieldefinition für dieses Modul an:

<code class="language-typescript">declare module 'unknown-module' {
  const unknownModule: any;
  export = unknownModule;
}</code>

Dies ist natürlich nur der erste Schritt, weil wir überhaupt keine verwenden sollten. (Es gibt viele Gründe, dies zu erklären. TypeScript-Tipps 5 zeigt, wie es vermieden werden kann.) Es reicht jedoch aus, das Modul verstehen zu lassen und Kompilierungsfehler wie das "unbekannte Modul" unbekannte Modul "zu verhindern. Die Exportnotation gilt hier für das klassische Paket von Modul.exports = ... Typ.

Folgendes sind die potenzielle Verwendung solcher Module in TypeScript:

<code class="language-typescript">declare module 'unknown-module' {
  const unknownModule: any;
  export = unknownModule;
}</code>

Wie bereits erwähnt, befindet sich die gesamte Moduldefinition nun in der Typdeklaration der exportierten Konstante. Wenn der exportierte Inhalt eine Funktion ist, könnte die Deklaration so aussehen:

<code class="language-typescript">import * as unknownModule from 'unknown-module';</code>

Natürlich können Sie auch Pakete verwenden, die die ES6 -Modulsyntax -Exportfunktion verwenden:

<code class="language-typescript">declare module 'unknown-module' {
  interface UnknownModuleFunction {
    (): void;
  }
  const unknownModule: UnknownModuleFunction;
  export = unknownModule;
}</code>

(Der folgende Inhalt entspricht dem Originaltext und ist länger. Um Duplikation zu vermeiden, werden hier die TypeScript-Tipps 2-10 und den nachfolgenden Inhalt weggelassen.) Bitte beziehen Sie sich nach Bedarf auf den Originaltext selbst selbst . Wenn ich weiterhin die verbleibenden Inhalte generieren muss, lassen Sie es mich bitte wissen.

Das obige ist der detaillierte Inhalt von10 Tipps und Tricks für wesentliche Typenkripts für Angular Devs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!