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

Module mit TypeScript

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Nach der Aktivierung kann in Node.js. anstelle von JavaScript auch TypeScript zur Erstellung von Modulen verwendet werden.

Transkript

Schauen uns in diesem Video an, wie wir mit TypeScript hier mit dem Modulsystem arbeiten können und zwar funktioniert es hier eben wieder etwas anders. Erstmal brauchen wir von unserer App.js eine TypeScript-Datei. Das heißt, ich benenne jetzt einfach das Ganze in "ts" um, ein TypeScript. Dasselbe mache ich hier mit der "index.js". Das benenne ich mal auch in TypeScript um und wieder in "foo", und verschiebe dieses Verzeichnis nach außen, entferne diesen Ordner, und nun haben wir die App-TypeScript-Datei und foo-Typescript-Datei und wir merken schon, er beschwert sich jetzt, dass er "require" gar nicht kennt. Und das ist auch kein Problem. Wir brauchen auch dann erst noch mal eine "TypeScriptConfig" json.-Datei. Visual Studio Code unterstützt uns hier indem ich hier mittels Steuerung und und Leertaste automatisch von dieser json-Datei IntelliSense angeboten bekomme, und wir brauchen jetzt ein paar Compiler-Optionen, und zwar müssen wir ihm jetzt mitgeben, welches Modulsystem denn wir einsetzen. Dazu gibt es hier extra die Einstellung Modul und automatisch wird hier uns auch CommonJS eingetragen. Wenn ich das entferne und nochmal Steuerung leer tippe, zeigt uns nochmal Visual Studio Code, was wir denn alles verwenden könnten. "amd", was im Browser hauptsächlich verwendet wird oder "common.js". Wir wollen jetzt "common.js" und anschließend möchten wir auch in TypeScript-Datei debuggen können. Das heißt, wir setzen "sourceMap" zum Beispiel auf "true". Und dann gibt es eine ganz wichtige Option. Ich kann hier zum Beispiel auch mittels "exclude" extra sagen, dass der TypeScript-Compiler bitte folgenden Ordner nicht miteinbeziehen sollte, und es wäre in dem Fall "node.modules". Obwohl jetzt hier gar kein node.modules-Verzeichnis mehr da ist, ist es einfach nur wichtig, dass man sich merkt, dass man das immer dann ganz schön mitzufügt. Ja, ich speichere die Datei, ich drücke dann Strg+Shift+B für das Bilden. Dann wird Visual Studio Code das Ganze natürlich erstmal konfigurieren. "TypeScriptCompiler" ist per Standard in dieser Konfigurationsdatei schon mit dabei, und dann sagen wir hier per Arguments, -p, er soll automatisch die Konfigurationsdatei nehmen und alle TypeScript-Dateien im gesamten Projekt soll er automatisch verwenden. Das war auch schon alles, dass wir in TypeScript aktiv haben. Wichtig ist ja auch noch, dass wir dauerhaft möchten, wenn sich eine Datei ändert, dass automatisch aus der TypeScript-Datei eine JavaScript-Datei wird. Speichern, mit Steuerung S, Strg+Shift+B. Starten wir diesen Task im Hintergrund. Genau, wir sehen schon jetzt sind automatisch die JavaScript-Dateien und sourceMap-Dateien von unserer TypeScript-Datei generiert worden. Die interessieren uns aber erst mal nicht mehr, sondern wir konzentrieren uns jetzt eben hier auf die TypeScript-Files. Erst mal ist ja das hier, Node.js nicht erkannt wird, also erkennt den require-Aufruf nicht. Das heißt, man könnte jetzt per Kommentar sagen das Ganze kommt von Global, aber wir möchten IntelliSense dazu, und deswegen habe ich vorher ja den Type Definition Manager installiert. Den kann man unter npm install tsd-global installieren. Das habe ich bereits gemacht, deswegen schreibe ich einfach einmalig, weil das Projekt neu ist, "tsd init". Jetzt wurde das für das Projekt initialisiert. Das merken wir auch, dass ein neues typpings-Verzeichnis da ist und eine neue json-Datei. Und nun installiere ich einfach tsd install node - - save. Und danach haben wir ordentlich Node.js Support unter TypeScript. Hier muss ich ja gar nicht mehr machen. Es dauert jetzt einen Moment, dann hat es Visual Studio Code durch die "tsd.config" dann auch begriffen, was sich hier dahinter verbirgt. Vielleicht noch mal neu starten, dauert oft noch ein bisschen, aber was gibt es jetzt für Unterschiede? Erst mal, wenn ich jetzt hier durch TypeScript auf eine andere Datei zugreife, schreibe ich nicht mehr "var" vorhin, sondern "import". Damit weist TypeScript, dass eben eine andereTypeScript-Datei geladen wird, und somit bekommen wir dann auch den passenden IntelliSense Support. Zum Beispiel, wenn ich jetzt "foo" na ja, jetzt bekommen wir noch keine Unterstützung speichere, ich starte mal Visual Studio Code neu. Es kann nämlich sein, dass er erst dann die TypeDefinition-Datei gefunden hat. Genau! Das bedeutet, wir sehen, dass er jetzt "require" kennt, aber nicht mehr "fooSample". Das ist natürlich klar. das Ganze ist jetzt "./foo". Das würde er vielleicht auch noch nicht gleich kennen, weil wir haben natürlich "foo" auch noch nicht öffentlich gestellt. Das bedeutet, gehen wir noch mal zu "foo", haben wir doch "module.exports". In dem Fall arbeitet TypeScript jetzt mit einem eigenen Parameter, also nicht von "module.exports" Also wenn wir jetzt hier zum Beispiel das wieder entfernen, arbeitet jetzt eben TypeScript mit dem eigenen Parameter und mit dem eigenen Syntax und zwar "export". Ich schreibe nur noch "export" über die Funktion, die man dann eben öffentlich stellen möchte, und wenn ich das jetzt speichere zum Beispiel zu der App.ts wechsle, sehen wir auch jetzt, wird das "require" akzeptiert. Er kennt natürlich das Wort c nicht mehr, es ist nicht ganz so schlimm. Wir machen hier einen Punkt und bekommen wunderbares IntelliSense dazu und ich rufe einfach "sayHello" auf, und somit wird das Ganze schön öffentlich gestellt. In den meisten Fällen macht man das aber nicht so, dass man hier mehrere Funktionen hat, die man dann hier einmalig so öffentlich mit "export" stellt, sondern man verwendet dann "export clas", und dann hat man einen Klassenname und innerhalb von dieser Klasse stellt man dann die Funktion öffentlich oder nicht. Aber in dem Beispiel sieht das einfach. Wichtig ist, um etwas zur Verfügung zu stellen als Modul. Schreibt man hier nur noch ein Wort "export" dazu, unter TypeScript und da, wo man das Ganze haben möchte, ruft man hier das Wort "import" auf. Schauen wir uns ganz kurz noch an, was TypeScript daraus generiert. Und zwar die JavaScript-Datei zeigt, wir benutzen hier wieder ein ganz normales "var" und "require", also so wie es eben Nodejs. kennt, und wenn wir uns "foo.js" ansehen, bemerken wir, er hat hier jeweils immer ein "exports." und dann "sayHello" dazu geschrieben. Und das ist das Coole daran, dass erhält er automatisch, diese Implementierung vorgenommen hat. Wenn ich jetzt den ganzen Bildvorgang unterbreche, bestätige nochmals Strg+Shift+B, breche jetzt mal das Ganze ab. Und jetzt verändere ich zum Beispiel, anstatt CommonJS verwenden wir jetzt doch einmal "amd", "Asynchronous module definition", was in Browser verwendet wird, Strg+Shift+B, das heißt, TypeScript-Compiler ist wieder aktiv und wenn wir uns jetzt anschauen, was unter "foo.js" dazu gekommen ist, da sehen wir jetzt plötzlich eine "defined function", dann bekommt man hier ein "require" und "exports" Parameter und auf den wird dann zugegriffen und das Ganze öffentlich gestellt. Man merkt, hier funktioniert das System ganz anders, Module irgendwo zur Verfügung zu stellen, und auch hier wenn ich auf die App.js gehe, auch das Hinzufügen von extern Modulen schaut ganz anders aus. Aber unser Code bleibt gleichtgewichtig und einfach und das ist das Schöne mit TypeScript. Jetzt ist es so, dass man natürlich dann innerhalb von seinem Code immer unterschiedliche Moduleinstellungen vielleicht mal benötigt, und da gibt es einen kleinen Trick, und zwar wenn ich jetzt zum Beispiel einen Ordner hätte mit Clients und da habe ich dann meine JavaScript-Dateien, und ein Ordner mit Server, wo dann meine Server-JavaScript-Dateien kommen, kann ich auch innerhalb von den Verzeichnissen eigene tsconfig.json-Dateien hinterlegen mit eigenen Regeln und die werden dann explizit für deren Verzeichnis und Unterverzeichnisse dann in Kraft gesetzt und das ist, was ich auch schon häufiger gebraucht habe. In diesem Video haben wir gesehen, wie wir TypeScript aktivieren in Visual Studio Code und dann wie wir mit TypeScript und Modulen in Node.js arbeiten können.

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
Ihr(e) Trainer:
Erscheinungsdatum:15.05.2017
Laufzeit:2 Std. 52 min (31 Videos)

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!