Reacționați cu TypeScript sau JavaScript: care este mai bine?

Ce este TypeScript?

TypeScript cu sursă deschisă oferă un compilator care transformă codul TypeScript în cod JavaScript. Acest limbaj este open-source și cross-browser. Să presupunem că nu există aproape niciun defecte logice în limbajul js. În acest caz, puteți utiliza TypeScript redenumind scripturile dumneavoastră.js în fișiere.ts și începeți să primiți codul TypeScript corespunzător.

Limbajul JavaScript ar fi o versiune specializată a TypeScript. Anders Hejlsberg, un coleg tehnic la Microsoft, l-a introdus și creat în 2012. Deoarece JavaScript a devenit mai popular, codul JS a devenit mai voluminos și mai greu de înțeles, motiv pentru care a fost dezvoltat Typescript. Când programatorii au început să utilizeze JavaScript pentru tehnologiile de pe server, acest lucru a devenit mai clar.

Ce este JavaScript?

De fiecare dată când o pagină de utilizator face mult mai mult decât să ajungă acolo și să afișeze date statice pe care să le privești — prezentând conținut mai bun, vizualizări, desene animate grafice 2D/3D, parcurgerea playerelor de înregistrare video etc. — ai putea paria că JavaScript este eventual implicat. JavaScript este un limbaj de scriptare sau codare care vă permite să încorporați structuri avansate în paginile web. Este al treilea nivel al tortului format din tehnologii web standard, primele două (HTML și CSS).

Este React mai bine cu JavaScript sau TypeScript?

La prima inspecție, pare să nu existe nicio distincție între codul dintr-un React TypeScript standard și JavaScript. Acest lucru este de așteptat, având în vedere că TypeScript este Setul de coduri și este strămoșul JavaScript. Distincțiile dintre JavaScript și TypeScript nu s-au schimbat prea mult în ultimii ani. Ești pregătit să pleci dacă îi cunoști.

Progresele tehnologice viitoare pot accelera producția de software, crescând cererea de programatori. Vă rugăm să utilizați orice limbă; anticipăm dezvoltarea atât în ​​proiecte minore, cât și în proiecte majore: alegeți TypeScript pentru proiecte mari cu echipe internaționale sau JavaScript pentru sarcini simple cu echipe grozave.

JavaScript este utilizat pe scară largă. Ei îl analizează și constată că limbajul este instabil și imprevizibil. Dacă este necesar, cadrele JS pot fi traduse în TypeScript. Este necesară forța de muncă pentru a converti sistemele JS populare în TS.

Fișierele.d.ts trebuie să fie documentate și să conțină toate metodologiile returnate pentru fiecare bibliotecă portată. Portarea jQuery a necesitat un efort suplimentar. Poate că acest lucru nu este atât de dificil. TypeScript este acceptat de IDEA, WebStorm, Expressive, Particle și altele.

Codul de reacție și tipul de fișier în TypeScript vs. JavaScript

La prima inspecție, pare să nu existe nicio distincție între codul dintr-un React TypeScript standard și JavaScript.

Acest lucru este de așteptat, având în vedere că TypeScript este Setul de coduri și este strămoșul JavaScript. Acest lucru implică faptul că orice programare bazată pe JavaScript ar putea, de asemenea, să execute fișiere TypeScript. În mod similar, nu toate limbajele SASS pot fi cod CSS legitim; această idee afirmă că toate CSS sunt acceptabile pe codul SASS.

Cu toate acestea, computerul nu poate executa limbajul TypeScript, motiv pentru care majoritatea aplicațiilor TypeScript ar avea tsconfig.json. Acest fișier de configurare va modifica modul în care se comportă compilatorul TypeScript și va traduce codul TypeScript în JavaScript, pe care browserul îl poate înțelege și utiliza.

Principala distincție între TypeScript și aplicația JavaScript React este numele fișierului primei. De exemplu, TSX, în timp ce acesta din urmă este.js.

Cum se creează un proiect React în Typescript?

Puteți crea un nou proiect TypeScript React utilizând biblioteca create-react-app din mediul dvs. și utilizați această comandă:

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

sau,

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

Dacă aveți un proiect JavaScript React existent pe care doriți să îl transformați în TypeScript, puteți rula această comandă.

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

sau,

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

După ce rulați comanda, puteți redenumi toate fișierele .js în .tsx, puteți reporni serverul și puteți începe.

1. Bug Catcher

Proporția de defecte rămase pe care TypeScript le poate remedia crește atunci când mai multe erori ts-nedetectabile sunt setate prin alte mijloace, dar acest lucru scade și numărul total de probleme pe care TypeScript le poate îmbunătăți. Prin urmare, în timp ce proporția poate crește, numărul de probleme descoperite se poate modifica ușor.

2. Ajutor IntelliSense în IDE

List Components, Parameter Info, Rapid Info și Entire Word sunt câteva dintre funcțiile oferite de IntelliSense, un instrument de completare a codului. Cu doar câteva apăsări de taste, puteți adăuga apeluri la atribute și metode, puteți păstra o evidență a argumentelor pe care le introduceți și puteți descoperi puțin despre software-ul pe care îl utilizați datorită acestor capacități.

3. Tip System

S-ar putea să vă întrebați cum să introduceți cu strictețe variabilele sau obiectele, astfel încât codul proiectului React TypeScript să poată activa Bug Catcher și IntelliSense. Pentru a furniza Procesul de tip TypeScript care merge pentru dvs. în proiectul Reactive TypeScript, există trei lucruri de reținut.

1. Declarați interacțiunea pentru obiecte/matrice și subtipul pentru variabilele de tip primitiv.

Pentru a face un câmp într-un obiect opțional, puteți utiliza Operatorul. Acesta va împiedica TypeScript să vă deranjeze atunci când vă verifică codul.

2. Ori de câte ori este necesar, declarați tipul de componentă funcțională

3. Puteți folosi acest lucru gratuit. Inițializarea unei proprietăți cu o valoare permite TypeScript să selecteze imediat calitatea pentru dvs.

5 motive pentru a utiliza TypeScript cu React

TypeScript a fost foarte solicitat în rândul programatorilor front-end în ultimii doi ani. Câțiva factori care contribuie la succesul său sunt reutilizarea îmbunătățită, uniformitatea codului și suportul pentru platforma viitoare. În plus, react a rămas imparțial, oferind programatorilor opțiunea de a folosi TypeScript sau JavaScript. În schimb, multe alte platforme și biblioteci au adoptat implicit TypeScript.

În această postare, vom trece prin 5 argumente convingătoare în favoarea utilizării aplicațiilor TypeScript pentru React.

1. Componentele sunt ușor de citit și de înțeles

Tipurile de prop sunt ușor de definit folosind TypeScript, ceea ce face codul mult mai precis și mai ușor de înțeles. În plus, va fi inclus suport pentru IntelliSense și verificarea tipului static.

Împreună, acești factori îmbunătățesc procesul de dezvoltare și reduc posibilitatea apariției defectelor. În plus, adăugarea de note la tipurile de prop face definițiile componentelor mai ușor de înțeles.

2. Suport mai bun pentru JSX

Un alt beneficiu al TypeScript + React a îmbunătățit IntelliSense și sinteza codului pentru JSX. Bit simplifică distribuirea, descrierea și reutilizarea componentelor independente între proiecte. Utilizați-l pentru a crea aplicații scalabile, pentru a păstra un design consistent, pentru a promova reutilizarea codului, pentru a coopera cu alții și pentru a grăbi livrarea.

3. Suport pentru TypeScript în mod implicit în bibliotecile partajate

Să presupunem că utilizați TypeScript acum câțiva ani. În acest caz, s-ar putea să vă amintiți cât de frustrant a fost să căutați Concepte care au apărut pentru biblioteci terțe. Dar acum că TypeScript câștigă rapid popularitate; cele mai utilizate biblioteci acceptă definiții de tip. În plus, definițiile de tip sunt acceptate de arhitectura bibliotecii React, astfel încât nu mai trebuie să vă îngrijorați.

4. Implementarea treptată pentru proiectele curente

Alegerea TypeScript nu ar fi o simplă decizie de pornire sau oprire. În schimb, este o schimbare progresivă bazată pe starea programului la momentul respectiv. De exemplu, să presupunem că ați ales să utilizați TypeScript pentru un proiect React curent. În această situație, ar trebui să luați în considerare cum să operați simultan TypeScript și JavaScript în timp ce extindeți progresiv utilizarea TypeScript. În plus, puteți seta parametrii compilatorului TypeScript să migreze treptat.

5. Avantajele IntelliSense și validarea tipului static în general

A. Testarea tipurilor statice

Erorile sunt mai ușor de detectat mai devreme din cauza verificării tipului statice. Exemplul menționat mai devreme recunoaște în mod corespunzător că un șir, nu un număr, este necesar ca intrare pentru metoda obține detalii.

b. IntelliSense mai bun

Puteți avea încredere că IntelliSense rămâne 100% corect atunci când validarea datelor statice TypeScript și IntelliSense sunt combinate.

c. Îmbunătățirea refactorizării

Refactorizarea este considerabil mai simplă cu TypeScript, deoarece știm limbajele precise și unde să facem modificări. În plus, dacă o problemă este descoperită rapid, nu veți risca să deteriorați nimic.

d. Mai puține greșeli care nu sunt definite

Deoarece interpretorul TypeScript identifică în plus erorile nedefinite la momentul transpilării, probabilitatea ca acestea să apară la execuție este redusă.

e. Lizibilitate și întreținere îmbunătățite

Baza de cod ar fi mult mai inteligibilă și menținută folosind definițiile de tip. Puteți să respectați principiile dezvoltării orientate pe obiect și să utilizați structuri precum interfețele pentru a vă organiza codul într-un mod care să minimizeze cuplarea.

f. Problemele legate de utilizarea TypeScript sunt rezolvate.

Având în vedere că am vorbit anterior despre avantajele TypeScript, să aflăm mai multe despre dezavantajele sale pentru a fi mai bine echipate pentru adoptarea sa.

g. Curba pentru invatare

Începerea utilizării TypeScript poate fi o provocare din cauza curbei abrupte de învățare, mai ales dacă forța de muncă are experiență doar cu JavaScript de bază. Cel mai bun curs de acțiune în această situație este adoptarea adaptării progresive descrise mai sus.

Dar dacă grupul are deja experiență cu limbaje tastate dinamic, cum ar fi Java sau C# Understanding Typescript, nu este prea complicat.

h. Definițiile tipului lipsesc dintr-o bibliotecă terță parte.

Aceasta este o circumstanță neobișnuită, având în vedere popularitatea tot mai mare a TypeScript. Cu toate acestea, documentația oficială TypeScript oferă sfaturi utile dacă întâlniți o bibliotecă care nu are definiții. Citează asta.

i. Perioada de calcul

Desigur, va mai dura câteva milisecunde pentru a construi codul sursă, deoarece acesta trebuie să treacă printr-un strat suplimentar de transpirație. Dar de cele mai multe ori, acest lucru nu va fi evident. Avantajele sale în ceea ce privește expertiza în dezvoltare și faptul că este mai puțin predispus la probleme vor depăși dezavantajul său că necesită efort îndelungat.

Încheierea

Este o legătură între suferința pe termen scurt și recompensa pe termen lung. Când începeți un proiect TypeScript, s-ar putea să vă fie foarte dificil și consumator de timp să stabiliți toate instrumentele de creație. Cu toate acestea, pe măsură ce aplicația dvs. crește, veți descoperi că aceste planșe sunt de mare ajutor și accelerează și reduc probabilitatea de erori. Sperăm că acest articol v-a surprins incredibil și v-a ajutat să recunoașteți valoarea utilizării TypeScript în proiectul dvs. React.