So richten Sie ein TypeScript-Projekt ein

Eine gründliche Anleitung für Anfänger, die mit React Web-Apps erstellen

Foto von Artem Sapegin auf Unsplash

In all meinen Jahren als Entwickler bin ich noch nie auf eine so überwältigende Wildnis gestoßen wie The JavaScript World. Es ist eine Welt verwirrender Komplexität, in der es für ein sehr einfaches Projekt anscheinend erforderlich ist, zahlreiche Tools zu installieren, mehrere Textdateien zu bearbeiten, die all diese Tools miteinander verbinden, und eine Reihe von Terminalbefehlen auszuführen.

Es gibt einige Tools, die mit unterschiedlichem Erfolg versuchen, die Komplexität vor Ihnen zu verbergen. Solange diese Tools nicht universell einsetzbar sind, scheinen sie mir nur noch mehr Dinge zu sein, die Sie zusätzlich zu allem anderen lernen müssen.

Für mich ist die größte Irritation, dass die meisten Tutorials davon ausgehen, dass Sie bereits mit dem Ökosystem vertraut sind, sodass sie sich nicht darum kümmern, die Grundlagen zu erklären. Um dies noch zu verschlimmern, versuchen viele Tutorials, eine Reihe von zusätzlichen Tools auf Sie zu übertragen - wie Webpack, Bower, NVM und Redux - mit wenig Erklärung.

Es ist ironisch, weil JavaScript selbst bereits auf praktisch jedem Computer der Welt installiert ist, auch auf Handys. Warum sollte das Schreiben einer App auf professionelle Weise so komplex sein im Vergleich zum Schreiben einer HTML-Datei mit JavaScript-Code?

Wenn Sie wie ich ein angeborenes Bedürfnis haben, zu verstehen, was vor sich geht, und:

  • wenn Sie es nicht ertragen können, Befehle blind in Terminals und Textdateien zu kopieren
  • Wenn Sie sicherstellen möchten, dass Sie ein Tool benötigen, bevor Sie es installieren
  • Wenn Sie sich fragen, warum Ihr npm-basiertes Projekt 50 MB groß ist, bevor Sie Ihre erste Codezeile geschrieben haben

dann willkommen! Sie sind an der richtigen Stelle.

Wenn Sie jedoch in fünf Minuten mit dem Programmieren beginnen möchten, ist mir ein Trick bekannt: Überspringen Sie die Einführung hier und lesen Sie Ansatz A in Abschnitt 2. Oder wenn Sie glauben, dass ich Ihnen zu viele Informationen gebe, Überspringen Sie einfach die Teile, die Sie nicht kennenlernen möchten.

In diesem Tutorial gehe ich davon aus, dass Sie einige Programmiererfahrung mit HTML, CSS und JavaScript haben, aber keine Erfahrung mit TypeScript, React oder Node.js.

Ich gebe Ihnen einen Überblick über das JavaScript-Ökosystem, so wie ich es verstehe. Ich werde erklären, warum ich denke, dass TypeScript und React (oder Preact) die beste Wahl für die Erstellung von Web-Apps sind. Und ich helfe Ihnen, ein Projekt ohne unnötige Extras zu starten.

In Abschnitt 2 werden wir erläutern, wie und warum Sie Ihrem Projekt Extras hinzufügen können, wenn Sie dies wünschen.

Inhaltsverzeichnis

Abschnitt 1: Überblick über das JavaScript-Ökosystem

Abschnitt 2: Tatsächliches Einrichten des Projekts

  • Gemeinsame Schritte
  • Ansatz A: Der einfache Weg
  • Andere Ansätze
  • Ansatz B: Der Weg der wenigsten Werkzeuge
  • Ansatz C: Der Webpack-Weg
  • Zusammenfassung

Abschnitt 1: Überblick über das JavaScript-Ökosystem

Für viele Programmiersprachen gibt es eine bestimmte Art, Dinge zu tun, die jeder kennt.

Wenn Sie beispielsweise eine C # -Anwendung erstellen möchten, installieren Sie Visual Studio, erstellen mit wenigen Mausklicks ein Windows Forms-Projekt, klicken auf die grüne Wiedergabetaste, um Ihr neues Programm auszuführen, und schreiben dann Code dafür. Der Paketmanager (NuGet) ist eingebaut und der Debugger Just Works. Sicher, es kann einige Stunden dauern, bis die IDE installiert ist, und WPF macht ungefähr so ​​viel Spaß wie das Schlagen des Kopfes gegen eine Mauer, aber der Einstieg ist einfach. (Außer wenn Sie nicht Windows verwenden, ist das völlig anders, aber ich schweife ab.)

Andererseits gibt es in JavaScript so viele konkurrierende Bibliotheken und Tools für fast jeden Aspekt des Entwicklungsprozesses. Diese Flut von Werkzeugen kann überwältigend werden, bevor Sie Ihre erste Codezeile schreiben! Wenn Sie googeln, "wie man eine Web-App schreibt", scheint jede Website, die Sie besuchen, andere Ratschläge zu geben.

Danke draw.io für das Diagramm-Tool!

Das eine, worüber sich die meisten Menschen einig zu sein scheinen, ist die Verwendung des Node Package Managers (NPM) zum Herunterladen von JavaScript-Bibliotheken (sowohl serverseitig als auch nur im Browser). Aber auch hier verwenden einige Leute Yarn, das npm-kompatibel ist, oder möglicherweise Bower.

NPM wird mit Node.js gebündelt, einem Webserver, den Sie vollständig mit JavaScript-Code steuern. NPM ist eng in Node integriert. Beispielsweise führt der Befehl npm start standardmäßig den Knoten server.js aus.

Selbst wenn Sie vorhatten, einen anderen Webserver zu verwenden (oder keinen Webserver zu verwenden und einfach auf eine HTML-Datei doppelklicken), scheint jeder davon auszugehen, dass Sie Node.js installiert haben. Sie können also auch die Datei node.js installieren, die als Nebeneffekt npm ausgibt.

Node.js ist nicht nur ein Webserver, sondern kann auch in JavaScript geschriebene Befehlszeilen-Apps ausführen. In diesem Sinne ist der TypeScript-Compiler eine Node.js-App!

Über NPM hinaus haben Sie mehrere Möglichkeiten:

Welche JavaScript-Variante möchten Sie?

Der offizielle Name von JavaScript ist eigentlich ECMAScript, und die am weitesten verbreitete Version ist ECMAScript 6 oder kurz ES6. Alte Browser, insbesondere Internet Explorer, unterstützen nur ES5.

ES6 fügt viele nützliche und wichtige neue Funktionen wie Module, let, const, Pfeilfunktionen (oder Lambda-Funktionen), Klassen und Destrukturierungszuweisungen hinzu.

ES7 fügt einige weitere Funktionen hinzu, vor allem Async / Warten.

Wenn Sie keine Unterstützung für alte Browser benötigen und Ihr Code nicht sehr umfangreich ist, ist die direkte Ausführung Ihres Codes im Browser eine attraktive Option, da Sie Ihr JavaScript nicht "kompilieren" müssen, bevor Sie es im Browser öffnen.

Es gibt jedoch viele Gründe, einen Kompilierungsschritt zu verwenden:

  • Wenn Sie alte Browser unterstützen müssen, benötigen Sie einen "Transpiler", damit Sie die neuen Funktionen von JavaScript in alten Browsern verwenden können. Ein Transpiler ist ein Compiler, dessen Ausgabecode eine Hochsprache ist, in diesem Fall JavaScript. Der beliebteste Transpiler ist wohl Babel, gefolgt von TypeScript.
  • Wenn Sie das beliebte React-Framework (jedoch ohne TypeScript) verwenden möchten, schreiben Sie wahrscheinlich JSX-Code - XML-Fragmente in JavaScript-Code. JSX wird von Browsern nicht unterstützt und erfordert daher einen Präprozessor (normalerweise Babel).
  • Wenn Sie Ihren Code "verkleinern" möchten, damit er weniger Bandbreite benötigt (oder verschleiert ist), benötigen Sie einen "Minifier" -Preprozessor. Beliebte Minifier sind UglifyJS, JSMin und der Closure Compiler.
  • Wenn Sie die Typprüfung oder die Vervollständigung von Code in hoher Qualität (auch als IntelliSense bekannt) durchführen möchten, sollten Sie TypeScript verwenden, eine Obermenge von JavaScript (dh, jede JavaScript-Datei ist auch eine TypeScript-Datei… angeblich). TypeScript unterstützt sowohl ES7-Funktionen als auch JSX und gibt ES5- oder ES6-Code aus. Wenn TypeScript- und JSX-Code zusammen verwendet werden, muss die Dateierweiterung .tsx sein. Einige Leute verwenden eine andere Sprache, ähnlich wie TypeScript, genannt Flow.
  • Wenn Sie JavaScript nicht mögen, können Sie eine völlig andere Sprache ausprobieren, die für JavaScript geeignet ist, z. B. Elm, ClojureScript oder Dart.

Glücklicherweise ist es möglich, das Kompilieren zu automatisieren, sodass der Code jedes Mal neu kompiliert wird, wenn Sie eine Datei speichern.

In diesem Tutorial wird TypeScript verwendet, eine Obermenge von JavaScript mit einem umfassenden Typensystem. Die Vorteile von TypeScript sind:

  1. Sie erhalten Compiler-Fehlermeldungen, wenn Sie typbezogene Fehler machen (anstatt indirekt Fehler zu entdecken, wenn sich Ihr Programm schlecht verhält). In IDEs wie Visual Studio Code sind Ihre Fehler rot unterstrichen.
  2. Sie können Refactoring-Funktionen erhalten. Drücken Sie beispielsweise in Visual Studio Code die Taste F2, um eine Funktion oder Variable in mehreren Dateien umzubenennen, ohne andere gleichnamige Elemente zu beeinflussen.
  3. Mithilfe von Typen können IDEs Popups zur Code-Vervollständigung bereitstellen, die auch als IntelliSense bezeichnet werden. Dies erleichtert die Programmierung erheblich, da Sie sich nicht alle Namen und erwarteten Argumente der von Ihnen aufgerufenen Funktionen merken müssen:
IntelliSense ™ von Visual Studio Code

Tipp: Um mit TypeScript zu spielen, ohne etwas zu installieren, besuchen Sie den Spielplatz.

Client versus Server

Sie können Code auf einem Client (Front-End-Browser), einem Server (Node.js-Back-End) oder auf beiden ausführen. Der Kunde ist nicht unter Ihrer Kontrolle. Der Benutzer kann Firefox, Chrome, Safari, Opera, Edge oder im schlimmsten Fall Internet Explorer verwenden.

Beachten Sie aus Sicherheitsgründen, dass der Benutzer das Verhalten eines Browsers mithilfe von Browsererweiterungen oder den F12-Entwicklertools ändern kann. Sie können nicht einmal sicher sein, ob Ihr Code in einem echten Browser ausgeführt wird.

Früher vertrauten Entwickler auf die jQuery-Bibliothek, um ein konsistentes Verhalten in verschiedenen Browsern zu erzielen. Heutzutage können Sie sich jedoch darauf verlassen, dass verschiedene Browser sich in den meisten Fällen gleich verhalten (mit Ausnahme von Internet Explorer).

In diesem Tutorial führen wir den gesamten wichtigen Code im Browser aus, richten jedoch auch einen einfachen Node.js-Server ein, um die App für den Browser bereitzustellen. Viele andere Server wie Apache, IIS oder ein statischer Server wie Jekyll sind verfügbar.

Aber Node.js ist zu einer Art Standard geworden, wahrscheinlich, weil Node.js und NPM zusammen gebündelt sind.

Frameworks für Benutzeroberflächen

HTML und CSS allein eignen sich hervorragend für einfache Artikel mit Bildern oder einfachen Formularen. Wenn das alles ist, was Sie tun, wird wahrscheinlich überhaupt kein JavaScript benötigt. CSS kann sogar einige Dinge tun, die früher JavaScript erforderten, wie Pulldown-Menüs, Seiten, die sich für kleine / mobile Browser oder zum Drucken vollständig neu formatieren, und Animationen.

Wenn Sie etwas Komplexeres benötigen oder Ihre Seiten dynamisch aus Rohdaten generiert werden, möchten Sie wahrscheinlich JavaScript mit einer optionalen Benutzeroberflächenbibliothek oder einem optionalen Framework verwenden. Ich zeige Ihnen später, wie Sie React, das als das beliebteste UI-Framework gilt, und seinen kleinen Cousin Preact verwenden.

Zu den „großen“ beliebten Alternativen zählen Angular 2 und Vue.js, zu den „kleinen“ gehören D3, Mithril und ein alter Klassiker namens jQuery.

Wenn auf Ihrem Webserver JavaScript (Node.js) ausgeführt wird, können Sie React auf dem Server ausführen, um das erste Erscheinungsbild der Seite vorab zu generieren.

Erstellen Sie Tools

Es gibt verschiedene Tools zum „Erstellen“ und „Verpacken“ Ihres Codes - Webpack, Grunt, Browserify, Gulp, Parcel - aber all diese Dinge sind optional. Ich zeige Ihnen, wie Sie mit npm und, wenn Sie möchten, mit Parcel oder Webpack zurechtkommen.

CSS-Varianten

In diesem Artikel verwenden wir einfaches CSS. Wenn Sie trotzdem einen Kompilierungsschritt durchführen möchten, sollten Sie SCSS ausprobieren, eine "verbesserte" Ableitung von CSS mit zusätzlichen Funktionen. Sie können auch SASS verwenden, das konzeptionell mit SCSS identisch ist, jedoch eine präzisere Syntax aufweist.

In beiden Fällen benötigen Sie den Sass-Präprozessor. Und wie immer in der JavaScript-Welt gibt es eine Reihe von Alternativen, insbesondere WENIGER.

Unit-Test

Die beliebtesten Unit-Testing-Bibliotheken sind Mocha, Jasmine und Jest. Sehen Sie hier für mehr. NPM verfügt über einen speziellen Befehl zum Testen, npm test (kurz für npm run test).

Andere Bibliotheken

Andere beliebte JavaScript-Bibliotheken sind neben Redux Lodash, Ramda, Underscore und GraphQL.

Das beliebteste Flusenprogramm ist ESLint.

Bootstrap ist eine beliebte CSS-Bibliothek, erfordert jedoch einen JavaScript-Teil (und es ist wirklich SASS, nicht CSS).

Wenn Sie $ in JavaScript-Code sehen, bezieht sich dies normalerweise auf jQuery. Wenn Sie _ sehen, bezieht sich dies normalerweise entweder auf Lodash oder auf Unterstrich.

Und vielleicht lohnt es sich, die beliebten Vorlagenbibliotheken zu erwähnen: Jade, Mops, Schnurrbart und Lenker.

Nicht-Web-Apps

Ich werde dazu nichts weiter sagen, aber TypeScript und JavaScript können auch außerhalb des Webs verwendet werden.

Mit Electron können Sie plattformübergreifende Desktop-Apps schreiben. Mit React Native können Sie JavaScript-Apps für Android- / iOS-Geräte schreiben, die über eine native Benutzeroberfläche verfügen. Sie können mit Node.js auch Befehlszeilen-Apps schreiben.

Modultypen

Am längsten lief der gesamte JavaScript-Code in einem einzigen globalen Namespace. Dies führte zu Konflikten zwischen nicht verwandten Codebibliotheken. Daher wurden verschiedene Arten von „Moduldefinitionen“ erfunden, um zu simulieren, was andere Sprachen als Pakete oder Module bezeichnen.

Node.js verwendet CommonJS-Module, die eine magische Funktion namens require ('Modulname') zum Importieren von Modulen und eine magische Variable namens module.exports zum Erstellen von Modulen beinhalten. Zum Schreiben von Modulen, die sowohl in Browsern als auch in Node.js funktionieren, können UMD-Module (Universal Module Definition) verwendet werden. Module, die asynchron geladen werden können, verwenden AMD.

ES6 führte ein Modulsystem mit Schlüsselwörtern zum Importieren und Exportieren ein, das von Node.js und einigen Browsern jedoch nicht unterstützt wird. Hier ist eine Einführung in die verschiedenen Modultypen.

Polyfills & Prototypen

Als erfahrener Entwickler fallen mir nur zwei Wörter (außer den Namen der Bibliotheken und Werkzeuge) ein, die nur in JavaScript Land verwendet werden: polyfill und prototype.

Polyfills sind Hilfsmittel für die Abwärtskompatibilität. Dies sind in JavaScript geschriebene Codeteile, mit denen Sie neue Funktionen in alten Browsern verwenden können. Beispielsweise testet der Ausdruck "food" .startsWith ('F'), ob der String 'food' mit F beginnt (für den Datensatz ist das falsch - er beginnt mit f, nicht mit F.). StartsWith ist jedoch eine neue Funktion von JavaScript Das ist in älteren Browsern nicht verfügbar.

Sie können es mit diesem Code „polyfüllen“:

String.prototype.startsWith = String.prototype.startsWith ||
  Funktion (Suche, Pos) {
    Suche zurück ===
      this.substr (! pos || pos <0? 0: + pos, search.length);
  };

Dieser Code hat die Form X = X || function (...) {...}, was bedeutet: "Wenn X definiert ist, setze X auf sich selbst (ändere es nicht), andernfalls setze X auf diese Funktion." sollst.

Dieser Code verweist auf eine der anderen Besonderheiten von JavaScript, die Idee von Prototypen. Prototypen entsprechen in etwa Klassen in anderen Sprachen. Mit diesem Code wird also die Definition des integrierten String-Datentyps geändert. Wenn Sie anschließend 'string'.startsWith () schreiben, wird diese Polyfüllung aufgerufen (falls String.prototype.startsWith nicht bereits definiert wurde). Es gibt verschiedene Artikel, die Sie über Prototypen und prototypische Vererbung wie diesen informieren.

Sogar einige erweiterte Browserfunktionen verfügen über Polyfills. Haben Sie schon von WebAssembly gehört, mit dem Sie C- und C ++ - Code in einem Browser ausführen können? Es gibt eine JavaScript-Polyfüllung dafür!

Kredit

Ich möchte mich bei der State of Javascript-Umfrage und den State of JavaScript-Frameworks für viele der oben genannten Informationen bedanken! Für einige Artikel habe ich npm-stat verwendet, um die Popularität zu messen. Siehe auch diese andere neue Umfrage.

Abschnitt 2: Tatsächliches Einrichten des Projekts

Sie da! Noch wach? Jetzt werden wir einen Rundgang durch das Ökosystem der JavaScript-Tools machen. In diesem Teil geht es nicht um React (wir werden später darauf zurückkommen), sondern es enthält eine einfache React-Komponente.

Dies ist eine großartige Tour. Wir werden Ihre App also auf drei verschiedene Arten schreiben (mit einer Zusammenfassung danach):

  • A. Der einfachste Weg (mit Paket)
  • B. Der Weg der wenigsten Werkzeuge (oder der Heimwerkerweg)
  • C. Der Webpack-Weg

Die ersten sechs Schritte sind bei allen drei Ansätzen gleich. Beginnen wir also!

Schritt 1: Installieren Sie Node.js / npm

Wenn Sie es noch nicht getan haben, installieren Sie Node.js, wodurch auch der Befehlszeilen-Paketmanager npm installiert wird.

Wenn Sie Ihre App auf einem anderen Webserver bereitstellen möchten, sollten Sie sich später Gedanken darüber machen, wie Sie dies tun können.

Schritt 2: Installieren Sie Visual Studio Code oder einen anderen Editor

Einer der Hauptgründe für die Verwendung von TypeScript anstelle von JavaScript ist die Unterstützung von Funktionen zur Codevervollständigung.

Um diesen Vorteil nutzen zu können, müssen Sie Ihre TypeScript .ts-Dateien in einem kompatiblen Editor wie Visual Studio Code bearbeiten, der kostenlos und plattformübergreifend ist. Es ist auch der beliebteste Texteditor für JavaScript-Apps. Alternativen sind Atom und Sublime Text.

Visual Studio Code (VS Code) ist ordnerorientiert: Sie öffnen einen Ordner in VS Code und dieser Ordner wird wie das aktuelle „Projekt“ behandelt. Während der Installation (auf jeden Fall unter Windows) wird ein Kontrollkästchen zum Hinzufügen einer Aktion "Mit Code öffnen" für Ordner (Verzeichnisse) angezeigt. Ich empfehle diese Option als einfache Möglichkeit, VS Code aus einem beliebigen Ordner zu starten:

Erstellen Sie einen leeren Ordner für Ihre App und öffnen Sie diesen Ordner in VS Code. Beachten Sie, dass VS Code über ein integriertes Terminal verfügt, sodass Sie kein separates Terminalfenster benötigen.

Schritt 3: Richten Sie package.json ein

Die Datei package.json repräsentiert Ihre Projektkonfiguration. Dazu gehören der Name, die Erstellungsbefehle, die Liste der von Ihrem Projekt verwendeten npm-Module und vieles mehr.

Wenn Sie dies noch nicht getan haben, erstellen Sie einen leeren Ordner für Ihre App und öffnen Sie ein Terminalfenster in diesem Ordner.

Führen Sie im Terminal npm init aus.

npm init wird Ihnen einige Fragen stellen, um package.json zu erstellen. Lassen Sie ein Feld leer, um den Standardvorschlag zu akzeptieren.

Ich wollte eine kleine pädagogische App erstellen, um einige Grafiken zu zeichnen, die zeigen, wie die Klimawissenschaft den Temperaturrekord des 20. Jahrhunderts erklärt.

Also habe ich meine App Climate-App genannt:

C: \ Dev \ climate-app> npm init
Dieses Dienstprogramm führt Sie durch die Erstellung einer package.json-Datei.
Es werden nur die gängigsten Elemente behandelt, und es wird versucht, sinnvolle Standardeinstellungen zu erraten.
[....]
Paketname: (Klima-App)
Version: (1.0.0)
Beschreibung: Demo zur Visualisierung von Klimadaten
Einstiegspunkt: (index.js)
Testbefehl:
Git-Repository:
Schlüsselwörter:
Autor: David Piepgrass
Lizenz: (ISC) MIT
Schreiben an C: \ Dev \ climate-app \ package.json:
{
  "name": "klima-app",
  "version": "1.0.0",
  "description": "Demo zur Visualisierung von Klimadaten",
  "main": "index.js",
  "Skripte": {
    "test": "echo" Fehler: kein Test angegeben "&& exit 1"
  },
  "author": "David Piepgrass",
  "Lizenz": "MIT"
}
Ist das ok? (Ja)

Beachten Sie den Verweis auf index.js. Seltsamerweise muss diese Datei nicht existieren und wir werden sie nicht verwenden. Es wird nur verwendet, wenn Sie Ihren Code über npm teilen.

Schritt 4: Installieren Sie Typescript

VS-Code hat angeblich eine „Sprachunterstützung“ für TypeScript anstelle eines TypeScript-Compilers, daher müssen wir jetzt den Compiler installieren.

Es gibt zwei Möglichkeiten, TypeScript mit npm zu installieren. Entweder verwenden

npm install --global typescript

oder

npm install --save-dev typescript

Wenn Sie die Option --global verwenden, ist der TypeScript-Compiler tsc in allen Projekten auf demselben Computer verfügbar. Es ist auch als Terminalbefehl verfügbar, wird jedoch nicht zu Ihrer package.json-Datei hinzugefügt. Wenn Sie Ihren Code für andere freigeben, wird TypeScript daher nicht installiert, wenn eine andere Person Ihren Code erhält und npm install ausführt.

Wenn Sie --save-dev verwenden, wird TypeScript zu package.json hinzugefügt und im Ordner node_modules Ihres Projekts installiert (aktuelle Größe: 34,2 MB), es ist jedoch nicht direkt als Terminalbefehl verfügbar.

Sie können es weiterhin vom Terminal aus als ./node_modules/.bin/tsc ausführen und Sie können tsc weiterhin im Abschnitt "scripts" von package.json unter npm verwenden.

Unterhaltsame Tatsache: Der TypeScript-Compiler ist plattformübergreifend, da er in TypeScript geschrieben und in JavaScript kompiliert ist.

Schritt 5: Installieren Sie React oder Preact

So fügen Sie Ihrem Projekt "Reagieren" hinzu:

npm install reagier-dom
npm install --save-dev @ types / reag @ types / reag-dom

Hinweis: --save-dev kennzeichnet Dinge als "für die Entwicklung verwendet", während --save (dies ist die Standardeinstellung und daher optional) "vom Programm verwendet, wenn es bereitgestellt wird" bedeutet.

@types-Pakete stellen TypeScript Typinformationen zur Verfügung, werden jedoch nicht verwendet, wenn Ihr Code ausgeführt / bereitgestellt wird.

Wenn Sie --save-dev vergessen oder im falschen Paket verwenden, funktioniert Ihr Projekt weiterhin. Die Unterscheidung ist nur wichtig, wenn Sie Ihr Projekt als npm-Paket freigeben.

Alternativ können Sie Preact verwenden, das fast dem von React entspricht, jedoch mehr als zehnmal kleiner ist. In Preact sind TypeScript-Typdefinitionen integriert, sodass Sie zur Installation nur einen einzigen Befehl benötigen:

npm install preact

Tipp: npm i ist eine Abkürzung für npm install und -D ist eine Abkürzung für --save-dev.

Hinweis: Installieren Sie preact und @ types / react nicht im selben Projekt, da sonst tsc wahnsinnig wird und etwa 150 Fehler verursacht (siehe Problem # 639). In diesem Fall deinstallieren Sie die React Types mit npm uninstall @ types / react @ types / react-dom

Schritt 6: Schreiben Sie einen Reaktionscode

Erstellen Sie mit diesem kleinen React-Programm eine Datei namens app.tsx:

Hinweis: Damit das eingebettete JSX (HTML / XML) funktioniert, muss die Dateierweiterung tsx und nicht ts lauten.

Wenn Sie Probleme haben, Ihren Code zum Laufen zu bringen, versuchen Sie stattdessen diesen Code - es ist das einfachste mögliche React-Programm:

import * as ReactDOM from 'reag-dom';
importieren * als Reagieren von 'reagieren';
ReactDOM.render (React.createElement ("h2", null, "Hallo, Welt!"),
                document.body);

Wir werden später diskutieren, wie der Code funktioniert. Konzentrieren wir uns zunächst darauf, es zum Laufen zu bringen.

Wenn Sie Preact verwenden, ändern Sie die ersten beiden Zeilen folgendermaßen:

importieren * als Reagieren von 'preact';
* als ReactDOM aus 'preact' importieren;

Einige Anmerkungen zu Preact:

  • Es gibt eine Preact-kompatible Bibliothek, mit der Sie Preact ohne Änderungen an Ihrem React-Code verwenden können. Für Benutzer von Webpack / Browserify / Babel / Brunch gibt es Verwendungsanweisungen. Auf dieser Seite wird gezeigt, wie mit Parcel vorab kompatibel gearbeitet wird.
  • Es gibt Gerüchte, dass Sie in Preact / ** @jsx h * / am Anfang der Datei schreiben sollten, wodurch TypeScript angewiesen wird, h () anstelle des Standard-React.createElement aufzurufen. In diesem Fall dürfen Sie dies nicht tun, da sonst in Ihrem Browser eine Fehlermeldung angezeigt wird, dass h nicht definiert ist (React.h ist jedoch definiert). Tatsächlich definiert Preact createElement als Alias ​​für h, und da unsere import-Anweisung React 'preact' zuweist, ist React.createElement vorhanden und funktioniert einwandfrei.

Optional: Ausführen von TypeScript-Skripten

In diesem Lernprogramm werden Webseiten erstellt, auf denen TypeScript-Code ausgeführt wird. Wenn Sie eine TypeScript-Datei direkt an der Eingabeaufforderung ausführen möchten, können Sie am einfachsten ts-node verwenden:

npm install --global ts-node

Führen Sie nach der Installation von ts-node ts-node X.ts aus, wobei X.ts der Name eines Skripts ist, das Sie ausführen möchten. Im Skript können Sie console.log ("Hello") aufrufen, um Text in das Terminal zu schreiben (das Lesen von Text von einem Benutzer ist komplizierter). Auf Linux-Systemen können Sie ein "shebang" am Anfang des Skripts setzen, wenn Sie ./X.ts direkt ausführen möchten (ohne ts-node zu erwähnen):

#! / usr / bin / env ts-node

Hinweis: Wenn Sie keine .ts-Dateien von einem Terminal ausführen müssen, müssen Sie ts-node nicht installieren.

Führen Sie Ihr Projekt aus, Ansatz A: Der einfache Weg

Ich habe Parcel entdeckt, als ich mit dem Schreiben dieses Artikels fast fertig war. Wenn ich von Anfang an von Parcel gewusst hätte, hätte ich mich vielleicht nicht darum gekümmert, über die anderen Ansätze zu schreiben. Lassen Sie mich nicht anfangen, wie einfach Paket ist! Es verdient eine Medaille!

Es ist jedoch sehr groß (81,9 MB), daher sollten Sie es global installieren:

npm install --global parcel-bundler

Die Wahrheit ist, ich habe dich angelogen. Das Paket ist so einfach, dass Sie nicht einmal alle sechs Schritte oben benötigen! Sie brauchen nur die Schritte 1, 2 und 6 (Knoten installieren, Editor installieren und Code schreiben), da Parcel die Schritte 3, 4 und 5 automatisch für Sie ausführt.

Jetzt müssen wir nur noch eine index.html-Datei erstellen, die auf unsere app.tsx-Datei verweist:

Öffnen Sie dann einfach ein Terminal im selben Ordner und führen Sie den Befehl parcel index.html aus.

Dies kann natürlich nicht direkt in einem Browser ausgeführt werden.

  1. Kompiliert app.tsx automatisch
  2. Installiert React oder Preact, sofern es nicht bereits installiert wurde, da es feststellt, dass Sie es verwenden
  3. Bündelt Ihre App mit ihren Abhängigkeiten in einer einzigen Datei namens app.dd451710.js (oder einem anderen lustigen Namen).
  4. Erstellt eine geänderte index.html, die auf die kompilierte und gebündelte App verweist
  5. Verschiebt diese neuen Dateien in einen Ordner mit dem Namen dist.

Und dann erledigt es alles für Sie:

  1. Es führt Ihre App auf einem Mini-Webserver unter http://127.0.0.1:1234 aus und kann in einem Webbrowser auf demselben Computer angezeigt werden
  2. Es überwacht Änderungen an Ihrem Code (app.tsx und index.html) und kompiliert neu, wenn Sie sie ändern
  3. Wenn sich Ihre Dateien ändern, wird ein Befehl zum automatischen Aktualisieren an Ihren Webbrowser gesendet.
  4. Darüber hinaus wird die Seite aktualisiert, ohne dass sie mithilfe der Funktion "Hot Module Replacement" vollständig neu geladen wird

Es kann schwierig sein, einen konventionellen Build einzurichten, der all diese Dinge erledigt. Dieses Tutorial beschreibt nur, wie man # 1 und # 2 in einem konventionellen Build durchführt, nur mit Code-Neukompilierung (nicht HTML).

Weitere Informationen zu den Funktionen von Parcel finden Sie in der Parcel-Dokumentation.

Eine Einschränkung von Parcel besteht darin, dass keine Typprüfung durchgeführt wird (Ihr Code wird in JavaScript übersetzt, aber Typfehler werden nicht erkannt).

Für kleine Projekte ist dies kein großes Problem, da Visual Studio Code eine eigene Typprüfung durchführt. Es gibt Ihnen rote, schnörkellose Unterstreichungen, um auf Fehler hinzuweisen, und alle Fehler werden im Bereich „Probleme“ aufgelistet (drücken Sie Strg + Umschalt + M, um sie anzuzeigen). Wenn Sie möchten, können Sie npm für eine erweiterte TypeScript-Unterstützung einschließlich der Typprüfung installieren (funktioniert derzeit bei mir nicht).

Andere Ansätze

Die anderen Ansätze sind bekannter und in der JavaScript-Community Standard. Wir werden einen Ordner mit den folgenden Dateien erstellen:

  • app / index.html
  • app / app.tsx
  • package.json
  • tsconfig.json
  • server.js
  • webpack.config.js (optional)

Zur Kommunikation mit anderen Personen, die sich Ihren Code später ansehen, ist es hilfreich, den Front-End-Code Ihres Programms von der Build-Konfiguration und dem App-Server zu trennen.

Der Stammordner eines Projekts wird im Laufe der Zeit mit zusätzlichen Dateien überfüllt (z. B. .gitignore, wenn Sie git-, README- und LICENSE-Dateien verwenden, appveyor- / travis-Dateien, wenn Sie die kontinuierliche Integration verwenden). Daher sollten wir den Code von our trennen Front-End in einen anderen Ordner.

Zusätzlich zu den von uns erstellten Dateien kompiliert TypeScript app.tsx in app.js und app.js.map, während npm einen Ordner mit dem Namen node_modules und eine Datei mit dem Namen package-lock.json erstellt. Ich kann mir nicht vorstellen, warum es "Sperre" heißt, aber auf dieser Seite wird erklärt, warum es existiert.

Beginnen Sie also bitte damit, einen App-Ordner zu erstellen und Ihre app.tsx dort abzulegen.

Führen Sie Ihr Projekt aus, Ansatz B: Der Weg der wenigsten Werkzeuge

Anscheinend werden in jedem JavaScript-Projekt ein Dutzend Tools sowie das Spülbecken verwendet. Ist es möglich, ein kleines Programm ohne zusätzliche Tools zu erstellen? Es ist sicherlich! Hier ist wie.

Schritt B1: Erstellen Sie tsconfig.json

Erstellen Sie eine Textdatei mit dem Namen tsconfig.json in Ihrem Stammordner und fügen Sie diesen Code ein:

Diese Datei markiert den Ordner als TypeScript-Projekt und aktiviert Erstellungsbefehle in VSCode mit Strg + Umschalt + B (der Befehl tsc: watch ist nützlich - er kompiliert Ihren Code automatisch neu, wenn Sie ihn speichern.)

Dumme Tatsache: tsc erlaubt Kommentare in .json-Dateien, npm jedoch nicht.

Diese Datei ist sehr wichtig, denn wenn die Einstellungen nicht stimmen, kann etwas schief gehen und mysteriöse Fehler können Sie ins Gesicht schlagen. Hier ist die Dokumentation von tsconfig.json, aber die Compileroptionen sind separat dokumentiert.).

Schritt B2: Fügen Sie ein Build-Skript hinzu

Damit npm Ihren TypeScript-Code erstellen kann, müssen Sie auch Einträge im Skriptteil von package.json hinzufügen. Ändern Sie diesen Abschnitt so, dass er wie folgt aussieht:

"Skripte": {
  "test": "echo \" fehler: keine tests installiert \ "&& exit 1",
  "build": "tsc",
  "start": "node server.js"
},

Das Build-Skript führt einfach tsc aus, das Ihren Code gemäß den Optionen in tsconfig.json kompiliert. Um dieses Skript aufzurufen, schreiben Sie npm und führen build in der Befehlszeile aus.

"Aber warte!", Überlegst du vielleicht. "Es ist wirklich viel einfacher, tsc einzugeben, als npm run build!" Das stimmt, aber es gibt zwei Gründe, ein Build-Skript zu definieren:

  1. Wenn Sie TypeScript mit --save-dev, aber nicht mit --global installiert haben, können Sie tsc nicht direkt über die Befehlszeile ausführen, da es sich nicht im PATH befindet.
  2. Möglicherweise wird Ihr Erstellungsprozess später komplizierter. Durch Erstellen eines Erstellungsskripts können Sie später problemlos weitere Befehle zum Erstellungsprozess hinzufügen.

Hinweis: npm führt das Prestart-Skript immer dann automatisch aus, wenn jemand das Startskript ausführt. Sie können also ein zusätzliches Skript hinzufügen:

"prestart": "npm run build",

Dies würde Ihr Projekt immer dann erstellen, wenn Sie Ihren Server mit npm start oder npm run start starten.

Das hat aber zwei Nachteile:

  1. tsc ist etwas langsam
  2. Wenn tsc Tippfehler findet, startet Ihr Server nicht

Wenn TypeScript Typfehler erkennt, wird das Schreiben von JavaScript-Ausgabedateien trotzdem fortgesetzt. Es kann gelegentlich hilfreich sein, den Code auch bei Typfehlern auszuführen.

Das Standardverhalten von npm start ist das Ausführen von node server.js, daher erscheint es redundant, "start": "node server.js" einzuschließen. Wenn Ihr Server jedoch in TypeScript geschrieben ist, benötigen Sie diese Zeile, da server.js erst vorhanden ist, wenn server.ts kompiliert wurde. Und wenn server.js nicht existiert, gibt npm start das fehlerhafte Skript "start" aus, sofern Sie diese Zeile nicht angeben.

Schritt B3: Erstellen Sie einen einfachen Server

Um sicherzustellen, dass Node.js funktioniert, erstellen Sie eine Textdatei mit dem Namen server.js und fügen Sie den folgenden Code ein:

const http = require ('http');
http.createServer (Funktion (Anfrage, Antwort) {
  // HTTP-Header und -Text mit dem Status 200 senden (bedeutet Erfolg)
  response.writeHead (200, {'Inhaltstyp': 'text / html'});
  response.end (`
     
      

Hallo, Welt!       Sie haben gefragt nach: $ {request.url}      `); }). listen (1234);

Führen Sie npm start aus, um es zu starten. Besuchen Sie http://127.0.0.1:1234/index.html, um sicherzustellen, dass es funktioniert, und drücken Sie dann Strg + C, um den Server anzuhalten.

Um IntelliSense für Node.js zu erhalten, müssen Sie mit dem folgenden Befehl Typinformationen dafür installieren:

npm install @ types / node --save-dev

Geben Sie dann in VS Code http ein. um sicherzustellen, dass es funktioniert:

Hinter den Kulissen verwendet VS Code hierfür die TypeScript-Engine. Wenn Sie Ihre Datei jedoch in server.ts umbenennen, funktioniert IntelliSense nicht! Ist TypeScript in Node.js fehlerhaft? Nicht wirklich. TypeScript kann es trotzdem kompilieren, es ist in einem .ts-Kontext einfach nicht erforderlich. Daher sollten Sie in TypeScript-Dateien den Import verwenden, anstatt Folgendes zu erfordern:

Import * als http von 'http';

Hinweis: Dies unterscheidet sich in verwirrender Weise von den .mjs-Dateien von Node, für die der Import von http von 'http' erforderlich ist. (Einzelheiten)

TypeScript konvertiert dann den Import so, dass er in der Ausgabe benötigt wird (aufgrund der Option "module": "umd" in der Datei tsconfig.json).

Jetzt ändern wir unseren Server, damit er alle Dateien aus unserem / app-Ordner bedienen kann:

Sie werden feststellen, dass dieser Code eine lustige… Verschachtelung aufweist. Dies liegt daran, dass die Funktionen von Node.j normalerweise asynchron sind. Wenn Sie Funktionen in fs aufrufen, halten sie Ihr Programm an, bis sie fertig sind, und rufen dann eine von Ihnen bereitgestellte Funktion auf, wobei sie entweder einen Fehler (err) oder einige Informationen (fileInfo) an diese Funktion senden.

Anstatt beispielsweise Informationen zu einer Datei zurückzugeben, sendet fs.stat Informationen an einen Rückruf.

Das Schöne an diesem Webserver ist, dass er request.method ignoriert und jede Anfrage so behandelt, als wäre es ein GET. Aber es funktioniert gut genug, um loszulegen.

Schritt B4 (optional): Verwenden Sie Express

Wenn Sie möchten, dass Ihre Serverseite Routing ausführt, das komplizierter ist als das Bereitstellen einiger Dateien, sollten Sie sich mit dem beliebtesten Node.js-Serverframework vertraut machen: Express.

Wenn wir Express verwenden, ist unser Servercode viel kürzer.

Installiere es einfach mit npm install express und füge den folgenden Code in server.js ein:

const express = require ('express');
const app = express ();
app.use ('/ node_modules', express.static ('node_modules'));
app.use ('/', express.static ('app'));
app.listen (1234, () => console.log (
    'Express Server läuft unter http://127.0.0.1:1234'));

Schritt B5: Erstellen Sie eine Webseite für Ihre App

Erstellen Sie schließlich in Ihrem App-Ordner eine index.html-Datei, um Ihre App zu laden:

Diese Seite enthält sowohl React (react.development.js und react-dom.development.js) als auch Preact (preact.dev.js). Daher muss ich Ihnen nicht für jede Seite eine separate Anleitung geben. Sie können das entfernen, was Sie nicht verwenden, aber die Seite kann immer noch mit nicht aufgelösten Skriptelementen geladen werden.

Zu diesem Zeitpunkt sollten Sie in der Lage sein, Ihren Code zu erstellen (npm run build), Ihren Server zu starten (npm start) und Ihre App unter http://127.0.0.1:1234 anzuzeigen!

Denken Sie daran, dass Sie Ihren Code in VS Code automatisch neu kompilieren können: Drücken Sie Strg + Umschalt + B und wählen Sie tsc: watch.

Hinweis: Es ist wichtig, app.js am Ende des Texts zu laden. Andernfalls zeigt React den Fehler an: Der Zielcontainer ist kein DOM-Element, da app.js document.getElementById ('app') aufruft, bevor das app-Element vorhanden ist.

An dieser Stelle ist anzumerken, dass dieser Code ein wenig hacky ist. Vor allem dieser Teil: