TypeScript lernen: Vom Anfänger bis zum fortgeschrittenen Programmiertechniken

1. Intro: Sie haben vielleicht davon gehört, aber wissen Sie, warum und wie man Typoskript anstelle von Javascript verwendet Typescript ist ein typsicheres Superset von Javascript, das dieselben Funktionen und Fähigkeiten wie Javascript ermöglicht und gleichzeitig verhindert, dass und Fähigkeiten wie Javascript ermöglicht und gleichzeitig unachtsame Fehler in Ihrer Web-App veröffentlicht werden Heute werden wir alles durchgehen, was Sie wissen müssen, um Typoskript zu lernen und zu verwenden Hi, ich heiße Zoe. Ich bin Softwareingenieur und ehemaliger Professor liebe es , anderen beim Einstieg ins Programmieren zu helfen Ich habe unzählige Websites und Web-Apps mit React CSS, HTML und mehr erstellt . Heute werden wir uns mit Typescript befassen und darüber , wie Sie damit Ihre Entwicklungszeit und -erfahrung erheblich verbessern können Ihre Entwicklungszeit und -erfahrung erheblich verbessern und -erfahrung Zu diesem Zweck werden wir dieses Projekt in Typoskript erstellen. Wir werden darüber sprechen, was Typen sind, wie man sie benutzt und warum sie nützlich sind Dann tauchen wir direkt in unser Tutorial ein. Das Tutorial wird in drei Teile aufgeteilt. Zunächst initialisieren wir unser neues Typescript-Projekt. Dann werden wir es in unseren Browsern zum Laufen bringen. Und schließlich werden wir unsere Website mit Typescript erstellen. Dieser Kurs richtet sich an alle, die daran interessiert sind, Typoskript zu lernen, obwohl ein allgemeines Verständnis von Javascript unerlässlich ist, wenn Sie Javascript lernen müssen Ich habe einen vollständigen Kurs unter dem Link unten Wenn Sie jedoch bereits mit Javascript vertraut sind und es nur auffrischen möchten, habe ich hier einige Lektionen hinzugefügt, um sicherzustellen, dass wir alle auf derselben Wellenlänge sind Am Ende dieses Kurses sollten Sie in der Lage sein, eine vollständig typescript-basierte Web-App für sich selbst zu erstellen eine vollständig typescript-basierte Web-App . Lass uns anfangen 2. Kursprojekt: Klassenprojekt. Unser Projekt für diesen Kurs wird darin bestehen, eine einfache Web-App mit Typoskript zu erstellen Für diesen Kurs ist es wichtig, Zugriff auf einen Computer zu haben, auf dem Sie Visual Studio-Code oder einen anderen Code-Editor Ihrer Wahl ausführen können oder einen anderen Code-Editor Ihrer Wahl Sie sollten auch einen Browser wie Google Chrome betriebsbereit haben , da wir ihn zur Anzeige unserer Webseite verwenden werden. Schließlich wird es wichtig sein, ein allgemeines Verständnis von Javascript zu haben . Wenn Sie mit Javascript vertraut sind, benötigen wir nur eine Auffrischung Keine Sorge, das habe ich in den nächsten Lektionen aufgenommen den nächsten Lektionen Ich hinterlasse alle Links zu allen Ressourcen und Ressourcen , die Sie benötigen, unten auf der Registerkarte „Projekte und Ressourcen“. 3. JavaScript Intro: Javascript-Einführung. Es gibt zwei Stellen, an denen Javascript in HTML-Dateien oder in einer eigenen speziellen Javascript-Datei geschrieben werden kann in HTML-Dateien oder in einer eigenen speziellen Javascript-Datei geschrieben oder in einer eigenen speziellen Javascript-Datei Wenn wir Javascript in eine HTML-Datei schreiben wollen, ist das so einfach wie das Hinzufügen des Skript-Tags zum Kopfbereich des Dokuments. Dieses Skript-Tag ist allen Skriptsprachen vorbehalten , Sprachen, mit denen Sie Befehle ausführen können, und hier könnte unser Javascript theoretisch existieren Alles, was Sie zwischen diesen Tags schreiben, wird kompiliert und als Javascript interpretiert Das ist zwar für wirklich kleine Anwendungen in Ordnung, könnte aber etwas komplizierter werden, sobald wir beginnen, immer komplexere Websites zu erstellen. In diesem Fall können wir die zweite Stelle verwenden, an der Javascript in eine eigene Datei geschrieben werden kann , und das Skript-Tag einfach als Referenz verwenden. Wir werden separate Javascript-Datei-Apps erstellen und die beiden verbinden. Und voila, wir haben Javascript zu unserem Projekt hinzugefügt. Lassen Sie uns in die Vor- und Nachteile von Javascript und Programmiersprachen im Allgemeinen eintauchen Javascript und Programmiersprachen im Allgemeinen 4. JavaScript und andere Programmiersprachen: Javascript und andere Programmiersprachen. Wie wir bereits besprochen haben, ist Javascript eine Skriptsprache, mit der Sie Logik und Funktionalität in Ihre Webseiten integrieren können Sie Logik und Funktionalität in Ihre Webseiten integrieren Aber wie macht sie das? Wie wir auch erwähnt haben, ist Javascript eine Programmiersprache. Es gibt mehrere Dinge, die die meisten, wenn nicht alle Programmiersprachen gemeinsam haben. Genau wie andere Arten von computergestützten Sprachen sind Programmiersprachen in ihrer einfachsten Form nur eine Möglichkeit für uns Menschen, mit dem Computer zu sprechen. Insbesondere Javascript ermöglicht es uns als Programmierern, über den Dom oder das Document Object Model mit dem Webbrowser zu interagieren oder das Document Object Model mit dem Das Dom ist die Programmierschnittstelle für Webdokumente und dient als Repräsentation dieser Seite, sodass sie auf der Grundlage von Benutzereingaben und Interaktionen interagiert, aktualisiert und geändert werden kann und Interaktionen interagiert, aktualisiert und geändert auf der Grundlage von Benutzereingaben Insbesondere Javascript ist die Sprache, die wir für die Interaktion mit dem Dom verwenden , und 98% aller Websites verwenden Javascript auf der Client-Seite Programmiersprachen haben auch alle ihre eigene einzigartige Syntax. Genau wie in anderen Sprachen wie Englisch und Französisch gibt es eine Syntax, die definiert und erklärt, wie Wörter zu Sätzen, Absätzen usw. zusammenkommen . Programmiersprachen haben auf die gleiche Weise ihre eigene Syntax, um zu bestimmen, was eine vollständige Codezeile ausmacht Zum Beispiel haben Programmiersprachen alle ihren eigenen Einzelfall und ihren eigenen Zweck. Sie haben vielleicht von anderen Programmiersprachen wie Python, Ruby, Java und anderen gehört Programmiersprachen wie Python, . Je nachdem, welche Art von Anwendungen sie erstellen möchten, eine dieser Programmiersprachen möglicherweise besser für diese Aufgabe geeignet als andere, da das ist eine dieser Programmiersprachen möglicherweise besser für diese Aufgabe geeignet als andere, da das Ziel dieses Kurses darin besteht, zu lernen, wie man mit Anwendungen für das Web interagiert und sie erstellt. Die beste Programmiersprache, die wir lernen können, ist Javascript, oder in diesem Fall Typescript. Lass uns darin eintauchen 5. Was ist TypeScript?: Was ist Typoskript? Typescript ist einfach eine Obermenge von Javascript. Das heißt, es verfügt über dieselben Funktionen wie Javascript mit einigen zusätzlichen Funktionen , von Javascript mit einigen zusätzlichen Funktionen denen der Entwickler profitiert Eine der Hauptfunktionen von Typescript ist die Verwendung von Typen, die sicherstellen, dass der Wert, auf den zugegriffen wird, den richtigen Aber machen wir einen Rückzieher. Was sind Typen? 6. Typen: Typen. Es gibt viele verschiedene Typen in Typoskript zugegriffen Lassen Sie uns also zunächst über die häufigsten sprechen , auf die Sie bei Ihrer täglichen Arbeit wahrscheinlich stoßen werden Einige dieser gängigen Typen Sie vielleicht bereits aus Javascript kennen , wie z. B. Zeichenfolge, Zahl und Boolean Eine Zeichenfolge ist ein beliebiger Wert, in Anführungszeichen gesetzt und gelesen werden kann Eine Zahl ist ein regulärer numerischer Wert wie 1234 usw. , und ein boolescher Wert kann einer von zwei Werten sein , wahr Es gibt auch Arrays, die, genau wie in Javascript, geordneten Liste bestehen und mehrere Datentypen enthalten können Das Typskript hat jedoch einen speziellen Typ namens any. Any ist ein Typ, der verwendet werden kann wenn Sie entweder keinen bestimmten Wert eingeben möchten oder noch nicht ganz sicher sind, welchen Typ Sie verwenden sollen. Im zweiten Fall könnten Sie auch Unknown verwenden, aber im Moment reicht jeder aus. 7. Fehler: Fehler, die Sie möglicherweise finden. Wenn Sie anfangen, Typescript zu verwenden, werden Sie zunächst viel mehr Fehler sehen Aber das ist gut so, weil es Ihnen hilft, es viel schneller zu lernen Typskript löst nicht nur Fehler bei nicht übereinstimmenden Typen aus, sondern löst auch Fehler für eine Vielzahl von Szenarien aus , die Sie verhindern möchten Wenn Sie zum Beispiel eine Funktion aufrufen, aber vergessen, alle erforderlichen Argumente in Javascript anzugeben , ein solcher Fehler als unerwarteter Fehler betrachtet unbemerkt weitergeht Dies ist jedoch etwas, das Sie nicht wollen, denn wenn diese zusätzlichen Argumente in unerlässlich sind , wird Ihre Funktion wahrscheinlich nicht so funktionieren, wie Aber das ist genug theoretisches Typskript. Lassen Sie uns damit beginnen, es selbst zu schreiben. 8. So installierst du TypeScript: Ordnung, um mit Typoskript zu beginnen, können wir es auf zwei Arten tun Wir können den Typescript-Compiler installieren und nur an einer einfachen Typoskript-Datei arbeiten, oder wir können sie in unser Create, React-App-Set integrieren Ich werde den Ladder-Weg gehen, aber ich zeige Ihnen, wie Sie ihn schnell und global auf Ihrem Computer installieren können, wenn Wenn Sie also ein Typoskript global installieren möchten , ist das ziemlich einfach Sie müssen nur den Compiler installieren. Typescript ist, wie Sie bereits erwähnt haben, ein Superset Aber der Browser liest nicht wirklich Typoskript, er liest nur Javascript. Die Art und Weise, wie wir Typescript im Browser verwenden können, besteht darin, dass es wieder nach Javascript kompiliert wird Sie werden sich an diesen Prozess des Kompilierens von einer Sprache in eine andere erinnern , aus CSS und CSS Scss wurde auf CSS herunterkompiliert. Das Gleiche gilt für Typescript und Javascript. Wenn Sie Typescript global auf Ihrem Computer verwenden möchten, müssen Sie es nur installieren Installieren Sie den Typescript-Compiler. Also wählst du NPM I, und es ist Und dann würdest du Typescript eingeben. Und wenn Sie das getan haben, hätten Sie den Typoskript-Compiler global installiert den Typoskript-Compiler global und er sollte Nachdem Sie das getan haben, haben Sie einfach überprüft, ob Sie das richtig gemacht haben Tscv und ich haben das bereits gemacht, also kommt Version 4.2 0.8 heraus. Nachdem Sie Typescript global installiert haben, können wir jetzt damit weitermachen und ein React-Projekt damit erstellen 9. TypeScript und React: Ich werde eine Codezeile kopieren , die ich hier habe, was im Grunde bedeutet, dass ich eine React-App erstellen werde und wir sie Learn Type Script nennen werden Es wird dieses ganz besondere Flag verwenden , das hier Template genannt wird. Wir haben es vielleicht schon einmal ein- oder zweimal gesehen. Die Vorlage, diesmal statt rot, wird Typoskript sein, also wird sie uns eine Typoskript-Vorlage geben damit wir uns nicht darum kümmern müssen herauszufinden, wie die App mit Typescript richtig einrichten Wir werden das einfach ausführen und sobald es fertig ist , können wir loslegen Ordnung, wir haben also unseren Ordner für gelernte Skripte eingerichtet und einsatzbereit. Also lass uns weitermachen und NPM es starten und uns ansehen, was wir im Browser haben Wie Sie hier sehen können, ist es bis auf einen wesentlichen Unterschied so ziemlich dieselbe App Es hieß, Quell-App TSX anstelle von JSX bearbeiten , um sie zu speichern und neu zu laden. Ziemlich genau Das ist der einzige Unterschied, den wir hier mit unserem Typoskript haben . Also, was wir jetzt tun werden, ist, in unseren öffentlichen Ordner zu gehen . Wir sagen , alles ist gleich. Gehen wir in unseren Quellordner und schauen uns an, was hier vor sich geht. Wie Sie sehen können, haben wir ein paar verschiedene Dateien in diesen beiden Ordnern. In unserem größeren Verzeichnis und in der App und in unserem Quellordner. Schauen wir uns diese TS-Konfigurationsdatei an. Das ist also eine neue Datei, die wir beim letzten Mal nicht hatten. Diese Datei teilt dem Typskript-Compiler im Grunde dem Typskript-Compiler wie er den Code kompilieren soll Es gibt also verschiedene Versionen von Javascript, die derzeit im Internet verfügbar sind Wenn wir jetzt Typskript nach Javascript kompilieren, wollen wir es im Grunde auf die älteste Version kompilieren , die immer noch perfekt nutzbar ist Weil wir sicherstellen wollen , dass es mit so vielen Maschinen wie möglich kompatibel mit so vielen Maschinen wie möglich Wenn wir es nur auf die neueste Version von Javascript kompilieren würden, hätten einige ältere Maschinen möglicherweise keinen Zugriff auf viele der Funktionen , die es implementiert. Und dann würden wir unsere Websites unzugänglicher machen. In diesem Fall haben wir es also auf ES Five herunterkompiliert, was eine etwas ältere Version von Java-Skript ist Ich glaube, Ron ist inzwischen sieben oder acht. Und dann gibt es noch ein paar andere Optionen, die Ihnen auffallen werden. Das alles ist auch im Jon Json-Objekt enthalten. Es heißt, dass Sie damit Javascript einfügen können, da alle Javascript-Dateien gültige Typoskript-Dateien sind Wenn Sie also tatsächlich Javascript in ein Typoskript-Projekt schreiben können , macht das vielleicht nicht viel Sinn, aber Sie können das tun, wenn Sie möchten Und dann ist es streng? Es wird also eine strenge Typprüfung erzwingen. Möglicherweise oder wenn Sie lernen, möchten Sie das vielleicht eingeschaltet lassen. Aber es kann sein, dass es später in Ihrem Projekt zu schwierigen Regeln kommt oder auch nicht . Es hängt davon ab, was für Sie funktioniert, und dann von ein paar anderen Werten, die sie einfach automatisch für uns eingegeben haben. Da wir mit Typoskript arbeiten. Wir werden immer mehr sehen, wann und wann wir nicht mit diesen Dateien interagieren müssen. Aber vorerst lassen wir es so wie es ist. Als Nächstes werden wir in unsere TSX-Datei und unsere Index-TSX-Datei gehen unsere TSX-Datei und unsere Index-TSX-Datei und sehen, was diese dort haben Die Index-TSS-Datei, TSX-Datei, sieht ziemlich Da ist nichts wirklich anders. Wenn wir in unsere TSX-Datei gehen, ist es ehrlich gesagt so ziemlich dasselbe Und wie Sie bereits sehen können, sind Typescript und Javascript so ziemlich dasselbe Es gibt nicht viel, was sehr unterschiedlich ist, aber es gibt ein paar wichtige Elemente , die einen Unterschied machen werden Lassen Sie uns weitermachen und eine kleine App erstellen , um mit diesen zu arbeiten. Also habe ich eine Komponente namens Counter erstellt , genau wie unseren vorherigen Counter. Dieser Zähler könnte Dinge wie eins hochzählen oder runterzählen. Im Moment macht er nichts, es ist nur eine leere Komponente. Aber lassen Sie uns weitermachen und versuchen, ihm einige Requisiten zu geben, damit wir ihm einige Funktionen hinzufügen können Was wir also in unserer App tun werden, lassen Sie uns hier ein paar Variablen erstellen Sagen wir Titel und wir geben dem Titel den Wert meines Zählers. Das könnte also der Titel für unseren Zähler sein. Wir sagen Const-Schaltflächentext und wir könnten sagen, das könnte plus eins sein Also geben wir ihm nur einige grundlegende Variablen. Das alles soll nur zeigen, wie Typoskript funktioniert. Wir werden sehen, dass uns das kleine gelbe Unterstreichungen gibt, was schon früher der Fall war Da die Variablen zwar deklariert wurden , aber nicht rot sind, sie noch nicht verwendet. Keine Sorge, darauf kommen wir zurück. Was wir jetzt tun werden, ist, sie an die Theke weiterzugeben. Wir sagen, Titel ist gleich Titel und Button. Entspricht dem Button-Text. Cool, wir bekommen immer noch diesen Fehler, weil, aber jetzt ist es tatsächlich ein Typfehler Es heißt also, dass der Typ des Titels der Zeichenfolge und Button-Texttyp der Zeichenfolge nicht dem systemeigenen Attribut zugewiesen werden können. Für intrinsische Attribute existiert kein Eigenschaftstitel. Was bedeutet das also? Typoskript ermöglicht also im Grunde diese ganz besondere Sache, die als Tippen bezeichnet wird Und durch das Tippen können wir sicherstellen, dass die Werte, die wir übergeben, von einem bestimmten Typ sind, oder? Wir sind, weißt du, in einem Titel wo es Text sein soll, wir wollen, dass es eine Zeichenfolge ist. Wir übergeben zum Beispiel kein Objekt, wir übergeben nur eine Zeichenfolge. Type Script können wir dies überprüfen, bevor wir tatsächlich zur Kompilierungsphase kommen und feststellen, dass unsere App einfach ohne Grund kaputt ist Wenn wir also zu unserem Zähler gehen, können wir diese Variablen tatsächlich einfügen , wie wir es zuvor für Titel- und Schaltflächentext getan haben , und wir können sie speichern Aber wir bekommen hier einige Fehler. Wir bekommen also, dass alle zerstörten Elemente unbenutzt sind. Der Titel des verbindlichen Elements hat implizit einen beliebigen Typ. In Ordnung, wir bekommen also zwei Fehler. Wir erhalten eine Fehlermeldung, weil wir sie noch nicht verwendet haben. Ordnung. Aber wir bekommen auch den zweiten Fehler, den wir noch nie gesehen haben. Der Titel des verbindlichen Elements hat implizit einen beliebigen Typ. Jetzt sind die Typen und das Typoskript genau wie die verschiedenen Datentypen, über die wir zuvor gesprochen haben Wir haben ein Objekt mit einer booleschen Zahl als Zeichenfolge, aber es gibt dieses Ding im Typskript, das als Typ bezeichnet wird, und das ist eigentlich kein guter Irgendjemand sagt wortwörtlich, dass es von beliebigem Typ sein könnte , und das macht den Zweck der Verwendung von Typoskript Wenn Sie jemals versuchen, etwas vom Typ eines beliebigen Typs einzugeben, erhalten Sie tatsächlich eine Fehlermeldung Es gibt also ein paar Möglichkeiten, wie wir diesen Fehler umgehen können. Ordnung, die Art und Weise wir diese Fehler zuerst umgehen werden, lassen Sie uns weitermachen und sie in unserem Projekt implementieren. Also setzen wir einfach ein H ein und wir geben ihm einen Titel. Wir geben ihm die Eigenschaft eines beliebigen Titels. Wir speichern das und erstellen dann eine Schaltfläche. Wir geben ihr die Eigenschaft des Button-Textes . Cool. Wir werden weitermachen und das speichern. Jetzt haben wir zumindest den ersten Fehler behoben, aber wir haben immer noch den Fehler vom Typ Eddy. Was wir in Typoskript tun müssen, ist tatsächlich etwas zu erstellen, das als Interface bezeichnet wird. Eine Schnittstelle ist im Grunde nur ein Regelwerk, das der Komponente sagt, was mit den übergebenen Variablen mit den Eigenschaften geschehen soll , die über sie übergeben wurden. Die Art und Weise, wie Sie eine Schnittstelle erstellen, besteht darin, dass Sie Ihre Komponente direkt darüber verlassen, vielleicht dort, wo Sie etwas importieren würden , das genau zwischen diesen beiden Leerzeichen liegt. Du machst weiter und sagst Interface und dann gibst du ihr einfach einen Namen. Normalerweise nennen die Leute es einfach Requisiten, aber du könntest es nennen, wie du willst Sie könnten es Counter-Requisiten oder App-Requisiten nennen , um spezifisch für Ihre Komponente zu sein Sie können es aber beliebig nennen da wir nur eine Komponente haben, die Requisiten benötigt. Wir nennen es einfach Requisiten, aber es muss Kapital sein. Welchen Namen Sie auch wählen, stellen Sie sicher, dass der erste Buchstabe ein großes Interfaces ist und dass es sich um ein Objekt Also werden wir unser Objekt einfach dort erstellen. Es entspricht nicht dem, es werden nur die geschweiften Klammern verwendet. Dann wollen wir für jede Requisite, die wir haben, die zum Counter gesendet wird, der Schnittstelle mitteilen, welcher Typ dieser Typ sein soll Wenn ich hier Titel eintippe, kann ich einen Doppelpunkt verwenden, um ihm dann einen Typ zuzuweisen Also sage ich, dass der Titel vom Typ Zeichenfolge ist und speichere ihn. Und wir haben einen erledigt. Der nächste ist Schaltflächentext , der ebenfalls vom Typ Zeichenfolge ist. Und wir fügen hier eine Zeichenfolge ein und speichern sie dann und arbeiten gut. Jetzt bekommen wir hier diesen anderen Fehler und wir bekommen immer noch diese Fehler hier. Das liegt daran, dass diese beiden noch nicht verbunden wurden. Sie existieren in derselben Datei. Aber die Komponente, die Komponente muss angewiesen werden, diese Requisiten tatsächlich zu verwenden Die Art und Weise, wie Sie das mit SX machen , ist, dass Sie hier einfach einen kleinen Doppelpunkt direkt neben diese verschnörkelten Klammern setzen direkt neben diese verschnörkelten Klammern und den Namen Ihrer Schnittstelle eingeben . Also in unserem Fall: Props and save. Und wenn Sie das einmal getan haben, werden Sie feststellen , dass all unsere Fehler verschwunden sind. Und jetzt haben wir unsere Werte mit einem Typ initialisiert mit einem Typ Nun, wenn wir es tatsächlich wären und wenn du deine Seite auscheckst, hätten wir meinen Zähler mit einer Nummer, richtig Ziemlich einfach. Es sind auch verschiedene Typen erhältlich. Angenommen, Sie möchten eine Funktion weitergeben, richtig? Nehmen wir an, wir erstellen eine OnClick-Funktion, wenn ein Klick einem M Konsolen-Punktprotokoll entspricht, auf das geklickt wurde Sie möchten also nur eine wirklich einfache On-Click-Funktion erstellen eine wirklich einfache Und das geben wir ebenso wie eine Requisite weiter. Wie üblich werden wir feststellen, dass es gelb wird, weil es sich um eine Funktion handelt Und wir müssen es hier per Klick zu unseren Requisiten hinzufügen. Fügen wir es mit einem Klick auf unsere Schaltfläche hinzu. Sag das. Aber das Problem ist erstens, es ist hier nicht gelb, weil es nicht weiß, um welchen Typ es sich handelt, oder? Weil wir es hier nicht auf unseren eigentlichen Requisiten angebracht haben. Lassen Sie uns also weitermachen und es tatsächlich auf unsere Requisiten auftragen. Also sagen wir auf Klick. Aber der Unterschied hier ist, dass es eine Funktion ist. Und wenn Sie sich an Ihr Javascript erinnern, eine Funktion nicht wie ein Typ in Java-Skript, oder? Es ist einfach etwas, das wir benutzen, oder? Ich meine, Funktionen sind wohl Objekte, aber du würdest es nicht wollen , sie sind nur von einer anderen Klasse, sie sind von einem anderen Typ. In Typoskript haben sie also tatsächlich etwas für Funktionen, bei dem Sie angeben würden, ob sie etwas zurückgeben oder nicht. Die Syntax dafür besteht also eigentlich nur aus Ihren regulären Klammern Dann würdest du den Pfeil eingeben und dann würdest du void eingeben, wenn nichts zurückgegeben Wenn es etwas zurückgibt, könntest du vielleicht Zeichenfolge oder was auch immer es zurückgibt sagen. Und wenn es Argumente braucht, könntest du sie hier übergeben, als ob es ein Zeichen vom Typ string braucht, wenn das wahr wäre. Das gilt nicht für unsere Funktion hier. Aber in den meisten Fällen werden die meisten Funktionen nur unser einfaches Argument weitergeben, weniger Funktionen, die ungültig werden, und der Grund, warum sie ungültig werden, ist, dass sie eigentlich nichts zurückgeben, oder? Wenn eine Funktion etwas zurückgibt, dann wären das aussagekräftige Daten die in einer Variablen oder etwas anderem gespeichert werden könnten. Aber wenn Sie eine Funktion weitergeben , löst sie in den meisten wenn Sie eine Funktion weitergeben Fällen einfach etwas in der anderen Anwendung aus. Wenn wir also zum Beispiel eine Schaltfläche nehmen und unsere eigene Schaltflächenkomponente erstellen würden, Schaltfläche nehmen und unsere eigene Schaltflächenkomponente wie wir es zuvor mit der Anzeige in der Subtraktionsschaltfläche getan hatten , könnten wir den Klick einfach als Leere übergeben und gesamte Logik in der Zählerfunktion belassen . Das ist eine Option, die wir hätten haben können Jetzt, wo wir die Klammern leer gesetzt haben , genau wie bei einer Pfeilfunktion, wissen Sie, Klammern, und dann wird nichts zurückgegeben Wir haben es hier zu unseren Requisiten hinzugefügt und wir haben es zu unserer Funktion hinzugefügt Wenn wir auf plus eins klicken, werden wir es in unserer aktuellen Version feststellen. Lassen Sie mich das löschen und wenn wir hier in unserer aktuellen Konsole nachschauen, werden wir feststellen, dass dort werden wir es in unserer aktuellen Version feststellen Lassen Sie mich das löschen und wenn wir hier in unserer aktuellen Konsole nachschauen, Klick steht Und jedes Mal, wenn wir darauf klicken, wird dem Stapel einfach eins hinzugefügt , sodass wir wissen, dass es richtig funktioniert. Geben Sie Script ein. Es ist zwar etwas gewöhnungsbedürftig, aber wenn Sie sich erst einmal daran gewöhnt haben, ist es viel einfacher, damit zu arbeiten. Ich persönlich finde es schwieriger ist, mit größeren Objekten zu arbeiten , wenn man mit Typoskript arbeitet, oder? Nehmen wir an, wir hätten ein Objekt vielleicht haben wir wieder ein Objekt namens Haus, richtig? Und das ist ein Objekt, das ist ein Objekt, das den Namenswert meines Hauses hat. Und dann hat es vielleicht Zimmer, was eine Zahl ist. Und dann hat es vielleicht Geräte, was eine Reihe von Ja ist, und es hat Geräte. Nehmen wir also an, wir übergeben das Haus an unsere Thekenfunktion. Wir sollten diese Komponente wahrscheinlich umbenennen, aber sagen wir, wir übergeben House an unseren Zähler. Es gibt ein paar Möglichkeiten, wie wir damit umgehen könnten. Wenn wir House importieren, protokollieren wir es vorerst einfach in der Konsole. Um diesen ersten Fehler zu beheben, wollen wir ihn zu unseren Requisiten hinzufügen Also werden wir House zu unseren Requisiten hinzufügen. Aber welchen Typ geben wir ihm, oder? Wir könnten es, glaube ich, dem Objekttyp geben, aber theoretisch, wenn man darüber nachdenkt, ist alles in Javascript ein Objekt. Es ist also vielleicht nicht die beste Idee, ihm den Objekttyp zu geben. Ich meine, es funktioniert. Aber es ist vielleicht nicht der beste Weg, um zu überprüfen, ob es richtig funktioniert, oder? Ich meine, wir haben es auf der Konsole protokolliert. Es ist in Ordnung, es funktioniert. Aber in und in einer idealen Welt hätten wir tatsächlich eine etwas spezifischere Typisierung, eine etwas strengere Typisierung, damit wir wissen ob wir die richtige Form unseres Objekts haben oder nicht . Weißt du, Haus mit dem Namen und den Geräten und den Zimmern. Weißt du, wir wollen sichergehen, dass das auch wirklich das richtige Objekt ist. Eine Möglichkeit, dies zu tun, besteht darin, in der App zu beginnen Sie können einen Typ für Haus erstellen, also sagen wir Interface und Sie können auch mehrere Schnittstellen haben. Sie müssen nicht nur eine haben, sondern Sie können Interface House sagen. Dann können Sie im Grunde die Form dieses Hauses verwenden, um diesen Typ zu erstellen. Sie können sagen, der Name wird eine Zeichenfolge sein, die Räume werden eine Zahl sein, die Geräte werden aus einer Reihe von Zeichenketten bestehen. Sie würden das so schreiben, dass Sie eine Zeichenfolge eingeben und dann das Array-Symbol daneben setzen. Es sagt uns, dass es sich tatsächlich um ein Array dieser Zeichenketten handelt. Wenn es ein Array von Zahlen wäre, könnten Sie, Sie könnten eigentlich einfach Array und Zahl eingeben, aber in unserem Fall werden es Zeichenketten sein. Was Sie dann tun wollen, Sie werden sicherstellen, dass Sie diese Exportschnittstelle exportieren und dann möchten Sie die Schnittstelle in den Zähler importieren. Denken Sie also daran, wie ich gesagt habe, dass Sie die Schnittstellen benennen können , alles, was Sie wissen. Stellen Sie einfach sicher, dass es für das , was die Sache ist, relevant ist. Und du könntest auch House eingeben. Sie können hier Ihre Doppelpunkte setzen und dann House den Haustyp geben, sodass der Compiler auf beiden Seiten weiß, okay, dieses Haus passt zu diesem Haus Sie sind beide vom gleichen Typ. Wenn wir also zu unserem Zähler gehen, können wir zum Anfang unserer Datei gehen, wo sich all unsere Import-Anweisungen befinden sollten, und wir sollten von der Punktstrich-App ausgehen Und dann gehen wir hier zu unserem Hausobjekt. Und dann gib ihm einfach die Art des Hauses. Und jetzt ändert es eigentlich nichts an unserer App, aber wir wissen jetzt, dass es genauer getippt ist, oder? Wir wissen jetzt, dass diese beiden Dinge mit Sicherheit zusammenpassen. Wir wissen mit Sicherheit , dass das Haus vom Typ Haus ist und das andere auch vom Typ Haus Wenn wir also tatsächlich die falsche Art von Schnittstelle hatten , richtig, sagen wir, ich habe hier eine weitere Schnittstelle erstellt und ich habe sie Home genannt und ich hatte einen Namen und es war nur eine Nummer und das war's. Und ich habe versucht, das an diesen Typ nach Hause weiterzugeben. Es sollte einen Fehler melden. Und du wirst an unseren Bauchmuskeln sehen, dass es bereits rot geworden ist. Sie werden hier also sehen, dass es uns sagt, dass der Typ House Typ Home nicht zugewiesen werden kann, weil die Eigenschaften von Name nicht kompatibel sind Zeichenfolge, die Sie dem Typ Nummer nicht zuweisen können. Hier zeigt Typoskript seine wahre Stärke. Wir haben vielleicht zwei sehr ähnliche Typen wie Haus und Heim. Dass sie fast dasselbe sind und beide den Namen Eigentum haben. Die Namenseigenschaft selbst ist jedoch nicht vom gleichen Typ. Ich weiß, dass das vielleicht ein bisschen knifflig und ein bisschen verwirrend ist, aber wenn Sie ein bisschen mehr an Typoskript arbeiten, wird es viel klarer werden was Sinn macht und was nicht Aber im Moment können Sie sehen, dass Typoskript die Prüfung für Dinge auf die gleiche Weise eingeben Sie übernimmt und sicherstellt, dass Sie keine unachtsamen Fehler machen, solange Sie die Dinge auf die Ich persönlich finde Typoskript wirklich unverzichtbar. Ich schreibe lieber damit, wenn ich Apps erstelle. Nur weil es das alles macht. Ich suche nach meinen dummen kleinen Fehlern, bevor ich zur eigentlichen Produktionsphase komme , und dann kann ich nicht herausfinden, was mit der App nicht stimmt Das war also nur eine kurze Einführung in Typoskript, und wir werden etwas später weiter damit arbeiten Wenn Sie jemals Fragen dazu haben was Sie mit Typoskript tun können und was nicht, hinterlasse ich einen Link zu der Website der Typoskript-Dokumentation, damit Sie auf alle Informationen zugreifen können , die Sie möglicherweise benötigen, oder alle Informationen nachschlagen können, die Sie benötigen, wenn Sie sich nicht sicher sind wie man etwas in Typescript schreibt. 10. TypeScript und Next.js (Styling): Ordnung, also lassen Sie uns weitermachen und Entwicklung unserer Typskript-Anwendung beginnen Wenn Sie sich die Entwurfsdatei hier ansehen, werden wir das erstellen. Es ist eine einfache App zur Berechnung von Trinkgeldern, die verschiedene Typen beinhaltet mit denen wir arbeiten können, um zu überprüfen, ob unser Projekt korrekt funktioniert, und wir können Typen-Skripte lernen. Lassen Sie uns also näher darauf eingehen. Das Wichtigste zuerst: Ich werde hier in meinem Repository beginnen. Jetzt habe ich diese Starter-App hier bereits verwendet. Sie ist auf meinem Github, sie heißt Muck App. Das bedeutet, ein paar schnelle Dinge zu kombinieren , um schneller einsatzbereit zu sein, indem Material Y next S verwendet wird, und Skript eingegeben Die meisten davon beziehen sich nur auf das Styling und das Erstellen einer schnellen App. Also zögern Sie nicht, es zu benutzen, wenn Sie möchten. Aber das müssen Sie nicht, Sie können einfach eine normale Anwendung mit React starten und Script eingeben. Wir haben hier also drei oder vier Abschnitte. Wir haben den Rechnungsbetrag, den Prozentsatz des Trinkgeldes, die Anzahl der Personen und dann den Trinkgeldbetrag pro Person. Dies ist das berechnete Stück und das zurückgesetzte Stück. Okay, das ist ziemlich einfach. Was ich tun werde, ich gehe davon aus, dass Sie mit dieser App den Rechnungsbetrag eingeben möchten. Sie sollten also irgendeine Art von Eingabe verwenden. Sobald Sie das eingegeben haben, möchten Sie dann den Trinkgeldbetrag zu dieser Zahl addieren und dann die Anzahl der Personen hinzufügen, als ob die gesamte linke Seite Ihre Eingaben sind und dann die rechte Seite Ihre Ausgabe ist, im Grunde aus all dem ergibt. Um das zu tun, denke ich, werde ich eine Trinkgeldeingabe und eine Trinkgeldausgabe erstellen. Vielleicht werde ich eine neue Datei erstellen, um sagen wir, Bill oder Cost Input zu geben. Und ich füge das hier ein und dann wir sagen sagen wir wieder A. Du kannst sie benennen, wie du willst. Nur das Erste, was mir in den Sinn kam. Ausgang. Ordnung, großartig. Also hast du die Eingabe und die Ausgabe. Nun zum Nachdenken, besonders wenn Sie mit einem Reaktor-Skript oder einer anderen Technologie wie dieser arbeiten , sollten Sie darüber nachdenken, wie sich der Ausgangszustand Ihrer Anwendung befindet. Ist es in jeder Komponente enthalten, und haben wir dann einen größeren globalen State-Manager? Lebt es in einer höheren Komponente? Wie fließen Ihre Daten? Im Wesentlichen denke ich, dass es sich dabei um eine ziemlich einfache Anwendung handelt, also würde ich keine komplexere, ich denke eher rote Datensituation verwenden wollen . Ich denke, ich möchte versuchen, es einfach innerhalb des lokalen Bundesstaates zu halten. Vielleicht stellen wir es auf den Z-Stand, aber lassen Sie uns sehen, wie viel wir tun können ohne es wirklich zu sehr herumzuschieben. Ordnung, das Wichtigste zuerst, lassen Sie uns das fertig ausarbeiten. Wir wollen das Trinkgeld, Prozentsatz und die Anzahl der Personen in unseren Kosten einbeziehen. Wir werden ein paar verschiedene Elemente in unserer Box haben , die wir hinzufügen werden. Wir werden sagen, ein bisschen ist Typografie, um zu sagen, Bill S T Prozentzahl. Oh, großartig. Okay, cool. Und dann werden wir irgendeine Art von Texteingabe haben. Oh, gib mir hier einfach den gleichen Fehler, weil ich direkte Eingaben machen muss. Direktimporte, ich sollte sagen, n Eingaben. In Ordnung, lassen Sie uns Box importieren und lassen Sie uns Timpografie importieren. Ordnung, großartig. Jetzt hat meine Eingabe eine Textfeldkomponente, genau das ist es. Also werden wir uns das einfach ausleihen. Wir werden uns das Grundtextfeld „Gliederung“ für unsere Rechnung und für unsere Personenzahl ausleihen Grundtextfeld für unsere Rechnung und für unsere Personenzahl ausleihen Ich mache einfach weiter und importiere das dort. Cool, großartig. Für diese wird es jetzt eher eine Auswahl sein , die auf einer Schaltfläche mit einer Eingabe am Ende basiert. In diesem Sinne ist es etwas komplexer Ich werde sie tatsächlich in Boxen packen, damit wir nicht verwechseln, welche welche ist. In Ordnung, das ist also für die Rechnung. In diesem Feld wird der Prozentsatz des Trinkgeldes angegeben. Ich werde in diesem Feld noch etwas mehr hinzufügen. Füge die Knöpfe hinzu, und dann wird dieses Feld für die Anzahl der Personen sein. Fantastisch. Nur um die Dinge etwas klarer zu strukturieren , weil ich denke, es wird etwas unhandlich werden . In Ordnung, cool Also haben wir jetzt die Sache mit diesen Eingängen, richtig? Als ob wir es so haben könnten, dass der Wert, unabhängig davon, ob der Benutzer den Wert eingibt, verwendet. Außerdem sollte ich hier die Farbe ändern , damit wir tatsächlich Farbe sehen können . Okay, cool. Also ja, ich könnte es einfach so einstellen, dass, wenn ich den Betrag in die Kosteneingabe eingebe, er einfach in dieser Komponente liegt. Aber weil wir auf den Betrag 142 zugreifen müssen , damit wir den Gesamtbetrag des Trinkgeldes pro Person erhalten können. die Art und Weise angeht, wie ich über den Staat denke, ich möchte den Staat erhöhen, oder den Staat aufheben und ihn im Trinkgeldrechner selbst leben im Trinkgeldrechner lassen. Also, wie sieht das aus? Nun, für mich sieht es so aus, als würde man ein paar Elemente erstellen, ein paar Zustandselemente. Am Ende würden wir einen Gesamtpreis von Null erstellen und diesen dann über unsere Apps weitergeben. Das erledigen wir in nur einer Sekunde. Lassen Sie uns mit dem Styling fertig werden. Also geben wir dieser Hintergrundfarbe. Hintergrundfarben, in Ordnung? Und wie gesagt, zögern Sie nicht, jedes Styling zu verwenden, das Sie möchten. Das liegt ganz bei dir. Ich benutze nur Maly, oder? Weil es für mich ein bisschen schneller ist. Okay. Und dann, oh, weißt du, das ist das andere Problem, ich muss daraus eine Flexbox machen. Alles klar? Fantastisch. Okay, also jetzt innerhalb dieser, lassen Sie uns weitermachen und fertig stellen diese Himmelslinie die Breite dieser 379 sein wird dass diese Himmelslinie die Breite dieser 379 sein wird? füge ich nicht hinzu. Das untere auch. Die beiden werden quasi spiegelnde Stile haben. Ich frage mich, ob es irgendwelche gab, vielleicht kommentieren Sie das. Da haben wir's. Ich habe mich gefragt , warum das nicht im globalen Stil wirksam wird. Ich habe hier quasi einen globalen Reset eingefügt, der nützlich ist , aber er meine Marge überschrieben und Paddy, das habe ich entfernt In Ordnung, also los geht's. Alles klar, es hat hier ein Etikett und es wird Leute stehen, dann dieser, es wird sein, der Rechnungsaufkleber wird nur 1$ sein und diese beiden Ausweise unterschreiben weil sie für uns im Moment nicht nützlich sind. Sie können sie ändern, wenn sie nützlich werden, dann werde ich auch die Farbe für beide so einstellen , dass wir den Text darin sehen können. Ich repariere die Tasse in einer Sekunde. Unser nächster Beitrag hier sollte das berücksichtigen. Okay, fügen wir also diese fünf Tasten und eine Eingabe hinzu. Einer wird einer dieser Eingänge ohne die Breite sein. Dann werde ich schnell etwas tun. Dann sage ich „ Kostentipp pro Prozent und setze das auf eine Reihe von Zahlen Ich schätze, ich werde 5% sagen. 5% 10% 50% 20% und 25. Ist es 25% Oh nein, tut mir leid. 50% 25% Und 50% 25% und 50% In Ordnung. Geil. Das sind also die Prozentsätze der Trinkgelder. Jetzt, hier unten, werde ich sie einfach kartografieren. Ich werde sagen, dass Prozentsätze jedem Prozent zugeordnet werden. Ich möchte dann weitermachen und eine Schaltfläche mit dem Prozentwert als Schaltfläche zurückgeben , und sie könnte auch hier angegeben werden Lass mich das loswerden. Ich kann nicht sagen , dass ich es zurückgeben soll, aber Altos Key, verkaufter Schlüssel ist der Prozentsatz, weil es sich um Unikate handelt Ordnung, cool. Also, jetzt haben wir unsere Knöpfe. Fantastisch. Lass uns die Hintergrundfarbe so ändern , dass sie so cool ist . Und dann setzen wir die Breite von jedem auf 117, glaube ich. 48. Perfekt. Fantastisch. Dann das, weißt du was, ich habe eine flexible Säule. Ich möchte, dass es eine flexible Spalte ist, aber ich glaube, ich möchte sie in die Schachtel packen. Ich packe die Schaltflächen im Textfeld in ein Feld. Da haben wir's. Und dann sage ich, dass Display Flex Wrap sein wird, dann sage ich Breite. Sagen wir mal. Die 353? Ja, drei hintereinander. Nehmen wir an, die Breite ist 450. Fantastisch. Ich werde diese Stile einfach in dieses Textgefühl kopieren und speichern und vielleicht ein bisschen Rand hinzufügen. Darin sehen wir hier ziemlich gut aus. Fantastisch. Das sieht für mich ziemlich gut aus. Ich denke, ich bin damit ziemlich zufrieden, was nur den allgemeinen Stil angeht . Was ich jetzt mit diesen Boxen machen werde, ich werde oben und unten für jede dieser äußeren Boxen etwas Rand hinzufügen , da haben wir einen guten Abstand. Ich könnte auch eine Flexbox gebrauchen, was wahrscheinlich besser wäre. Machen wir aus dieser äußeren Box eine Flexbox. Ich werde Weltraum sagen. Jetzt ist der Abstand gleichmäßig von oben nach unten. Ordnung, cool. Das sieht ziemlich gut aus. Mal sehen, was müssen wir noch tun? Oh ja, wir müssen die andere Seite machen. Lassen Sie uns hier ein wenig über die Rechnungsausgabe nachdenken. Rechnungsausgabe, wir haben diese dunkelgrüne Box. Fangen wir damit an. Lass uns noch einmal diese Farbe nehmen. Sagen wir früher. Und dann geben wir ihm eine Breite, 413 mal 41714. Nur 413 mal 413, aber das ist 417, Sag die Co O, die ich brauche, muss ich zum Trinkgeldrechner hinzufügen Es ist nicht hier. Das soll hier rauf gehen. Rand Null O für den Tipprechner selbst, ich muss die Gegenstände zur Mitte hin ausrichten , okay? Perfekt. Cool, cool, cool. Sieht gut aus. Alles klar, als Nächstes möchte ich weitermachen und die Teile hinzufügen , die wir wollen, sie rauskippen und zusammenzählen und einen Reset-Knopf. Lassen Sie uns ein paar Typografie-Elemente erstellen. Wir sagen, behebe einfach den Fehler oben hier. Ich sage den Betrag des Trinkgeldes pro Person, und das ist dann ein Betrag. Wir werden das in 2 Sekunden beheben. Das können wir in eine Kiste packen. Und dann machen wir es noch einmal, aber wir sagen insgesamt pro Person. Dann werden wir hier unten eine Schaltfläche mit der Aufschrift „Zurücksetzen“ haben . Derselbe Knopf. Okay, Reset-Knopf, wir schaffen es. Das ist gekommen. Okay? Okay, großartig. Also wende dieses Zeug auch in der nächsten Box an. Cool. Perfekt. Dann werden wir die beiden in eine Schachtel packen. Und der Grund dafür, diese beiden in einer Box, ist, dass, wenn ich sage, sie den inhaltlichen Abstand zwischen den Schaltflächen unten und den Preisangaben oben rechtfertigen . Fantastisch Per cool. Da haben wir's. Ziemlich einfach. Ich werde nur noch ein paar Stile nachbessern und dann werden wir weitermachen und mit unserem Ty-Skript arbeiten. In Ordnung, weißt du, ich glaube, ich muss es ins Visier nehmen. Ich versuche nur, die Farbe hier ins Visier zu nehmen , damit wir sie sehen können. Ich glaube, ich muss zielen. Lassen Sie mich die Basis eingeben. Kann ziehen, ja. In Ordnung, perfekt. Genau das möchte ich tun. Ordnung, also schnapp ich mir einfach die Farbe, nehme sie raus. Nimm die Farbe raus, kannst die Farbe rausnehmen, du tust gar nichts. Und nimm einfach diese Grafik dort. Ordnung, cool. Also tippe hier nur Dinge ein, wir können sie jetzt sehen. Irgendwelche anderen kleinen Anpassungen. Diese Seite sieht ziemlich gut aus. Jetzt denke ich, die rechte Seite hier, vielleicht könnten wir einfach diese Farbe, die Farbe der Spitze, auf Weiß ändern die Farbe der Spitze, auf und ihr etwas mehr Abstand geben. Und dann sollten wir in der Lage sein , weiterzumachen und zu unserem Schriftfeld dazwischen überzugehen unserem Schriftfeld überzugehen . 11. TypeScript und Next.js (Typen): Ordnung, jetzt, wo wir all das aufgebaut haben, einbauen In Ordnung, jetzt, wo wir all das aufgebaut haben, wollen wir weitermachen und die Typskript-Funktionalität, den Zweck dieser Lektion, und sehen, wie sie sich ein wenig von der Verwendung von normalem Javascript oder JSX unterscheidet Verwendung von normalem Javascript oder Unser Stil ist so gut wie fertig. Aber eine Sache, die man beachten und beachten sollte, über die ich zuvor mit dem Staat gesprochen habe. Wir wollen darüber nachdenken, wo der Staat in dieser Anwendung lebt , weil wir drei oder vier verschiedene Teile haben . Hier haben wir den Eingabebereich, in dem der Benutzer das Trinkgeld auswählen und die Anzahl der Personen oder den Gesamtrechnungsbetrag eingeben kann das Trinkgeld auswählen und . Dann haben wir die Ausgabe, die uns den Trinkgeldbetrag und die Gesamtkosten pro Person, den Betrag des Trinkgeldes pro Person und die Kosten pro Person anzeigt. Dann haben wir hier eine Reset-Taste. Damit das alles funktioniert, muss der Staat etwas, nun ja, nicht unbedingt globalisiert sein , sondern auf einer höheren Ebene verfügbar sein, sondern auf einer höheren Ebene verfügbar zwischen diesen beiden Komponenten hin- und hergeleitet zu werden Ich werde versuchen, dies nur mit dem normalen Reaktionsstatus zu tun nur mit dem normalen Reaktionsstatus Wenn das keine geeignete Lösung zu sein scheint, wir zu so etwas wie Stand übergehen. Ich versuche, Reduct zu vermeiden , weil es einfach so viel Boilerplate gibt einfach so viel Boilerplate und es sich um ziemlich einfache Apps handelt Mal sehen, ob wir das mit ein paar einfachen Lösungen schaffen können paar einfachen Meiner Meinung nach muss ich die Gesamtrechnung, den Prozentsatz des Trinkgeldes und die Anzahl der Personen von links nach rechts weiterleiten den Prozentsatz des Trinkgeldes und die Anzahl der . Ich denke, es muss sich hier im oberen Bereich des Trinkgeldrechners befinden. Lassen Sie uns weitermachen und das hier im Tip Calculator umsetzen. Ich werde damit beginnen , ein paar Variablen zu definieren. Ich werde sagen, sagen wir, Gesamtrechnung. Ich würde sagen, die Gesamtsumme der Rechnung entspricht dem Bundesstaat, was aus React importiert wird Wir werden es auf Null initialisieren. Nun eine Sache mit Typoskript Wir können tatsächlich einen Typ hinzufügen und angeben, dass es sich um einen Zahlentyp handeln muss Da Sie nun auch Null eingeben, wird daraus abgeleitet, dass es sich um einen Zahlentyp handeln muss Wir erhalten hier eine Fehlermeldung, weil wir den Client hier nicht verwendet haben , weil das nur der nächste GS-Fehler nichts mit Typoskript zu tun, aber wir können den Typ angeben, dass diese Rechnung einen Zahlentyp haben muss. Der Betrag muss eine Zahl sein, damit wir tatsächlich Berechnungen durchführen können. Das ist einer der Punkte an denen wir anfangen, Typoskript zu verwenden Und Sie werden sehen, wie sich das auf unsere auswirkt, also haben wir dasselbe für „Lassen Sie uns den Prozentsatz des Trinkgeldes festlegen“, Prozentsatz Das wird auch eine Zahl sein. Ja, es wird eine Zahl sein und dann eine Anzahl von Leuten. Ja, wir machen noch einen. Ich sage Anzahl der Personen, festgelegte Anzahl von Personen. Und wieder geben Sie an, dass Sie angeben und angeben , dass wir es auf Null initialisieren werden, nur damit wir mit einem leeren Zettel beginnen Ordnung, jetzt, wo wir diese Variablen initialisiert haben, wollen wir weitermachen und sie in unserer App für meine Kosteneingabe verwenden unserer App für meine Kosteneingabe Ich möchte nun diese Parameter der Gesamtrechnung übergeben und auf Rechnung, Gesamtprozentsatz, Gesamtprozentsatz festlegen, Gesamtzahl der Personen festlegen, Anzahl der Personen festlegen, auf die Kosteneingabe Weil das Auswirkungen auf das haben wird , was passiert. Jetzt gibt es tatsächlich zwei Möglichkeiten, wie wir das tun können. Wir könnten beide weitergeben oder wir könnten die Funktionen in einem Taschenrechner definieren. Lassen Sie mich damit beginnen, einfach die Anfangsvariable zu übergeben . Sagen wir die Gesamtrechnung. Gesamtrechnung, Trinkgeld pro Prozent, Prozentsatz entspricht Trinkgeld pro Prozent und Anzahl der Personen entspricht Anzahl der Sie sehen, ich erhalte hier bereits eine Fehlermeldung , weil uns das Typoskript mitteilt , dass wir die Eigenschaft nicht wirklich auf der Komponente selbst haben die Eigenschaft nicht wirklich auf der Komponente Das ist also einer der Vorteile von Typoskript. Sie können nicht einfach zufällige Dinge weitergeben und erwarten, dass es funktioniert. Sie müssen tatsächlich Typoskript verwenden. , Sie müssen angeben Ich sollte sagen, Sie müssen angeben, welche Typen Sie erwarten. Wenn ich hier zufällig die Kosten eingegeben habe und die Gesamtrechnung importiere, nehme ich den Prozentsatz des Trinkgeldes und auch die Anzahl der Personen auf. Nochmals, wenn es sich um eine reguläre React-Anwendung handelt, könnten Sie diese einfach so einfügen. Aber da es sich nicht um eine reguläre React-Anwendung handelt, handelt es sich nicht nur um eine Javascript-Anwendung, ich sollte sagen, um eine React-Anwendung. Sie werden sehen, dass hier tatsächlich ein Fehler angezeigt wird. Wir sagen zum Beispiel, dass das verbindliche Element Anzahl von Personen implizit einen beliebigen Typ hat Und wie Sie sich früher erinnern, haben wir über jeden Typ gesprochen, wir wollen nicht unbedingt nur einen generischen Typ haben Was wir tun wollen, ist, diese Variablen gezielt einzugeben. Lassen Sie mich Ihnen zeigen, wie wir das machen werden. Die Art und Weise, wie wir das tun werden , besteht darin etwas zu erstellen, das als Interface bezeichnet wird. Eine Schnittstelle ist im Grunde eine Möglichkeit, ein Skript zu schreiben, damit wir es einem Typskript mitteilen können. Hey, ich erwarte, dass diese Variablen in diesen Eigenschaften vorkommen und ich möchte, dass sie von bestimmten Typen sind, und das sind die Typen, die ich erwarte. Alles andere als das, deklarieren Sie bitte einen Fehler. Ich werde es erstellen, ich werde es Requisiten nennen. Du kannst es nennen, wie du willst Und ich werde diese verschiedenen Eigenschaften skizzieren. Ich werde Gesamtrechnung sagen. Es wird eine Zahl sein. Ich werde den Prozentsatz des Trinkgeldes sagen. Es wird eine Zahl als eine Anzahl von Menschen sein. Es wird so sein, dann werde ich dem Typoskript sagen , dass Sie all diese Karten verwenden können, diese Schnittstelle, um die Art der Pflanzen zu ermitteln. Und du wirst hier sehen, dass ich es nicht mehr habe, die Dinge funktionieren soweit. Das Letzte, was wir jetzt tun müssen, ist, dies mit den tatsächlichen Standorten in unserer App zu verbinden. Was die Textfield-Eigenschaft angeht, glaube ich, dass es einen Wert gibt, den wir verwenden können Ich glaube, es heißt Wert. Lass mich nachschauen. Lass uns zur API gehen. Ich bin mir ziemlich sicher, dass es wie eine normale Eingabe ist, aber ich möchte sichergehen, dass wir keine fehlerhaften Fehler bekommen In Ordnung, ja, ich denke, wir haben einfach Wert gelegt. Versuchen wir es mit dem Gesetz. Wir werden sagen, der Wert entspricht der Gesamtrechnung. Wir sagen, das checken Sie hier aus. Fantastisch. Also bekommen wir 0$ Perfect. Wir machen das einfach für alle drei Prozent Trinkgeld. Der Prozentsatz wird etwas anders sein, aber für das letzte Textfeld sagen wir, dass der Wert der Anzahl von entspricht Dort haben wir eine Anzahl von Leuten, die auf Null gesetzt sind. Perfekt. Wir sind startklar. In diesem Sinne möchte ich als Nächstes ein Set zusammenstellen, oder? Wenn sich der Wert in diesen Eingaben ändert, wollen wir eine Funktion auslösen. Lass uns weitermachen und wir werden diese Funktion ausschreiben. Und wir können diese Funktion tatsächlich in den Trinkgeldrechner schreiben oder wir können sie in die Kosten eintragen. Spielt keine Rolle, hängt nur davon ab, was für uns ist. Wenn ich weitermache und es in die Kosteneingabe schreibe, kann ich sagen, dass ich das Set weitergeben muss. Ich möchte den Setter bestehen. Möchte ich dir nur eine Zufallsfunktion übergeben Wir werden den Setter übergeben, weil ich glaube, ich werde sauberer u. okay sein , und dann wenn sie uns eine ähnliche Reihe von Fehlern Ja, wir geben sie einfach hier ab, und dann gebe ich sie hier ab Dann besteht der Unterschied darin, dass wir tatsächlich bestehen, dass Klammern gleich Und so teilt man Typescript mit, dass es sich um eine Funktion handelt, die wir gerade durchgehen die Im Grunde genommen, wenn die Funktion so etwas wie ein R annehmen würde, das wäre zum Beispiel nur die Typnummer, dann könnten wir das auch spezifizieren Es ist völlig in Ordnung , es vorerst leer zu lassen. Aber wir könnten den Typ bei Bedarf definitiv angeben. Und siehe da, wir bekommen hier schon einen Fehler. Es ist eigentlich nicht in der Lage , seinen Typ auf void zu setzen, wir müssen es auf diesen Typ setzen. Es ist eigentlich gut. Es gibt uns genau den Typ, den wir verwenden sollen. Wenn es eine reguläre Funktion wäre, könnten wir den Typ void verwenden. Da es sich jedoch um Aktionen mit festgelegtem Status handelt, müssen wir die sehr spezifischen Typen verwenden , die sie uns geben. Das ist in Ordnung, wir importieren einfach diese Typen und dann sollten wir loslegen können. Fantastisch, Tolle Sache mit Typoskript. Es wird dir sagen, welche Typen importiert werden. Ordnung, jetzt wollen wir für unser Textfeld sagen, wir wollen bei Änderung sagen, wir wollen bei Änderung, wir wollen die Gesamtrechnung als Wert festlegen. Lassen Sie mich hier eine Funktion erstellen, die besagt wir eine Rechnung mit ständiger Aktualisierung einreichen werden, was das Ereignis sein wird. Ich sage, Set Bill wird Targetvalue sein Das wird die Art und Weise sein, wie wir uns etwas schnappen können oder es tatsächlich tun Das alles müssen wir eigentlich nicht tun. Tut mir leid. Wir können einfach auf der Rechnung mit dem Wechselgeld sitzen, wir geben einfach den Sarge-Wert Und es sollte in der Lage sein, sie einfach zu schnappen. Es sollte in der Lage sein, einfach den Wert von E zu übernehmen, was wie das Ereignis ist, es wartet auf den Argumenttyp von Stamm kann nicht dem Parametertyp Zahlen zugewiesen Sag mir, dass der Wert, den ich zurückerhalte , eigentlich eine Zeichenfolge ist, keine Zahl. Aber was ich tun kann, ist es einfach in eine Zahl umzuwandeln. Sag ihm, dass es eine Zahl sein wird , die diese Art von Fehler behebt. Manchmal ein bisschen nervig. Sie müssen viele kleine Dinge ändern, um sicherzustellen, dass Sie keine Tippfehler bekommen. Aber ich denke, es lohnt sich, denn am Ende gibt es 57 ein, dann die Zahl im Bundesstaat, ich meine, wir können sie hier nicht sehen, aber die Zahl im Bundesstaat wäre 57, was großartig ist. Das ist also startklar. Also gut, wir haben das eingerichtet. Lass uns das Gleiche für hier tun. Anstatt der Gesamtrechnung sagen wir, setzen Sie die Anzahl der Personen auf dasselbe fest, den Zielwert. Wenn sich dieser Wert ändert, ändern wir die Anzahl der Personen. Ich frage mich, ob Sie zum Standardwert wechseln , ob das einen Unterschied macht. In Ordnung, wir machen es vorerst einfach zu einem günstigen Preis. In Ordnung, also wir haben die beiden fertig. Der letzte, den ich bearbeiten möchte, ist der Prozentsatz, den wir auf zwei Arten handhaben müssen. Im Grunde genommen, wenn ein Benutzer ähnliche Änderungen vornimmt , gibt er hier etwas in das benutzerdefinierte Textfeld ein. Und ich gebe es tatsächlich, hat es ein Etikett? Ich denke, es braucht einen Wert oder ein Standardwert entspricht einem benutzerdefinierten Wert pro Prozentsatz Jetzt ein bisschen prozentual, 1.000% Wenn ein Benutzer hier entweder etwas eingibt oder hier auf eine Schaltfläche klickt, müssen wir sicherstellen, dass der prozentuale Prozentsatz entsprechend aktualisiert wird Was ich tun möchte, ist entweder beim Klicken zu sagen, naja, es spielt keine Rolle, es ist so, wir listen für beide auf. Aber wenn auf einen geklickt wird, ändert sich der Wert, wenn zu dieser Zahl etwas hinzugefügt wird, das sich ändert . Was auch immer zuletzt passiert, ändert sich Beim Klicken werde ich eine On-Click-Funktion erstellen. Wir werden sagen, beim Klicken werden wir sagen, dass Prozentsätze in Prozent ausgedrückt werden. Und es gibt uns denselben Fehler, aber dieses Mal ist es richtig, uns denselben Fehler zu geben, weil wir gesagt haben, dass es sich um eine Zeichenfolge handelt. Was ich tatsächlich tun werde, ist diese in Objekte umzuwandeln. Ich sage Prozent, und dann ist die tatsächliche Multiplikationsmenge, die wir verwenden würden , 0,05. Und so werden wir dieses Problem lösen Wir haben unsere Zeichenfolge und dann haben wir auch unsere tatsächliche Zahl , die wir verwenden können Das sollte eine ziemlich einfache Lösung sein. Das werde ich sagen. Und dann muss der Schlüssel jetzt Prozent sein. Oh, Ash. Eigentlich war das nicht der richtige Weg, um diesen prozentualen Titel zu bekommen. Dieser Prozentsatz, das hätte ich tun sollen. In Ordnung. Tut mir leid. Lass mich das nur ganz schnell in Ordnung bringen. Ordnung. Fantastisch. Sagen wir, der prozentuale Titel ist der Schlüssel, dann ist der Prozentwert der Betrag und dann ist der prozentuale Titel was im Hintern angezeigt wird. Das Problem wurde dort behoben. Jetzt haben wir all diese Dinge festgelegt. Als letztes muss die Textdatei eingestellt werden. Wir leihen uns hier einfach die Änderungsfunktion aus, prozentuale Basis, alles, was wir vom Zielwert bekommen Ja, in dem Sinne sollten wir gut sein. Ich gehe zurück zum Tip-Rechner und wir können testen. Um zu sehen, ob das funktioniert, können wir Console Dot Log sagen. Nehmen wir an, der Prozentsatz der gesamten Rechnung und die Anzahl der Personen protokollieren diese Daten in der Konsole und überprüfen sie in unserer Konsole. Im Moment sind sie alle Null, was Sinn macht , weil wir sie standardmäßig auf Null gesetzt haben. Wenn ich dann sage, dass die Gesamtrechnung 100 ist, werden Sie sehen, dass sich die erste Zahl ändert. ich einfach zehn auswähle, bekommt es 0,1, was wir erwarten, wenn ich fünf Personen hinzufüge, die letzte ändert sich, sodass wir wissen, dass sie tatsächlich richtig funktioniert. Bereit zu gehen. In diesem Sinne werde ich dieses Konsolenprotokoll vorerst als großartig entfernen . Wir wissen also, dass die Informationen korrekt an den Trinkgeldrechner weitergegeben werden, sodass die Dinge tatsächlich korrekt ablaufen. Nun, der Grund, warum ich den Trinkgeldrechner vorhin nicht mit all diesen kleinen Funktionen überhäufen wollte Trinkgeldrechner vorhin nicht mit , weil Sie jetzt ein paar Funktionen innerhalb des Trinkgeldrechners erstellen werden. Wir müssen berechnen, wie hoch der Trinkgeldbetrag pro Person sein sollte und wie hoch der Gesamtbetrag pro Person sein sollte Um das zu tun, müssen wir zwei Funktionen erstellen. Wir sagen ständig, hol dir pro Person Trinkgeld und dann erstellen wir eine weitere. Holen Sie sich den Gesamtbetrag pro Person. Wir können das hier tun oder wir können es als Kosteneingabe tun . Es ist nicht wirklich wichtig. Aber wenn wir das hier machen, dann müssen wir nicht noch ein paar zusätzliche Requisiten in die Rechnungsausgabe einbauen, sollte ich sagen Wenn ich Stufe bekomme oder wir es vielleicht genauer untersuchen wollen , ja, vielleicht wollen wir es tun, tut mir leid Machen wir das bei der Rechnungsausgabe, nur um die Dinge sauber zu halten. Ordnung, also wir werden diese beiden hier erstellen, aber was wir tun müssen, ist drei Requisiten an die Rechnungsausgabe weiterzugeben drei Requisiten an die Rechnungsausgabe So wie wir eine Schnittstelle zur Kosteneingabe hatten. Ich werde eine Schnittstelle für die Rechnungsausgabe erstellen. Kopieren Sie das einfach und fügen Sie es ein, holen Sie sich diese von hier, dort. Dann sage ich jetzt in der Funktion hier Trinkgeld pro Person. Das Trinkgeld pro Person wäre die Summe der Rechnung multipliziert dem Prozentsatz des Trinkgeldes geteilt durch die Anzahl der Personen geteilt durch die Anzahl der Personen. Das wird die Person mit dem Trinkgeld sein. Wir können diesen Betrag angeben oder wir brauchen eigentlich keine ganze Funktion zu erstellen, wir sagen einfach, gleichbleibendes Trinkgeld pro Person, Person ist gleich, los geht's Und dann sagen wir, das ist das Trinkgeld pro Person, das ist Trinkgeld pro Person Ja, wir haben gerade gesagt, dass das Trinkgeld pro Person die Gesamtrechnung multipliziert mit dem Prozentsatz des Trinkgeldes geteilt durch die aktuelle Anzahl der Personen ist dem Prozentsatz des Trinkgeldes geteilt durch . Es ist keine Zahl, weil wir diese Zahlen nicht haben. Aber wir werden das in nur 1 Sekunde beheben. Alles klar, als Nächstes machen wir die Summe pro Person. Summe pro Person ergibt das Trinkgeld pro Person Die Gesamtrechnung geteilt durch die Anzahl der Personen plus das Trinkgeld pro Person. Auf diese Weise können wir das tatsächlich für unsere zweite Funktion verwenden. Wir sagen, das wird unser Gesamtbetrag pro Person, pro Person sein. Das ergibt Sinn. Gesamtrechnung nach der Anzahl der Personen plus der Person, die das Trinkgeld zahlt. Fantastisch. Im Moment bekommen wir eine Nummer. Ich frage mich, ob es nein ist, sie sollten reinkommen, da die Zahlen angegeben werden können. Ich frage mich, ob sie aus irgendeinem Grund nicht als Nummer reinkommen . Mal sehen, was passiert, wenn ich die Nummer hier ändere. Oder, weißt du, es könnte einfach sein, ich glaube, ich weiß, wo das Problem liegt. Wir übergeben die Variablen nicht wirklich, also würde das dort wahrscheinlich zu einem ziemlich, ziemlich großen Problem führen. Ordnung, großartig. Also haben wir es schon angeschlossen Also ja, wenn Sie hier sehen können, dass das Trinkgeld auf 10% gesetzt wird, würde das Trinkgeld am Ende 2$ pro Person betragen Und dann würde der Gesamtbetrag pro Person dann 22$ betragen, was Sinn macht 100$ geteilt durch fünf Personen wären 20$ pro Person plus 102$ Trinkgeld 22$. Wir können hier ein bisschen Formular zusammenrechnen , nur damit es etwas sauberer aussieht Wir können hier einfach ein 1-Dollar-Zeichen hinzufügen. Fügen Sie 1$ hinzu und melden Sie sich hier an. Sie können es ändern. Schau mal, ob es sich ändert, wenn ich auf die Taste drücke, ob sich dort die Mengen ändern. Das Letzte, was wir wahrscheinlich tun könnten, ist einfach unseren Reset-Knopf anzuschließen. Setze einfach alles auf Null zurück. Also ja, wie Sie sehen können, unterscheidet sich Typescript nicht so sehr von Es ist ziemlich ähnlich in der Art und Weise, wie Sie in einer React-Anwendung oder nur in einer einfachen Javascript-Typoskript-Web-App arbeiten würden einer React-Anwendung oder nur in einer einfachen Javascript-Typoskript-Web-App Der einzige Unterschied besteht darin, die Fehler erkennen zu können , bevor sie Also wie hier, der Fehler war, dass wir nicht einmal die Prüfung bestanden hatten. Wenn das eine Javascript-Anwendung wäre, hätten wir vielleicht zehn, 50 Minuten damit verbracht , das Problem zu debuggen und herauszufinden, was das Problem ist Das Tolle an Typoskript ist, dass es dir einfach erlaubt, hey, hier liegt das Problem Diese schnelle Fehlerbehandlung, bevor Sie Ihre Anwendung starten und die Dinge nicht funktionieren, Sie wissen es nicht. Ja, so richtet man ein Typskript ein, reagiert auf eine Anwendung, hoffentlich war das nützlich. 12. Schlussbemerkung: Fazit, über das wir in diesem Video viel gesprochen haben. Von den Grundlagen von Typoskript bis hin zum Aufbau Ihrer eigenen Typoskript-Web-App Zukunft sollten Sie in der Lage sein, mithilfe von Typoskript Ihre eigenen Websites von Grund auf neu zu erstellen Ihre eigenen Websites von Denken Sie daran, etwas nachzuschlagen , wenn Sie sich nicht sicher sind Ich würde gerne sehen, wie sich Ihre Website Hinterlassen Sie also bitte einen Link zu Ihrem Code, einem Screenshot oder der gehosteten Website im Tab Projekt und Ressourcen unten, damit ich all die harte Arbeit sehen kann, die Sie geleistet haben. Ich lese jeden Kommentar, jede Bewertung und sehe mir alle eingereichten Projekte an. Wenn Sie also Fragen haben, Sie gerne einen Kommentar im Bewertungsbereich unten hinterlassen oder mich direkt kontaktieren. Sie auf meiner Profilseite Weitere Informationen dazu finden Sie auf meiner Profilseite. Wenn du mehr über Programmieren erfahren möchtest, schau dir die anderen Videos an, die ich auf meiner Profilseite habe. Ich habe auch Videos zu Next GS und React auf meinem YouTube-Kanal und auf meiner Website verfügbar. Ich werde sie unten und auf meinem Profil verlinken falls du daran interessiert bist, sie ebenfalls zu erfahren, und ich werde sie im nächsten Video sehen.