Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Node.js für ASP.NET-Entwickler

Node.js mit Visual Studio Code und TypeScript

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Diese Entwicklungsumgebung wird kostenlos von Microsoft zur Verfügung gestellt. Sie wurde in HTML5 und JavaScript geschrieben, setzt auf Node.js auf und unterstützt die Plattform deshalb ausgesprochen gut.

Transkript

In diesem Video-Training verwenden wir die Entwicklungsumgebung "Visual Studio Code". "Visual Studio Code" wird kostenlos von Microsoft zur Verfügung gestellt und auch entwickelt, und läuft auf Linux, Mac OSX und Windows. Das Geheimnis dahinter ist, dass "Visual Studio Code" selbst komplett in HTML5 und JavaScript geschrieben wurde und auf Node.js aufsetzt. Ich habe bereits "Visual Studio Code" heruntergeladen und installiert, und das Besondere ist eben auch daran, dass "Visual Studio Code" die Node.js-Entwicklung wahnsinnig gut unterstützt. Man kann natürlich auch für die anderen "Visual Studio"-Versionen ein Node.js-Templates herunterladen, dennoch was mir ganz gut gefällt ist, am Code, dass es eben wahnsinnig performant ist, also wahnsinnig schnell ist, leicht zu handhaben ist und man hier ja, sehr effektiv arbeiten kann, und es eben auch kostenlos ist. Jetzt brauchen wir ein neues Projekt. Und ein neues Projekt wird nicht, wie bei den anderen "Visual Studio"-Versionen, mit einer Solution-Datei angelegt, sondern man wählt einfach nur sein Verzeichnis aus, wo dann das spätere Web-Projekt legen soll. In dem Fall nehmen wir mal ein neues Verzeichnis namens "HelloNode" und das war es auch schon. Das ist jetzt unser Webprojekt. Das Schöne ist eben, wir brauchen keine Solution-Datei. Was wir als erstes benötigen ist ja die JavaScript-Datei, wo dann sie Logik von Node.js enthalten ist. Und die fügen ein mittels Rechtsklick "New File" und die nennen wir jetzt "index", aber diesmal nicht ".js" sondern ".ts". Das bedeutet, wir arbeiten hier mit TypeScript. Das Schöne ist, dass TypeScript nichts anderes ist, wie JavaScript. Das heißt, wir können hier direkt JavaScript schreiben, aber wir können mit TypeScript Features zusätzlich nutzen zur Entwicklungszeit, die JavaScript nicht bietet, und das wäre in dem Fall die Typ-Sicherheit und viele, viele weitere Features. Das bedeutet zu Beginn, der einzige Unterschied ist anstatt wir nur: "var http = require(http);" schreiben, wird einfach zusätzlich ein "import" benötigt. Das ist nur beim Laden von diesem Modul, von diesem HTTP-Modul, was externe JavaScript-Dateien sind, die hier mitreingeladen werden. Also JavaScript-Funktionen besser gesagt. Und erst mal motzt hier "Visual Studio Code", dass er HTTP überhaupt nicht kennt. Ist ja auch klar. Wir haben nirgendswo in TypeScript diese Logik implementiert. Das ist sozusagen eine fremde Library mit der wir hier arbeiten, die nicht in unserem Projekt liegt. Die wir erst später zur Laufzeit von Node.js zur Verfügung gestellt. Es ist übrigens hier vergleichbar unter C Sharp mit einem "Using", was wir hier ausführen. Und das wäre sozusagen die Assembly-Reference. Und damit "Visual Studio Code" aber das versteht, was wir hier wollen, müssten wir sogenannte TypeScript- Definition-Dateien herunterladen und ins Projekt ablegen. In diesen Dateien ist dann die exakte Beschreibung von diesem HTTP-Modul vorhanden. Und ich wechsle einfach mal hier direkt mittels Rechtsklick "Open in Command Prompt" in die Konsole. Das erste was wir benötigen ist der TypeScript-Definition-Manager. Das heißt, wieder ein weiterer Paket-Manager, und den installiert man unter: "npm install tsd -global". Das heißt, das macht man nur einmalig, dass man diesen installiert. Ich habe ihn bereits installiert. Und dann muss ich innerhalb von meinem neuen Projekt einmalig den TypeScript- Definition-Manager ansprechen, und zwar mittels "init". Er soll einmalig unser Projekt initialisieren. Und wir sehen jetzt hier links gleich, dass wir ein neues Verzeichnis bekommen mit "typings". Das heißt, da liegen dann die ganzen Beschreibungsdateien, und eine JSON-Datei, die eben auf diese Beschreibungsdatei referenziert. Es wird dennoch noch kein Node.js unterstützt. Die müssen wir nämlich jetzt erst mal installieren. Und zwar mittels: "tsd install node --save". Jetzt wir die Beschreibung für Node.js innerhalb von unserem Projekt bereitgestellt, und so können wir dann eben mit der Autovervollständigung mit einer richtigen IntelliSense arbeiten in unserem Projekt. Okay. Das war auch schon alles. Wir sehen, dass er dennoch hier motzt, dass er das Ganze nicht kennt. Die Gelegenheit nutze ich noch aus, um ein Mal zu demonstrieren, dass wie hier, wenn ich einen Punkt tippe, wirklich keinen IntelliSense bekomme. Wieso ist der Fall, dass "Visual Studio Code" das immer noch nicht kennt? Und zwar, der intrigierte TypeScript-Compiler, dem fehlen noch ein paar Informationen. Und zwar weißt er nämlich noch gar nicht, zu was für ein Modul-System denn unser TypeScript, zum Beispiel, gehört, um mit diesem Import klarzukommen. Es gibt nämlich für einen Browser ganz andere Technologien, wie bei Node.js selbst. Und das bedeutet, wir müssen jetzt hier einmal eine "tsconfig.json" anlegen, also Konfigurationsdatei, wo wir diese Regeln mitgeben. Jetzt sollte man sich auf keinen Fall abschrecken lassen, dass wir jetzt hier irgendwelche "configs" schreiben müssten, weil das Schöne ist an "Visual Studio Code", wir haben hier JSON-IntelliSense und das sieht folgendermaßen aus. Ich schreibe ein Mal die geschweiften Klammern, und mittels "Steuerung+Leertaste" bekomme ich jetzt IntelliSense, anhand dessen "config"-File, was ich hier benutze. Das heißt, "Visual Studio" erkennt, dass es sich hierbei um eine TypeScript-Datei handelt. Und wir wollen jetzt "compilerOptions" mitgeben. Und dann, das wäre, zum Beispiel, "module", und hier wird das Modul-System "commonjs" verwendet. Was es damit auf sich hat, das sehen wir in den späteren Videos, innerhalb von diesem Video-Training. Was möchte ich jetzt noch einstellen? Ich möchte, dass wenn der Compiler einmal gestartet wurde, dass er dauerhaft aktiv ist, sodass ich ihn nicht immer starten muss. Und da gibt es dann die Option "watch", die ich auf "true" setze. Dann kann ich hier noch mal eine "exclude"-Regel Miteingeben, und zwar, dass ich später ein Verzeichnis ignorieren möchte, und das heißt dann "node_modules". Und das waren auch schon alle Einstellungen. Und wenn wir jetzt wieder zu der "Index"-TypeScript-Datei zurückwechseln, sehen wir auch schon, wird jetzt das Modul erkannt, und wir bekommen jetzt die IntelliSense für dieses Modul. Und das ist das besondere an TypeScript, weil das so mit dem klassischen JavaScript dann nicht möglich wäre, und das ist dann unser C Sharp-Komfort, den wir ja auch schon gewohnt sind, und den können wir hier genauso weiterhin nutzen. Das erste was wir ja hier machen möchten, ist einen Server zu erzeugen, und hier bekommen wir auch schon die Infos, was wir hier alles für eine Funktion durchgereicht bekommen, und zwar können wir hier einen "request"- und einen "response"-Parameter erhalten, und dann soll diese Funktion aufgerufen werden. Es ist also eine anonyme Funktion im "lambda"-Stil. Ist also auch sehr ähnlich, was wir schon aus C Sharp kennen. Und wenn wir eine Anfrage bekommen, möchten wir automatisch etwas zurücksenden, und zwar "write("Hello World!")", und da das Ganze hier ein Stream ist, müssen wir diesen Stream auch einmal beenden, und erst dann bekommt der Client exakt diesen String-Wert geschickt und wir wollen auf dem "Port 3000" lauschen. Genau! Das waren jetzt sechs Zeilen Code, um einen Webserver bereitzustellen, der bereits schon mal ein Ergebnis zurückschickt. Jetzt habe ich das Projekt gespeichert mit "Steuerung+S", und das erste, was wir jetzt noch hinterlegen müssen, ist, dass aus der TypeScript-Datei auch eine richtige JavaScript-Datei wird. Und dazu können wir jetzt, wie wir es bereits schon gewohnt sind unter "Visual Studio", "Steuerung+Shift+B" zum Bilden von Projekt. Also, die Tastenkombination "Steuerung+Shift+B" eintippen zum Kompilieren von Projekt, so wie wir es eben kennen, aus der großen "Visual Studio"-Version. Und das allererste mal sagt natürlich "Visual Studio Code": "Ich habe überhaupt keine Konfiguration hinterlegt, was ich denn genau erzeugen soll, wenn dieser Befehl ausgeführt wird." Deswegen klicken wir hier auf "Configure" und dann bekommen wir hier eine Auswahl von unterschiedlichen Profilen, und wir haben hier eine "tsconfig" angelegt, das heißt, wir möchten bitte, dass er diese "tsconfig" nimmt und automatisch ausführt. Ja, dann sind hier die nötigen Einstellungen dazu. Die sind dann schon mal so korrekt. Das können dann alles ignorieren, und wenn ich jetzt wiederholt "Steuerung+Shift+B" tippe, sehen wir links unten, wie der Task läuft, und da ich ja "watch" aktiv habe, beendet sich dieser Task auch nicht mehr. Und immer wenn ich meine TypeScript-Datei bearbeitet habe und speichere, wird automatisch die JavaScript-Datei erzeugt. Und da sehen wir auch schon, wie die JavaScript-Datei aussieht. Wenn ich jetzt hier ein "Breakpoint" setze, und "F5" drücke, auch das kennen wir aus unseren großen "Visual Studio"-Versionen, wird auch einmalig gefragt, welche Konfiguration soll zum Ausführen verwendet werden. Wir wollen natürlich Node.js. Auch hier passt fast die Einstellung. Wir haben keine "app.ja" sondern eine "index.js". Ich speichere die Datei, drücke noch mal "F5" und jetzt wird unsere Node.js-Anwendung ausgeführt. Wenn ich jetzt den Browser wechsle zu "localhost:3000", landen wir schon im Debug-Modus und können hier, wie gewohnt auch, unter ASP.NET das Ganze schön debuggen. Wir befinden uns allerdings in der JavaScript-Datei. Das ist etwas unschön. Also hier haben wir jetzt unser "Hello World!", aber es ist unschön. Wir landen nämlich noch direkt in der JavaScript-Datei. Wir möchten ja ein "Breakpoint" innerhalb von unserer TypeScript-Datei nutzen können. Wir sehen auch schon, dass der nicht aktiv wird. Dazu kann man natürlich hier, im ".vscode"-Verzeichnis, die "launch"-Einstellung verändern. Und das ist übrigens der wichtige Hinweis. Es wird eben automatisch durch "Visual Studio Code" dann diese Verzeichnis erzeugt, wo dann diese ganzen Konfigurationsdaten dabei sind, für den Built-Vorgang oder hier fürs Debuggen. Und wir können natürlich hier einfach "index.js" auf ".ts" ändern. Allerdings wird ja wirklich zur Laufzeit dann die tatsächliche JavaScript-Datei ausgeführt, weil Node.js nur direkt JavaScript versteht, und nicht diese zusätzlichen TypeScript-Informationen. Dass dieses Zusammenspiel auch tatsächlich funktioniert, ist nur mit sogenannten "sourceMaps" möglich. Das sehen wir hier unten. "sourceMaps", die setzen wir eben auf "true". Wir haben aber noch gar keine "sourceMap"-Dateien. Das bedeutet, wie der Name schon sagt, es wird direkt der "source" gemapt zu der anderen Datei. Damit kann dann eben der Debugger das alles auflösen. Wenn ich irgendwo in TypeScript ein "Breakpoint" setze, weiß der Debugger Bescheid: Okay, das ist dann an JavaScript genau in dieser Stelle. Und so funktioniert es dann ohne Probleme. Aber wir müssen ja erst mal solche "sourceMap"-Dateien erzeugen. Das machen wir innerhalb der "tsconfig", und zwar geben wir hier zusätzlich mit, dass TypeScript und "sourceMap"-Dateien erzeugen soll, und zwar hier mittels ""sourceMap": true,". Ich speichere das Projekt. Hier ist auch wieder wichtig: ".ts", ""sourceMap": true", auch speichern. Hier will ich nichts verändern. Und dann muss ich natürlich den TypeScript-Compiler neu starten, mit "Steuerung+Shift+B". Wird eigentlich erst der laufende Prozess beendet. Falls er noch nicht läuft, startet er, und wir sehen auch hier, habe ich hier meine "sourceMap"-Datei bekommen. Also fürs bloße Auge, da kann man nicht wirklich viel damit anfangen. Allerdings kann man dann hier eben wunderbar ein "Breakpoint" setzen, innerhalb unserer TypeScript-Datei. Ich drücke "F5", und wenn ich jetzt den Browser einmal aktualisiere, landen wir direkt in unserer TypeScript-Datei und können debuggen. Ein kleiner Tipp noch zum Schluss. Das Unschöne ist natürlich dann, innerhalb von seinem Webprojekt, dass wir hier in unserem Webprojekt überall jetzt zusätzlich eine ".js"- und eine "Map"-Datei angezeigt bekommen, und das pro TypeScript-Datei. Und das ist natürlich dann unschön, weil man dann eben extrem viele Daten angezeigt bekommt. Das nimmt die Übersicht, und dazu kann man noch schnell folgende Einstellung empfehlen, und zwar kann man hier unter "File" "Preferences" die sogenannten "User Settings" bearbeiten. Ich habe da bereits schon mal was auskommentiert, und wenn man es hier direkt übernimmt, diese Einstellung, dann wird von jeder TypeScript-Datei wenn es dazu eben ein JavaScript-File gibt, diese nur ausgeblendet innerhalb von "Visual Studio Code", und das selbe gilt für "Map"-Dateien. Hier wird übrigens ebenfalls der IntelliSense-Support mittels "Steuerung+Leer" ermöglicht. Das heißt, man muss nicht alles direkt so mühevoll abtippen, was man jetzt hier sieht, sondern einfach nur mit "Steuerung+Leer" und den ersten Befehlen kann man das Ganze auswählen. Ja, und wenn ich die Settings speichere, sehen wir auch sofort, wie das Ganze aktiv wird, und so können wir wunderbar in "Visual Studio Code" mit TypeScript Node.js-Anwendungen entwickeln.

Node.js für ASP.NET-Entwickler

Sehen Sie, wie Sie den Umstieg auf auf native JavaScript-Entiwcklung mit Node.js erfolgreich meistern.

2 Std. 52 min (31 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:15.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!