Mit TypeScript oder JavaScript reagieren: Was ist besser?

Was ist TypeScript?

Open-Source-TypeScript bietet einen Compiler, der TypeScript-Code in JavaScript-Code umwandelt. Diese Sprache ist Open-Source und Cross-Browser. Angenommen, es gibt fast keine logischen Fehler in der js-Sprache. In diesem Fall können Sie TypeScript verwenden, indem Sie Ihre.js-Skripts in.ts-Dateien umbenennen und beginnen, den entsprechenden TypeScript-Code zu erhalten.

Die JavaScript-Sprache wäre eine spezialisierte Version von TypeScript. Anders Hejlsberg, ein technischer Mitarbeiter bei Microsoft, hat es 2012 eingeführt und erstellt. Da JavaScript immer beliebter wurde, wurde JS-Code umfangreicher und schwieriger zu verstehen, weshalb Typescript entwickelt wurde. Als Programmierer begannen, JavaScript für serverseitige Technologien zu verwenden, wurde dies deutlicher.

Was ist JavaScript?

Jedes Mal, wenn eine Benutzerseite viel mehr tut, als nur da zu sitzen und statische Daten anzuzeigen, die Sie sich ansehen können – aktuelle bessere Inhalte, Visualisierungen, Cartoon-2D/3D-Grafiken, Durchsuchen von Videorekordern usw. –, können Sie darauf wetten, dass JavaScript das ist möglicherweise beteiligt. JavaScript ist eine Skript- oder Programmiersprache, die es Ihnen ermöglicht, fortgeschrittene Strukturen in Webseiten einzubauen. Es ist die dritte Stufe des Kuchens, die aus Standard-Webtechnologien besteht, den ersten beiden (HTML und CSS).

Reagieren Sie besser mit JavaScript oder TypeScript?

Auf den ersten Blick scheint es keinen Unterschied zwischen dem Code eines Standard-React-TypeScripts und JavaScript zu geben. Dies ist durchaus zu erwarten, da TypeScript der Satz von Codes und der Vorfahr von JavaScript ist. Die Unterscheidung zwischen JavaScript und TypeScript hat sich in den letzten Jahren nicht wesentlich geändert. Du bist bereit zu gehen, wenn du sie kennst.

Zukünftige technologische Fortschritte können die Produktion von Software beschleunigen und die Nachfrage nach Programmierern in die Höhe treiben. Bitte verwenden Sie eine beliebige Sprache; Wir erwarten Entwicklung sowohl in kleinen als auch in großen Projekten: Wählen Sie TypeScript für große Projekte mit internationalen Teams oder JavaScript für einfache Aufgaben mit großartigen Teams.

JavaScript ist weit verbreitet. Sie analysieren es und stellen fest, dass die Sprache instabil und unberechenbar ist. Bei Bedarf können JS-Frameworks in TypeScript übersetzt werden. Für die Konvertierung beliebter JS-Systeme in TS sind Arbeitskräfte erforderlich.

Die.d.ts-Dateien müssen dokumentiert werden und alle zurückgegebenen Methoden für jede portierte Bibliothek enthalten. Die Portierung von jQuery erforderte weitere Anstrengungen. Vielleicht ist das gar nicht so schwer. TypeScript wird von IDEA, WebStorm, Expressive, Particle und anderen unterstützt.

Reagieren Sie Code und Dateityp in TypeScript vs. JavaScript

Auf den ersten Blick scheint es keinen Unterschied zwischen dem Code eines Standard-React-TypeScripts und JavaScript zu geben.

Dies ist durchaus zu erwarten, da TypeScript der Satz von Codes und der Vorfahr von JavaScript ist. Dies impliziert, dass jede JavaScript-basierte Programmierung auch TypeScript-Dateien ausführen könnte. Ebenso kann nicht jede SASS-Sprache legitimer CSS-Code sein; Diese Idee besagt, dass alle CSS für SASS-Code akzeptabel sind.

Der Computer kann die TypeScript-Sprache jedoch nicht ausführen, weshalb die meisten Ihrer TypeScript-Anwendungen über tsconfig.json verfügen würden. Diese Konfigurationsdatei ändert das Verhalten des TypeScript-Compilers und übersetzt den TypeScript-Code in JavaScript, das der Browser dann verstehen und verwenden kann.

Der Hauptunterschied zwischen TypeScript und der JavaScript React-Anwendung ist der Dateiname des ersteren. Zum Beispiel TSX, während letzteres.js ist.

Wie erstelle ich ein React-Projekt in Typoskript?

Sie können ein neues TypeScript React-Projekt erstellen, indem Sie die create-react-app-Bibliothek in Ihrer Umgebung verwenden und diesen Befehl verwenden:

 npx create-react-app my-app --template typescript

oder,

 yarn create react-app my-app --template Typescript

Wenn Sie ein vorhandenes JavaScript React-Projekt haben, das Sie in TypeScript umwandeln möchten, können Sie diesen Befehl ausführen.

 npm install — save typescript @types/node @types/react @types/react-dom @types/jest

oder,

 yarn add typescript @types/node @types/react @types/react-dom @types/jest

Nachdem Sie den Befehl ausgeführt haben, können Sie alle Ihre .js-Dateien in .tsx umbenennen, den Server neu starten und loslegen.

1. Käferfänger

Der Anteil der verbleibenden Fehler, die TypeScript beheben kann, steigt, wenn mehr ts-undetectable-Bugs auf andere Weise gesetzt werden, aber dies verringert auch die Gesamtzahl der Probleme, die TypeScript noch verbessern kann. Während der Anteil zunehmen kann, kann sich die Anzahl der entdeckten Probleme daher geringfügig ändern.

2. IntelliSense-Hilfsprogramm in der IDE

List Components, Parameter Info, Rapid Info und Entire Word sind einige der Funktionen, die von IntelliSense, einem Codevervollständigungstool, angeboten werden. Mit nur wenigen Tastenanschlägen können Sie Aufrufe zu Attributen und Methoden hinzufügen, die von Ihnen eingegebenen Argumente aufzeichnen und dank dieser Funktionen ein wenig über die Software erfahren, die Sie verwenden.

3. Geben Sie System ein

Sie fragen sich vielleicht, wie Sie Ihre Variablen oder Objekte strikt typisieren, damit der Code Ihres React TypeScript-Projekts Bug Catcher und IntelliSense aktivieren kann. Um den TypeScript-Typprozess für Sie im Reactive TypeScript-Projekt bereitzustellen, müssen Sie drei Dinge beachten.

1. Deklarieren Sie die Interaktion für Objekte/Arrays und den Untertyp für primitive Typvariablen.

Um ein Feld in einem Objekt optional zu machen, können Sie den Operator verwenden. Dadurch wird verhindert, dass TypeScript Sie bei der Überprüfung Ihres Codes stört.

2. Deklarieren Sie bei Bedarf den Funktionskomponententyp

3. Sie können dies kostenlos nutzen. Durch das Initialisieren einer Eigenschaft mit einem Wert kann TypeScript die Qualität sofort für Sie auswählen.

5 Gründe für die Verwendung von TypeScript mit React

TypeScript war in den letzten Jahren bei Front-End-Programmierern sehr gefragt. Einige Faktoren, die zu seinem Erfolg beitragen, sind verbesserte Wiederverwendbarkeit, Einheitlichkeit des Codes und zukünftige Plattformunterstützung. Darüber hinaus blieb React unvoreingenommen und bot Programmierern die Möglichkeit, TypeScript oder JavaScript zu verwenden. Im Gegensatz dazu haben viele andere Plattformen und Bibliotheken TypeScript standardmäßig übernommen.

In diesem Beitrag werden wir 5 überzeugende Argumente für die Verwendung von TypeScript für React-Apps durchgehen.

1. Komponenten sind einfach zu lesen und zu verstehen

Prop-Typen lassen sich einfach mit TypeScript definieren, was den Code viel präziser und verständlicher macht. Darüber hinaus wird Unterstützung für IntelliSense und statische Typprüfung enthalten sein.

Zusammen verbessern diese Faktoren den Entwicklungsprozess und verringern die Möglichkeit von Fehlern. Darüber hinaus erleichtert das Hinzufügen von Notizen zu Requisitentypen das Verständnis von Komponentendefinitionen.

2. Bessere JSX-Unterstützung

Ein weiterer Vorteil von TypeScript + React verbesserte IntelliSense und Codesynthese für JSX. Bit macht es einfach, unabhängige Komponenten projektübergreifend zu verteilen, zu beschreiben und wiederzuverwenden. Verwenden Sie es, um skalierbare Anwendungen zu erstellen, ein konsistentes Design beizubehalten, die Wiederverwendung von Code zu fördern, mit anderen zusammenzuarbeiten und die Bereitstellung zu beschleunigen.

3. Unterstützung für TypeScript standardmäßig in gemeinsam genutzten Bibliotheken

Angenommen, Sie haben TypeScript vor einigen Jahren verwendet. In diesem Fall erinnern Sie sich vielleicht, wie frustrierend es war, nach Konzepten zu suchen, die für Bibliotheken von Drittanbietern entstanden sind. Aber jetzt gewinnt TypeScript schnell an Popularität; Die am weitesten verbreiteten Bibliotheken unterstützen Typdefinitionen. Darüber hinaus werden Typdefinitionen von der React-Bibliotheksarchitektur unterstützt, sodass Sie sich darüber keine Gedanken mehr machen müssen.

4. Schrittweise Umsetzung für laufende Projekte

Die Wahl von TypeScript wäre keine einfache Ein-oder-Aus-Entscheidung. Stattdessen handelt es sich um eine fortschreitende Änderung, die auf dem aktuellen Status des Programms basiert. Angenommen, Sie haben sich entschieden, TypeScript für ein aktuelles React-Projekt zu verwenden. In dieser Situation sollten Sie überlegen, wie Sie TypeScript und JavaScript gleichzeitig betreiben und die Verwendung von TypeScript schrittweise erweitern. Darüber hinaus können Sie die TypeScript-Compilerparameter so einstellen, dass sie schrittweise migrieren.

5. Vorteile von IntelliSense und statischer Typvalidierung im Allgemeinen

a. Testen auf statische Typen

Fehler lassen sich aufgrund der statischen Typprüfung schneller erkennen. Das zuvor erwähnte Beispiel erkennt angemessen, dass eine Zeichenfolge und keine Zahl als Eingabe für die Methode „Details abrufen“ benötigt wird.

b. Besseres IntelliSense

Sie können sich darauf verlassen, dass IntelliSense zu 100 % korrekt bleibt, wenn die statische Datenvalidierung von TypeScript und IntelliSense kombiniert werden.

c. Verbessertes Refactoring

Refactoring ist mit TypeScript erheblich einfacher, da wir die genauen Sprachen kennen und wissen, wo Änderungen vorgenommen werden müssen. Wenn ein Problem schnell entdeckt wird, riskieren Sie außerdem nicht, etwas zu beschädigen.

d. Weniger Fehler, die nicht definiert sind

Da der TypeScript-Interpreter zusätzlich undefinierte Fehler zum Zeitpunkt der Transpilation identifiziert, wird die Wahrscheinlichkeit verringert, dass sie bei der Ausführung auftreten.

e. Verbesserte Lesbarkeit und Wartung

Die Codebasis wäre mit Typdefinitionen deutlich verständlicher und pflegeleichter. Sie können sich an die Prinzipien der objektorientierten Entwicklung halten und Strukturen wie Schnittstellen verwenden, um Ihren Code so zu organisieren, dass die Kopplung minimiert wird.

f. Probleme bei der Verwendung von TypeScript werden behoben.

Da wir bereits über die Vorteile von TypeScript gesprochen haben, wollen wir nun mehr über seine Nachteile erfahren, um besser für seine Einführung gerüstet zu sein.

g. Kurve zum Lernen

Der Einstieg in die Verwendung von TypeScript kann aufgrund der steilen Lernkurve schwierig sein, insbesondere wenn Ihre Mitarbeiter nur Erfahrung mit einfachem JavaScript haben. Die beste Vorgehensweise in dieser Situation ist die oben beschriebene progressive Anpassung.

Aber wenn die Gruppe bereits Erfahrung mit dynamisch typisierten Sprachen wie Java oder C# hat, ist es nicht allzu schwierig, Typoskript zu verstehen.

h. In einer Bibliothek eines Drittanbieters fehlen Typdefinitionen.

Dies ist angesichts der wachsenden Popularität von TypeScript ein ungewöhnlicher Umstand. Die offizielle Dokumentation von TypeScript bietet jedoch hilfreiche Ratschläge, wenn Sie auf eine Bibliothek stoßen, der die Definitionen fehlen. Zitieren Sie dies.

ich. Berechnungszeitraum

Natürlich dauert es noch ein paar Millisekunden, um den Quellcode zu erstellen, da er eine zusätzliche Transpirationsschicht durchlaufen muss. Aber meistens wird dies nicht offensichtlich sein. Die Vorteile in Bezug auf Entwicklungskompetenz und geringere Anfälligkeit für Probleme überwiegen den Nachteil des langen Aufwands.

Einpacken

Es ist eine Verbindung zwischen kurzfristigem Leiden und langfristiger Belohnung. Wenn Sie ein TypeScript-Projekt starten, finden Sie es möglicherweise sehr schwierig und zeitaufwändig, alle Autorenwerkzeuge einzurichten. Wenn Ihre App jedoch wächst, werden Sie feststellen, dass diese Boilerplates eine enorme Hilfe sind und die Wahrscheinlichkeit von Fehlern beschleunigen und verringern. Wir hoffen, dass dieser Artikel Sie unglaublich gefesselt und Ihnen geholfen hat, den Wert der Verwendung von TypeScript in Ihrem React-Projekt zu erkennen.