Effektives TypeScript

Vorwort

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Im Frühjahr 2016 besuchte ich meinen alten Kollegen Evan Martin im Google-Büro in San Francisco und fragte ihn, worüber er sich freue. Ich hatte ihm diese Frage im Laufe der Jahre schon oft gestellt, denn die Antworten waren vielfältig und unvorhersehbar, aber immer interessant: C++ Build-Tools, Linux Audio-Treiber, Online-Kreuzworträtsel, Emacs-Plugins. Dieses Mal war Evan begeistert von TypeScript und Visual Studio Code.

Ich war überrascht! Ich hatte zwar schon von TypeScript gehört, aber ich wusste nur, dass es von Microsoft entwickelt wurde und dass ich fälschlicherweise glaubte, es hätte etwas mit .NET zu tun. Als lebenslanger Linux-Nutzer konnte ich nicht glauben, dass Evan auf das Team Microsoft aufgesprungen war.

Dann zeigte mir Evan vscode und den TypeScript-Spielplatz und ich war sofort bekehrt. Alles ging so schnell, und die Code-Intelligenz machte es einfach, ein mentales Modell des Typsystems zu erstellen. Nachdem ich jahrelang Typ-Annotationen in JSDoc-Kommentaren für den Closure Compiler geschrieben hatte, fühlte sich das wie typisiertes JavaScript an, das wirklich funktionierte. Und Microsoft hatte einen plattformübergreifenden Texteditor auf Chromium aufgebaut? Vielleicht war dies eine Sprache und Toolchain, die es wert war, gelernt zu werden.

Ich war gerade bei Sidewalk Labs eingestiegen und schrieb unser erstes JavaScript. Die Codebasis war noch so klein, dass Evan und ich sie in den nächsten Tagen komplett in TypeScript umwandeln konnten.

Seitdem bin ich süchtig. TypeScript ist mehr als nur ein Typensystem. Es bringt auch eine ganze Reihe von Sprachdiensten mit, die schnell und einfach zu benutzen sind. Der kumulative Effekt ist, dass TypeScript die JavaScript-Entwicklung nicht nur sicherer macht: Sie macht auch mehr Spaß!

Für wen dieses Buch ist

Die Effective-Bücher sollen das "zweite Standardbuch" zu ihrem Thema sein. Du wirst am meisten von Effective TypeScript profitieren, wenn du bereits praktische Erfahrung mit JavaScript und TypeScript hast. Mein Ziel mit diesem Buch ist es nicht, dir TypeScript oder JavaScript beizubringen, sondern dir dabei zu helfen, von einem Anfänger oder Fortgeschrittenen zu einem Experten zu werden. Die Themen in diesem Buch helfen dir dabei, ein mentales Modell davon zu entwickeln, wie TypeScript und sein Ökosystem funktionieren, machen dich auf Fallstricke und Fallen aufmerksam, die es zu vermeiden gilt, und leiten dich an, die vielen Möglichkeiten von TypeScript so effektiv wie möglich zu nutzen. Während ein Nachschlagewerk die fünf Möglichkeiten erklärt, mit denen eine Sprache X tun kann, sagt dir ein effektives Buch, welche dieser fünf Möglichkeiten du nutzen solltest und warum.

TypeScript hat sich in den letzten Jahren rasant weiterentwickelt, aber ich hoffe, dass es sich so weit stabilisiert hat, dass der Inhalt dieses Buches auch in den nächsten Jahren noch gültig sein wird. Dieses Buch konzentriert sich hauptsächlich auf die Sprache selbst und nicht auf Frameworks oder Build-Tools. Du wirst keine Beispiele dafür finden, wie du React oder Angular mit TypeScript verwendest oder wie du TypeScript für die Zusammenarbeit mit Webpack, Babel oder Rollup konfigurierst. Die Ratschläge in diesem Buch sollten für alle TypeScript-Nutzer relevant sein.

Warum ich dieses Buch geschrieben habe

Als ich bei Google anfing, bekam ich ein Exemplar der dritten Ausgabe von Effective C++. Es war anders als alle anderen Programmierbücher, die ich bisher gelesen hatte. Es versuchte nicht, Anfängern den Zugang zu erleichtern oder ein komplettes Handbuch für die Sprache zu sein. Anstatt dir zu erklären, was die verschiedenen Funktionen von C++ sind, sagt es dir, wie du sie verwenden solltest und wie nicht. Dies geschah durch Dutzende von kurzen, spezifischen Artikeln, die durch konkrete Beispiele motiviert wurden.

Der Effekt, all diese Beispiele zu lesen, während ich die Sprache täglich benutzte, war unverkennbar. Ich hatte zwar schon vorher mit C++ gearbeitet, aber zum ersten Mal fühlte ich mich wohl mit der Sprache und wusste, wie ich über die Möglichkeiten, die sie mir bot, nachdenken konnte. In späteren Jahren machte ich ähnliche Erfahrungen beim Lesen von Effektives Java und Effektives JavaScript.

Wenn du dich bereits in einigen Programmiersprachen auskennst, kann es eine gute Möglichkeit sein, deine mentalen Modelle zu hinterfragen und zu lernen, was sie auszeichnet. Ich habe durch das Schreiben dieses Buches enorm viel über TypeScript gelernt. Ich hoffe, dass du beim Lesen die gleiche Erfahrung machen wirst!

Wie dieses Buch organisiert ist

Dieses Buch ist eine Sammlung von "Artikeln", von denen jeder ein kurzes technisches Essay ist, das dir spezifische Ratschläge zu einem Aspekt von TypeScript gibt. Die Artikel sind thematisch in Kapitel gegliedert, aber du kannst auch einfach zwischen den Kapiteln hin- und herspringen und die lesen, die dir am interessantesten erscheinen.

Die Überschrift jedes Artikels verrät, was du mitnehmen kannst. Das sind die Dinge, an die du dich erinnern solltest, wenn du TypeScript verwendest. Es lohnt sich also, das Inhaltsverzeichnis zu überfliegen, um sie im Kopf zu behalten. Wenn du zum Beispiel eine Dokumentation schreibst und das Gefühl hast, dass du keine Typinformationen schreiben solltest, dann kannst du Punkt 30 lesen : Wiederhole keine Typinformationen in der Dokumentation.

Der Text des Artikels motiviert die Ratschläge im Titel und untermauert sie mit konkreten Beispielen und technischen Argumenten. Fast jeder Punkt in diesem Buch wird durch Beispielcode veranschaulicht. Ich neige dazu, technische Bücher zu lesen, indem ich mir die Beispiele ansehe und die Prosa überfliege, und ich nehme an, du machst es ähnlich. Ich hoffe, du wirst die Prosa und die Erklärungen lesen! Aber die wichtigsten Punkte solltest du auch verstehen, wenn du die Beispiele überfliegst.

Nachdem du den Artikel gelesen hast, solltest du verstehen, warum er dir helfen wird, TypeScript effektiver zu nutzen. Du wirst auch genug wissen, um zu verstehen, wenn er auf deine Situation nicht zutrifft. Scott Meyers, der Autor von Effective C++, gibt ein einprägsames Beispiel dafür. Er traf sich mit einem Team von Ingenieuren, die Software für den Einsatz auf Raketen schrieben. Sie wussten, dass sie seine Ratschläge zur Vermeidung von Ressourcenlecks ignorieren konnten, weil ihre Programme immer beendet wurden, wenn die Rakete das Ziel traf und ihre Hardware in die Luft flog. Mir ist keine Rakete mit JavaScript-Laufzeit bekannt, aber das James Webb Space Telescope hat eine, man weiß also nie!

Am Ende eines jeden Artikels stehen "Dinge, an die du dich erinnern solltest". Das sind ein paar Aufzählungspunkte, die den Artikel zusammenfassen. Wenn du den Artikel überfliegst, kannst du diese Punkte lesen, um ein Gefühl dafür zu bekommen, was der Artikel aussagt und ob du mehr lesen möchtest. Du solltest den Artikel trotzdem lesen! Aber die Zusammenfassung reicht zur Not auch aus.

Konventionen in TypeScript Codebeispielen

Alle Codebeispiele auf sind in TypeScript geschrieben, es sei denn, aus dem Kontext geht hervor, dass es sich um JSON, GraphQL oder eine andere Sprache handelt. Ein Großteil der Erfahrung bei der Verwendung von TypeScript besteht in der Interaktion mit deinem Editor, was im Druck einige Herausforderungen mit sich bringt. Ich habe ein paar Konventionen eingeführt, damit das funktioniert.

Die meisten Editoren zeigen Fehler durch verschnörkelte Unterstreichungen an. Um die vollständige Fehlermeldung zu sehen, fährst du mit dem Mauszeiger über den unterstrichenen Text. Um einen Fehler in einem Codebeispiel anzuzeigen, setze ich Schnörkel in eine Kommentarzeile unter die Stelle, an der der Fehler auftritt:

let str = 'not a number';
let num: number = str;
 // ~~~ Type 'string' is not assignable to type 'number'

Ich bearbeite die Fehlermeldungen gelegentlich, um sie übersichtlicher und kürzer zu machen, aber ich lösche nie einen Fehler. Wenn du ein Codebeispiel in deinen Editor kopierst und einfügst, solltest du genau die angegebenen Fehler erhalten, nicht mehr und nicht weniger.

Um auf das Fehlen eines Fehlers hinzuweisen, verwende ich // OK:

let str = 'not a number';
let num: number = str as any;  // OK

Du solltest mit dem Mauszeiger über ein Symbol in deinem Editor fahren können, um zu sehen, was TypeScript als seinen Typ ansieht. Um dies im Text anzugeben, verwende ich einen Kommentar, der mit "type is" beginnt:

let v = {str: 'hello', num: 42};  // Type is { str: string; num: number; }

Der Typ steht für das erste Symbol in der Zeile (in diesem Fallv ) oder für das Ergebnis eines Funktionsaufrufs:

'four score'.split(' ');  // Type is string[]

Dies entspricht dem Typ, den du in deinem Editor Zeichen für Zeichen sehen würdest. Bei Funktionsaufrufen musst du eventuell einer temporären Variablen zuweisen, um den Typ zu sehen.

Ich werde gelegentlich No-Op-Anweisungen einführen, um den Typ einer Variablen in einer bestimmten Codezeile anzugeben:

function foo(x: string|string[]) {
  if (Array.isArray(x)) {
    x;  // Type is string[]
  } else {
    x;  // Type is string
  }
}

Die Zeilen x; dienen nur dazu, den Typ in jedem Zweig der Bedingung zu zeigen. Du musst (und solltest) solche Anweisungen nicht in deinen eigenen Code einbauen.

Sofern nicht anders angegeben oder aus dem Kontext ersichtlich, sind die Codebeispiele für die Überprüfung mit dem --strict Flag gedacht. Alle Beispiele wurden mit TypeScript 4.4 beta überprüft.

In diesem Buch verwendete typografische Konventionen

In diesem Buch werden die folgenden typografischen Konventionen verwendet:

Kursiv

Weist auf neue Begriffe, URLs, E-Mail-Adressen, Dateinamen und Dateierweiterungen hin.

Constant width

Wird für Programmlistings sowie innerhalb von Absätzen verwendet, um auf Programmelemente wie Variablen- oder Funktionsnamen, Datenbanken, Datentypen, Umgebungsvariablen, Anweisungen und Schlüsselwörter hinzuweisen.

Constant width bold

Zeigt Befehle oder anderen Text an, der vom Benutzer wortwörtlich eingetippt werden sollte.

Constant width italic

Zeigt Text an, der durch vom Benutzer eingegebene Werte oder durch kontextabhängige Werte ersetzt werden soll.

Dieses Element steht für einen Tipp oder eine Anregung.

Dieses Element steht für einen allgemeinen Hinweis.

Dieses Element weist auf eine Warnung oder einen Warnhinweis hin.

Code-Beispiele verwenden

Zusätzliches Material (Code-Beispiele, Übungen usw.) steht unter https://github.com/danvk/effective-typescript zum Download bereit .

Wenn du eine technische Frage oder ein Problem mit den Codebeispielen hast, sende bitte eine E-Mail an [e-mail].

Dieses Buch soll dir helfen, deine Arbeit zu erledigen. Wenn in diesem Buch Beispielcode angeboten wird, darfst du ihn in deinen Programmen und deiner Dokumentation verwenden. Du musst uns nicht um Erlaubnis fragen, es sei denn, du reproduzierst einen großen Teil des Codes. Wenn du zum Beispiel ein Programm schreibst, das mehrere Teile des Codes aus diesem Buch verwendet, brauchst du keine Erlaubnis. Der Verkauf oder die Verbreitung von Beispielen aus O'Reilly-Büchern erfordert jedoch eine Genehmigung. Die Beantwortung einer Frage mit einem Zitat aus diesem Buch und einem Beispielcode erfordert keine Genehmigung. Wenn du einen großen Teil des Beispielcodes aus diesem Buch in die Dokumentation deines Produkts aufnimmst, ist eineGenehmigung erforderlich.

Wir freuen uns über eine Namensnennung, verlangen sie aber in der Regel nicht. Eine Quellenangabe umfasst normalerweise den Titel, den Autor, den Verlag und die ISBN. Ein Beispiel: "Effektives TypeScript von Dan Vanderkam (O'Reilly). Copyright 2020 Dan Vanderkam, 978-1-492-05374-3."

Wenn du der Meinung bist, dass deine Verwendung von Codebeispielen nicht unter die Fair-Use-Regelung oder die oben genannte Erlaubnis fällt, kannst du uns gerne unter [e-mail] kontaktieren .

O'Reilly Online Learning

Seit mehr als 40 Jahren bietet O'Reilly Media Schulungen, Wissen und Einblicke in Technologie und Wirtschaft, um Unternehmen zum Erfolg zu verhelfen.

Unser einzigartiges Netzwerk von Experten und Innovatoren teilt sein Wissen und seine Erfahrung durch Bücher, Artikel und unsere Online-Lernplattform. Die Online-Lernplattform von O'Reilly bietet dir On-Demand-Zugang zu Live-Trainingskursen, ausführlichen Lernpfaden, interaktiven Programmierumgebungen und einer umfangreichen Text- und Videosammlung von O'Reilly und über 200 anderen Verlagen. Weitere Informationen findest du unter http://oreilly.com.

Wie du uns kontaktierst

Bitte richte Kommentare und Fragen zu diesem Buch an den Verlag:

• O'Reilly Media, Inc.
• 1005 Gravenstein Highway Nord
• Sebastopol, CA 95472
• 800-998-9938 (in den Vereinigten Staaten oder Kanada)
• 707-829-0515 (international oder lokal)
• 707-829-0104 (Fax)

Du kannst die Webseite zu diesem Buch, auf der wir Errata, Beispiele und zusätzliche Informationen auflisten, unter https://oreil.ly/Effective_TypeScript aufrufen .

Schreib eine E-Mail an [e-mail], um Kommentare oder technische Fragen zu diesem Buch zu stellen.

Neuigkeiten und Informationen über unsere Bücher und Kurse findest du unter http://www.oreilly.com.

Finde uns auf Facebook: http://facebook.com/oreilly

Folge uns auf Twitter: http://twitter.com/oreillymedia

Schau uns auf YouTube: http://youtube.com/oreillymedia

Danksagungen

Es gibt viele Menschen, die dazu beigetragen haben, dass dieses Buch entstehen konnte. Danke an Evan Martin, der mich mit TypeScript bekannt gemacht und mir gezeigt hat, wie man darüber nachdenkt. Douwe Osinga, der mich mit O'Reilly zusammengebracht und das Projekt unterstützt hat. Brett Slatkin für seine Ratschläge zur Struktur und dafür, dass er mir gezeigt hat, dass jemand, den ich kenne, ein effektives Buch schreiben kann. An Scott Meyers für die Idee zu diesem Format und für seinen Blogbeitrag "Effective Effective Books", der mir wichtige Hinweise gegeben hat.

An meine Reviewer Rick Battagline, Ryan Cavanaugh, Boris Cherny, Yakov Fain, Jesse Hallett und Jason Killian. An alle meine Kollegen bei Sidewalk, die mit mir über die Jahre hinweg TypeScript gelernt haben. An alle bei O'Reilly, die geholfen haben, dieses Buch zu realisieren: Angela Rufino, Jennifer Pollock, Deborah Baker, Nick Adams und Jasmine Kwityn. An das TypeScript NYC-Team, Jason, Orta und Kirill, und an alle Redner. Viele Artikel wurden von den Vorträgen auf dem Meetup inspiriert, wie in der folgenden Liste beschrieben:

• Punkt 3 wurde durch einen Blogbeitrag von Evan Martin inspiriert, den ich besonders aufschlussreich fand, als ich TypeScript zum ersten Mal lernte.

• Punkt 7 wurde durch Anders' Vortrag über strukturelle Typisierung und keyof Beziehungen auf der TSConf 2018 und durch einen Vortrag von Jesse Hallett auf dem TypeScript NYC Meetup im April 2019 inspiriert.

• Sowohl der Leitfaden von Basarat als auch die hilfreichen Antworten von DeeV und GPicazo auf Stack Overflow waren beim Schreiben von Punkt 9 wichtig.

• Punkt 10 stützt sich auf ähnliche Ratschläge in Punkt 4 von Effective JavaScript (Addison-Wesley).

• Inspiriert wurde ich zu Punkt 11 durch die große Verwirrung um dieses Thema beim TypeScript NYC Meetup im August 2019.

• Punkt 13 wurde durch mehrere Fragen zu type vs. interface auf Stack Overflow stark unterstützt. Jesse Hallett schlug die Formulierung zur Erweiterbarkeit vor.

• Jacob Baskin hat uns ermutigt und erstes Feedback zu Punkt 14 gegeben.

• Artikel 19 wurde von mehreren Codebeispielen inspiriert, die imSubreddit r/typescript eingereicht wurden.

• Punkt 26 basiert auf meinem eigenen Schreiben auf Medium und einem Vortrag, den ich im Oktober 2018 beim TypeScript NYC Meetup gehalten habe.

• Punkt 28 basiert auf einem allgemeinen Ratschlag in Haskell ("illegale Zustände nicht darstellbar machen"). Die Geschichte der Air France 447 ist inspiriert von Jeff Wises unglaublichem Artikel aus dem Jahr 2011 in Popular Mechanics.

• Punkt 29 basiert auf einem Problem, das ich mit den Mapbox-Typdeklarationen hatte. Jason Killian schlug die Formulierung im Titel vor.

• Der Ratschlag zur Namensgebung in Punkt 36 ist allgemein bekannt, aber diese spezielle Formulierung wurde von Dan Norths kurzem Artikel in 97 Things Every Programmer Should Know (O'Reilly) inspiriert.

• Punkt 37 wurde von Jason Killians Vortrag beim allerersten TypeScript NYC Meetup im September 2017 inspiriert.

• Punkt 41 basiert auf den TypeScript 2.1 Release Notes. Der Begriff "evolving any" wird außerhalb des TypeScript-Compilers selbst nicht häufig verwendet, aber ich finde es nützlich, einen Namen für dieses ungewöhnliche Muster zu haben.

• Artikel 42 wurde durch einen Blogbeitrag von Jesse Hallett inspiriert. Artikel 43 wurde durch das Feedback von Tizian Cernicova Dragomir in der TypeScript-Ausgabe #33128 inspiriert.

• Artikel 44 basiert auf der Arbeit von York Yao an dem Werkzeug type-coverage. Ich wollte so etwas und es existierte!

• Punkt 46 basiert auf einem Vortrag, den ich beim TypeScript NYC Meetup im Dezember 2017 gehalten habe.

• Artikel 50 ist David Sheldricks Beitrag auf dem Artsy-Blog über bedingte Typen zu verdanken, der das Thema für mich sehr entmystifiziert hat.

• Punkt 51 wurde von einem Vortrag inspiriert, den Steve Faulkner alias southpolesteve beim Meetup im Februar 2019 gehalten hat.

• Artikel 52 basiert auf meinen eigenen Beiträgen auf Medium und meiner Arbeit am Typing-Checker-Tool, das schließlich in dtslint aufgegangen ist.

• Punkt 53 wurde durch Kat Buschs Medium-Beitrag über die verschiedenen Arten von Enums in TypeScript sowie durch Boris Chernys Schriften zu diesem Thema in Programming TypeScript (O'Reilly) inspiriert/verstärkt.

• Artikel 54 wurde durch meine eigene Verwirrung und die meiner Kollegen zu diesem Thema inspiriert. Die endgültige Erklärung findet sich bei Anders im TypeScript PR #12253.

• Die MDN-Dokumentation war für das Schreiben von Artikel 55 unerlässlich.

• Punkt 56 basiert grob auf Punkt 35 von Effective JavaScript (Addison-Wesley).

• Kapitel 8 basiert auf meinen eigenen Erfahrungen mit der Migration der alternden Dygraphs-Bibliothek.

Viele der Blogbeiträge und Gespräche, die zu diesem Buch geführt haben, habe ich über das hervorragende Subreddit r/typescript gefunden. Besonders dankbar bin ich den Entwicklern, die dort Code-Beispiele zur Verfügung gestellt haben, die für das Verständnis häufiger Probleme bei TypeScript-Anfängern unerlässlich waren. Danke an Marius Schulz für den TypeScript Weekly Newsletter. Obwohl er nur gelegentlich erscheint, ist er immer eine hervorragende Quelle für Material und eine gute Möglichkeit, sich über TypeScript auf dem Laufenden zu halten. Anders, Daniel, Ryan und dem gesamten TypeScript-Team bei Microsoft für die Gespräche und das Feedback zu den Problemen. Die meisten meiner Probleme waren Missverständnisse, aber es gibt nichts Befriedigenderes, als einen Fehler zu melden und sofort zu sehen, dass Anders Hejlsberg ihn selbst behebt! Und schließlich möchte ich mich bei Alex bedanken, der mich bei diesem Projekt so sehr unterstützt hat und so viel Verständnis für die vielen Urlaube, Morgens, Abende und Wochenenden aufbrachte, die ich brauchte, um das Projekt abzuschließen.