Nun, willkommen zurück und in dieser Lektion, Wir werden Sie durch die Installation von TypeScript führen in Ihrem Projekt und dafür sorgen, dass alles andere Vielleicht möchten Sie Läufe richtig verwenden. Und wie Sie vielleicht wissen, Wenn du eines meiner anderen Videos gesehen hast, Ich bin ein Benutzer von Visual Studio. Also werde ich das nutzen, um das einzurichten. Und dabei werde ich einfach ein brandneues Projekt erstellen und es wird eine ASP.NET Core-Webanwendung sein. Und ich werde ihm dort einen Namen geben und ich werde hier die MVC-Vorlage verwenden, nicht für HTTPS konfiguriert. Ich benutze Core 3.1. Dies sollte in jeder anderen Version funktionieren dass Sie von Core verwenden. Und das erste, was ich tun möchte um TypeScript verwenden zu können werde ich das Paket hinzufügen, Also werde ich NuGet verwenden, um das zu tun und ähnlich ist dies die Microsoft-Version von Node Package Manager. Und ich werde dieses Paket brauchen das baut mein TypeScript in JavaScript auf. Also werde ich das hier einfach in das Projekt aufnehmen. Und alle Abhängigkeiten, Genau wie bei npm sollten alle Abhängigkeiten installiert werden gleichzeitig. Das nächste was ich tun muss Ich werde eine TypeScript-Konfigurationsdatei hinzufügen. Also kann ich das in Visual Studio machen einfach durch Hinzufügen eines neuen Elements. Und ich möchte hier nach TypeScript suchen, Suche es, damit ich nicht überall hingehen muss. Na, bitte. Tsconfig.json. Also kannst du es einfach so lassen. Jetzt erhalten Sie einen Standardsatz von Optionen wenn du das da reinsteckst und ich habe eine ziemlich typische Reihe von anderen Optionen das mache ich gerne und das ist der Ort wo Sie den Weg konfigurieren können Der TypeScript-Compiler funktioniert. Beachten Sie zum Beispiel hier, Ich ziele auf ECMAScript 6 ab. Ich habe eine Bibliothek, die ES2017 versteht und in der Lage sein, das DOM zu manipulieren. Und vor allem zumindest Ich möchte sagen, was mein Ausgabeverzeichnis ist wird für meine TypeScript-Dateien sein das wird JavaScript. In diesem Fall stehen sie also unter wwwroot / js. Stellen wir also sicher, dass ich das habe. Na, bitte. Ich habe diesen Ordner schon dort. Das ist gut, bisher sehr gut. Ich brauche auch einen Platz dass ich meine TypeScript-Skripte speichern werde. Also werde ich hier einen neuen Ordner namens Scripts hinzufügen. Nicht unter wwwroot. Dies existiert außerhalb davon. Und fügen wir hier eine TypeScript-Datei hinzu und sehen, ob wir etwas zum Laufen bringen können. Eine TypeScript-Datei endet also nur mit ts. Los geht's, und ich nenne es einfach main.ts. Also, was wird hier passieren? werden wir unser TypeScript machen und dann jedes Mal, wenn ich dieses Projekt baue in Visual Studio jedes Mal, wenn ich kompiliere, Dies wird sich in normales gutes altes JavaScript verwandeln. So können Sie die Dinge auf Anhieb sehen das ein bisschen anders. Wir haben hier zum Beispiel die Eingabe. Wir können sagen, dass es eine Zeichenfolge ist und vor definiert verwendet. Ich bekomme diese kleinen grünen, schnörkellosen Linien hier. Das ist also gut für Visual Studio, Vielmehr ist TypeScript hier fusselig das zeigt diese Dinge als Fehler und Warnungen. So in diesem Fall zum Beispiel Ich habe den Namen da drin und es wird aus einem String-Literal abgeleitet, also brauchte ich das eigentlich nicht. Also wird es mich für diese Art von Dingen markieren. Und dann wurde dieser Anrufer verwendet, bevor er definiert wurde aber ich denke wir werden dort in Ordnung sein. Und Sie können diese nur als Hinweise betrachten. Wenn Ihnen das nervt, Es gibt eine Datei, die Sie öffnen können, eslintrc, und Sie finden es normalerweise in Ihrem Benutzerverzeichnis. direkt aus dem Stammverzeichnis des Benutzerverzeichnisses. Sie können dort sehen, Es gibt einige Optionen, die Sie ändern können. Wenn Sie es also auf Null setzen, das wird es falsch machen. Also konsistente Behauptungen. Dies sind nur einige davon das ändere ich normalerweise denn wieder sind sie zum größten Teil Hinweise und wenn du weißt welche von JavaScript, das Sie dort erstellen, dann ist das in Ordnung, umso besser. Also sollte ich einfach in der Lage sein damit das projekt noch aufzubauen weil ich glaube, das ist nur eine Warnung. Also lasst uns den Build hier machen und sehen, ob es funktioniert. Hat es geschafft und so hätte ich es tun sollen, Da gehen wir, da ist meine Hauptdatei das ist in wwwroot und wieder keine Beweise unbedingt dass dies von TypeScript kam. Es ist nur gutes altes reguläres JavaScript. Also, wenn ich gehe, lass uns hier reingehen und ich werde eine Seite erstellen und lassen Sie uns testen und sicherstellen dass das tatsächlich funktioniert. Nun einige dieser Funktionen, Wir werden später hinzufügen. Im Moment habe ich nur Haupt und ich werde meine tsHello-Funktion aufrufen. Es ist also nur normales JavaScript. Ich habe dort meinen Skript-Link. Ich rufe tsHello auf, das in meiner Haupt-JavaScript-Datei landet. Und ich werde das einfach ansprechen können und sehen Sie den Wert, wenn ich auf diese Schaltfläche klicke und das sollte uns zumindest eine gute Idee geben zu Beginn von dem, was hier funktioniert. Und beachten Sie, wir sehen noch nichts, Schauen wir uns also unsere Konsole an und wir können dort sehen, okay, Das liegt daran, dass wir JQuery auf der Seite haben und JQuery wird noch nicht unterstützt. Lassen Sie uns das einbauen und dann gehen wir zurück und machen das Ganze. Also, was müssen wir als nächstes tun ist Unterstützung für JQuery hinzufügen. Wir werden das zu unserer Datei package.json hinzufügen und wir haben noch keinen, In Visual Studio mache ich das also noch einmal als neues Element hinzufügen. Und das ist in der Liste hier als npm-Konfigurationsdatei. Wir können es einfach als package.json belassen und ich werde dort meine Entwicklungsabhängigkeiten hinzufügen dass ich von JQuery abhängig bin und ich glaube, die Version, die ich benutze, ist 3.5.1. Also werde ich das da drin hinzufügen und das sollte mir erlauben um jetzt JQuery zu verwenden und in der Tat, Ich denke, ich kann eine weitere TypeScript-Datei hinzufügen. Und tatsächlich verwenden Sie JQuery auch in dieser Datei. Mal sehen, also machen wir das und wir nennen es Bibliothek. Wir werden einfach weitermachen und greifen Was auch immer die JQuery-Version hier ist. Okay, also werde ich dort nur eine kleine Funktion ausführen. Es heißt wieder kann den Namen nicht finden aber es sollte in der Lage sein Bis wir wieder bauen und bis wir diese Seite laufen lassen. Und wir haben gerade diese unnötige Flagge für jeden. Also ts-Beispiel-2 auf unserer Seite, Lass uns zurück zu tsHello gehen, Es ist nur eine kleine Zeitspanne dass wir etwas reinstecken und wir werden diese Showversion von hier aus nennen. Also gut, lass es uns versuchen und sehen, ob wir arbeiten. Und wir werden es noch einmal versuchen und nichts sehen. Okay, wir haben immer noch $ nicht definiert. Stellen wir also sicher, dass es tatsächlich vorhanden ist. Okay, ich beziehe mich also auf meine Node-Module statt von wwwroot. Das ist also nur ein besonderes Problem in meinem Projekt hier. Also werden wir das einschließen. Na, bitte. Und wir werden es hier noch einmal versuchen. Nun, wenn Sie immer noch Probleme damit haben und die Schwierigkeiten, die Sie haben könnten ist, dass JQuery nicht erkannt wird. Es gibt eine kleine Sache, die Sie möglicherweise tun müssen. In meinem speziellen Fall habe ich JQuery mit npm hinzugefügt. Wenn Sie also diese kleine Aussage machen, Dies sollte dazu führen, dass die Unterstützung von JQuery funktioniert immer noch in Ihrer Anwendung, und ich werde das nur ein bisschen größer für dich machen. Wenn Sie also JQuery hinzugefügt haben, wenn Sie es als Teil der Vorlage verwenden das war schon da, Sie brauchen das vielleicht nicht. Aber in diesem Fall bin ich damit verbunden auf meiner Seite mit npm. Das sollte es also so machen, dass es funktioniert. Lassen Sie uns das Hallo bringen, die Welt wieder hoch. Sehen Sie, manchmal hallo, die Welt ist nicht so einfach, oder? Wir werden das wieder ansprechen und sehen, ob es funktioniert. Ah, jetzt haben wir unser Stylesheet. Na, bitte. Also habe ich das Hallo bekommen, und los geht's, meine JQuery-Version ist 3.5.1. In dieser Lektion haben wir gelernt, wie JQuery installiert wird in unserer Webanwendung. Und wie wir sicherstellen können, dass wir Unterstützung haben für Bibliotheken von Drittanbietern. Bleiben Sie dran, in unserer nächsten Lektion, Wir werden unsere ersten Features im Überblick sehen von TypeScript, Teil eins.
