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.

Angular 2 Grundkurs

TypeScript konfigurieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hier verfolgen Sie, wie man TypeScript im Projekt-Setup konfiguriert.
05:07

Transkript

Innerhalb unseres Projektsetups haben wir TypeScript installiert. Und das TypeScript, das wir installiert haben, wollen wir natürlich auch nutzen, um unser Angular 2-Projekt entsprechend programmieren zu können. Zur Erinnerung: TypeScript ist ja eine Programmiersprache, die basiert auf ECMAScript 2015 und kompiliert quasi den TypeScript-Code in ECMAScript 5, damit ältere Browser auch in der Lage sind, das Ganze interpretieren zu können. Es gibt also eine Art Compiler. Und diesen Compiler, den kann ich aufrufen per "tsc". Wenn ich das jetzt normal im Terminal mache, obgleich ich natürlich im Setup-Ordner bin, so wie das Projekt auch hier heißt, wird es zu einer Fehlermeldung kommen. Das liegt daran, dass der TypeScript-Compiler nicht installiert ist global, sondern eben nur als abhängiges Modul hier intern. Das bedeutet aber auch, dass ich hier nicht hingehen könnte und einfach ein "npm run tsc" machen könnte. Denn wenn ich dann "npm run tsc" ausführe, sagt er mir: Im Skriptblock ist "tsc" als Definition nicht vorhanden. Das heißt, möchte ich meinen TypeScript-Compiler vom Node-Modul her ansprechen, muss ich im Projektsetup diese Referenz dazu erstmal erstellen. Das heißt ich muss sagen, es gibt die Möglichkeit ein "run of tsc" auszuführen und es soll referenzieren auf ein Node-Modul, das installiert wurde in diesem Projektsetup. Hört sich furchtbar kompliziert an, ist aber sehr einfach. Was ihr hier macht ist, im Skriptbereich von Package.json einfach ein neues Skript hinzuzufügen, das "tsc"-Skript, und ganz einfach, es soll einfach auf das "tsc"-Modul referenzieren. Mache ich das, kann ich nun den exakt gleichen Befehl nochmal ausführen und ihr seht, dass hier, wunderbar, der TypeScript-Compiler angesprochen wurde. Der nächste Schritt, den ich jetzt hier machen will ist den TypeScript-Compiler jetzt zu konfigurieren. Und diese Konfiguration nehme ich vor, indem ich eine tsconfig-Datei erzeuge. Diese tsconfig-Datei möchte ich ungern von Hand erzeugen und deswegen benutze ich den TypeScript-Compiler, mit dem Attribut, mit der Option "init", damit der Compiler für mich schon mal diese config-Datei anlegt. Was ich also mache, ist ein "npm run tsc". Damit rufe ich den Compiler auf. Im Regelfall würde ich den Compiler jetzt einfach mit "-init", also der Option "init" starten. Wenn ich das als Node-Modul mache, muss ich erstmal zwei Bindestriche definieren, damit das TypeScript-Modul weiß, jetzt kommen Optionen, die nicht für mich als Node-Packagemanager wichtig sind, sondern durchgereicht werden müssen. An diesen ScriptJob, dem TypeScript-Compiler also. Und hier gebe ich dann "init" ein und schon hat er mir nun eine config-Datei erstellt. Diese config-Datei findet ihr jetzt hier im Projekt. Das ist die "tsconfig". Die "tsconfig" sagt, dass der Compiler hier erstmal alle Node-Module ignorieren soll und weiterhin sagt es dann, innerhalb der Compiler-Optionen, dass die ECMAScript 2016-Module mittels Common.js dann interpretiert werden müssen. Das bedeutet, die Module, die dann auf TypeScript-Basis erzeugt werden, werden dann in der ECMAScript-Welt quasi modular geladen. ähnlich so, wie ihr es früher gemacht hättet mit RequireJS. Als target sage ich dann ECMAScript 5, dass heißt, Export soll ECMAScript 5 sein. "nonImplicitAny" das bedeutet nichts anderes, als dass ich definieren kann, dass wenn ich keinen Typ in TypeScript definiere, dass er nicht zwingend "Any" dafür dann automatisch einsetzen soll. Und "sourceMap", damit kann ich dann sagen, dass ich automatische eine SourceMap erstellen will, die dann bei einem Fehler beispielsweise direkt auf die TypeScript-Datei referenziert und nicht auf die kompilierte Javascript-Datei. SourceMap finde ich extrem wichtig. Setze ich entsprechend hier auf "true". Weiterhin möchte ich die Option definieren, "moduleResolution". Damit halte ich einfach fest, wie er die Module dann entsprechend auflösen soll. Das soll er nämlich auf Basis der Node-Projekte machen. Als nächsten Schritt werde ich jetzt hier die Option "emitDecoratorMetadata" auf "true" setzen. Damit bin ich dann in der Lage, Metadaten an eine Klasse hinzuzufügen. Und ich möchte natürlich auch die Decorators verwenden können. Das ist momentan experimentell, deswegen sage ich "experimentalDecorators" gleich "true". Welche Bedeutung das hat, werden wir im Verlauf des Trainings noch im Detail besprechen. Ich möchte auch auf gar keinen Fall, dass irgendwelche Kommentare entfernt werden, also sage ich "removeComments" entsprechend "false" und bin jetzt mit meinem Setup an dieser Stelle fertig und könnte meine erste TypeScript-Datei theoretisch kompilieren. was wir auch im Verlauf des Projektes noch machen werden. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, Ein Node-Modul von außen anzusprechen und das haben wir genutzt, um eine TypeScriptConfig-Datei zu erzeugen.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!