Reagisci con TypeScript o JavaScript: quale è meglio?

Che cos'è TypeScript?

TypeScript open source fornisce un compilatore che trasforma il codice TypeScript in codice JavaScript. Quella lingua è open source e cross-browser. Supponiamo che non ci siano quasi difetti logici nel linguaggio js. In tal caso, puoi utilizzare TypeScript rinominando i tuoi script.js in file.ts e iniziare a ricevere il codice TypeScript appropriato.

Il linguaggio JavaScript sarebbe una versione specializzata di TypeScript. Anders Hejlsberg, un collega tecnico di Microsoft, lo ha introdotto e creato nel 2012. Poiché JavaScript è diventato più popolare, il codice JS è diventato più ingombrante e più difficile da comprendere, motivo per cui è stato sviluppato Typescript. Quando i programmatori hanno iniziato a utilizzare JavaScript per le tecnologie lato server, questo è diventato più chiaro.

Cos'è JavaScript?

Ogni volta che una pagina utente fa molto di più che restare seduta lì e visualizzare dati statici da guardare — mostrando contenuti, visualizzazioni, grafica 2D/3D di cartoni animati, sfogliando videoregistratori, ecc. — potresti scommettere che JavaScript è eventualmente coinvolto. JavaScript è un linguaggio di scripting o codifica che ti consente di incorporare strutture avanzate nelle pagine web. È il terzo livello della torta composto da tecnologie web standard, i primi due (HTML e CSS).

Reagire meglio con JavaScript o TypeScript?

A prima vista, non sembra esserci alcuna distinzione tra il codice di un React TypeScript standard e JavaScript. Questo è del tutto previsto dato che TypeScript è l'insieme di codici ed è l'antenato di JavaScript. Le distinzioni tra JavaScript e TypeScript non sono cambiate molto negli ultimi anni. Sei pronto ad andare se li conosci.

I futuri progressi tecnologici potrebbero accelerare la produzione di software, facendo aumentare la domanda di programmatori. Si prega di utilizzare qualsiasi lingua; prevediamo lo sviluppo sia nei progetti minori che in quelli principali: scegli TypeScript per progetti di grandi dimensioni con team internazionali o JavaScript per attività semplici con grandi team.

JavaScript è ampiamente utilizzato. Lo analizzano e scoprono che il linguaggio è instabile e imprevedibile. Se necessario, i framework JS possono essere tradotti in TypeScript. La manodopera è necessaria per convertire i più diffusi sistemi JS in TS.

I file.d.ts devono essere documentati e contenere tutte le metodologie restituite per ciascuna libreria trasferita. Il porting di jQuery ha richiesto ulteriori sforzi. Forse non è così difficile. TypeScript è supportato da IDEA, WebStorm, Expressive, Particle e altri.

Reagisci al codice e al tipo di file in TypeScript rispetto a JavaScript

A prima vista, non sembra esserci alcuna distinzione tra il codice di un React TypeScript standard e JavaScript.

Questo è del tutto previsto dato che TypeScript è l'insieme di codici ed è l'antenato di JavaScript. Ciò implica che qualsiasi programmazione basata su JavaScript sarebbe anche in grado di eseguire file TypeScript. Allo stesso modo, non tutto il linguaggio SASS può essere codice CSS legittimo; questa idea afferma che tutti i CSS sono accettabili sul codice SASS.

Tuttavia, il computer non può eseguire il linguaggio TypeScript, motivo per cui la maggior parte delle applicazioni TypeScript avrebbe tsconfig.json. Questo file di configurazione modificherà il comportamento del compilatore TypeScript e tradurrà il codice TypeScript in JavaScript, che il browser può quindi comprendere e utilizzare.

La principale distinzione tra TypeScript e l'applicazione JavaScript React è il nome del file della prima. Ad esempio, TSX, mentre quest'ultimo è.js.

Come creare un progetto React in Typescript?

Puoi creare un nuovo progetto TypeScript React utilizzando la libreria create-react-app nel tuo ambiente e utilizzare questo comando:

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

o,

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

Se hai un progetto JavaScript React esistente che desideri trasformare in TypeScript, puoi eseguire questo comando.

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

o,

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

Dopo aver eseguito il comando, puoi rinominare tutti i tuoi file .js in .tsx, riavviare il server e iniziare.

1. Raccoglitore di insetti

La proporzione di difetti rimanenti che TypeScript può correggere aumenta quando vengono impostati più bug ts-non rilevabili con altri mezzi, ma ciò riduce anche il numero complessivo di problemi che TypeScript può ancora migliorare. Pertanto, mentre la proporzione può aumentare, il numero di problemi scoperti potrebbe variare leggermente.

2. Assistente IntelliSense nell'IDE

Elenco componenti, Informazioni parametro, Informazioni rapide e Parola intera sono alcune delle funzioni offerte da IntelliSense, uno strumento di completamento del codice. Con solo pochi tasti, puoi aggiungere chiamate ad attributi e metodi, tenere traccia degli argomenti che stai digitando e scoprire qualcosa sul software che stai utilizzando grazie a queste funzionalità.

3. Digitare Sistema

Potresti chiederti come digitare rigorosamente le tue variabili o oggetti in modo che il codice del tuo progetto React TypeScript possa abilitare Bug Catcher e IntelliSense. Per fornire il processo di tipo TypeScript per te nel progetto TypeScript reattivo, ci sono tre cose da tenere a mente.

1. Dichiarare l'interazione per oggetti/array e il sottotipo per variabili di tipo primitivo.

Per rendere facoltativo un campo in un oggetto, puoi utilizzare l'Operatore. Eviterà che TypeScript ti infastidisca quando controlla il tuo codice.

2. Quando necessario, dichiarare il tipo di componente funzionale

3. Puoi usarlo gratuitamente. L'inizializzazione di una proprietà con un valore consente a TypeScript di selezionare immediatamente la qualità.

5 motivi per utilizzare TypeScript con React

TypeScript è stato molto richiesto dai programmatori front-end negli ultimi due anni. Alcuni fattori che contribuiscono al suo successo sono il miglioramento della riusabilità, l'uniformità del codice e il futuro supporto della piattaforma. Inoltre, la reazione è rimasta imparziale, offrendo ai programmatori la possibilità di utilizzare TypeScript o JavaScript. Al contrario, molte altre piattaforme e librerie hanno adottato TypeScript per impostazione predefinita.

In questo post, esamineremo 5 argomenti convincenti a favore dell'utilizzo di TypeScript per le app React.

1. I componenti sono semplici da leggere e comprendere

I tipi di prop sono semplici da definire utilizzando TypeScript, il che rende il codice molto più preciso e comprensibile. Verrà inoltre incluso il supporto per IntelliSense e il controllo del tipo statico.

Insieme, questi fattori migliorano il processo di sviluppo e riducono la possibilità di difetti. Inoltre, l'aggiunta di note ai tipi di prop semplifica la comprensione delle definizioni dei componenti.

2. Migliore supporto JSX

Un altro vantaggio di TypeScript + React ha migliorato IntelliSense e la sintesi del codice per JSX. Bit semplifica la distribuzione, la descrizione e il riutilizzo di componenti indipendenti tra i progetti. Utilizzalo per creare applicazioni scalabili, mantenere un design coerente, promuovere il riutilizzo del codice, collaborare con altri e accelerare la consegna.

3. Supporto per TypeScript per impostazione predefinita nelle librerie condivise

Supponiamo di utilizzare TypeScript qualche anno fa. In tal caso, potresti ricordare quanto sia stato frustrante cercare i concetti emersi per le librerie di terze parti. Ma ora che TypeScript sta rapidamente guadagnando popolarità; le librerie più utilizzate supportano le definizioni dei tipi. Inoltre, le definizioni dei tipi sono supportate dall'architettura della libreria React, quindi non è più necessario preoccuparsene.

4. Attuazione graduale per i progetti in corso

La scelta di TypeScript non sarebbe una semplice decisione di attivazione o disattivazione. Invece, è un cambiamento progressivo basato sullo stato del programma in quel momento. Ad esempio, supponiamo che tu abbia scelto di utilizzare TypeScript per un progetto React corrente. In tale situazione, dovresti considerare come utilizzare TypeScript e JavaScript contemporaneamente espandendo progressivamente l'uso di TypeScript. È inoltre possibile impostare i parametri del compilatore TypeScript per la migrazione graduale.

5. Vantaggi di IntelliSense e della convalida del tipo statico in generale

un. Test per tipi statici

Gli errori sono più facili da individuare prima grazie al controllo del tipo statico. L'esempio menzionato in precedenza riconosce opportunamente che una stringa, non un numero, è necessaria come input per il metodo get dettagli.

b. Migliore IntelliSense

Puoi fidarti che IntelliSense rimane corretto al 100% quando la convalida dei dati statici TypeScript e IntelliSense vengono combinati.

c. Migliorare il refactoring

Il refactoring è notevolmente più semplice con TypeScript poiché conosciamo i linguaggi precisi e dove apportare modifiche. Inoltre, se un problema viene rilevato rapidamente, non rischierai di danneggiare nulla.

d. Meno errori non definiti

Poiché l'interprete TypeScript identifica inoltre gli errori non definiti al momento del transpile, la probabilità che si verifichino durante l'esecuzione è ridotta.

e. Leggibilità e manutenzione migliorate

La base di codice sarebbe significativamente più comprensibile e gestita utilizzando le definizioni dei tipi. Puoi aderire ai principi dello sviluppo orientato agli oggetti e utilizzare strutture come le interfacce per organizzare il tuo codice in modo da ridurre al minimo l'accoppiamento.

f. I problemi di utilizzo di TypeScript vengono risolti.

Dato che abbiamo precedentemente parlato dei vantaggi di TypeScript, impariamo di più sui suoi svantaggi per essere meglio attrezzati per la sua adozione.

g. Curva per l'apprendimento

Iniziare a utilizzare TypeScript può essere difficile a causa della curva di apprendimento ripida, in particolare se la tua forza lavoro ha esperienza solo con JavaScript di base. La migliore linea d'azione in questa situazione è adottare l'adattamento progressivo sopra descritto.

Ma se il gruppo ha già esperienza con linguaggi tipizzati dinamicamente, come Java o C#Understanding Typescript non è troppo complicato.

h. Le definizioni dei tipi mancano da una libreria di terze parti.

Questa è una circostanza insolita data la crescente popolarità di TypeScript. Tuttavia, la documentazione ufficiale di TypeScript offre consigli utili se ti imbatti in una libreria senza le definizioni. Cita questo.

io. Periodo di calcolo

Naturalmente, ci vorranno ancora qualche millisecondo per costruire il codice sorgente poiché deve passare attraverso un ulteriore livello di traspirazione. Ma la maggior parte delle volte, questo non sarà evidente. I suoi vantaggi in termini di competenza nello sviluppo e di essere meno soggetto a problemi supereranno il suo svantaggio di richiedere un lungo sforzo.

Avvolgendo

È una connessione tra sofferenza a breve termine e ricompensa a lungo termine. Quando si avvia un progetto TypeScript, può risultare molto difficile e dispendioso in termini di tempo definire tutti gli strumenti di creazione. Tuttavia, man mano che la tua app cresce, scoprirai che questi standard sono di enorme aiuto e accelerano e riducono la probabilità di errori. Ci auguriamo che questo articolo ti abbia catturato incredibilmente e ti abbia aiutato a riconoscere il valore dell'utilizzo di TypeScript nel tuo progetto React.