Perché dovresti scegliere TypeScript su JavaScript

BY admin
|

TypeScript è in aumento nella sua popolarità negli ultimi due anni. È menzionato tra le cinque lingue più promettenti nel 2020. Angular, uno dei più grandi framework di frontend, utilizza TypeScript. Circa il 60% dei programmatori JS usa già TypeScript e il 22% desidera provare. Perché?

Storicamente, JavaScript è diventato il linguaggio principale per lo scripting di pagine Web e app su Internet. Ora è possibile utilizzare JavaScript sia sul frontend che sul backend con framework come Node.js e Deno.

Ma JavaScript è stato creato per creare sistemi grandi e complessi come quelli del web moderno? No.

In questo articolo, ti presenteremo una soluzione per questo – TypeScript – e inizierai verso il percorso di aggiunta di tipi al tuo codice JavaScript.

Ecco alcuni dei punti che tratteremo:

  • Che cosa è dattiloscritto?
  • Quali sono i tipi e come funzionano in TS?
  • JavaScript vs dattiloscritto: quale scegliere?
  • Come iniziare con TypeScript.
  • Ulteriori risorse per lo studio dattiloscritto.

Che cos’è TypeScript?

In breve, TypeScript è un superset di JavaScript che ha la digitazione opzionale e compila in JavaScript semplice.

In parole più semplici, TypeScript tecnicamente è JavaScript con digitazione statica, ogni volta che vuoi averlo.

Ora, quali sarebbero le ragioni per aggiungere la digitazione statica a JavaScript?

Posso elencarne almeno tre:

  • Puoi evitare errori ninja magistralmente nascosti come il classico 'undefined' is not a function.
  • È più facile refactoring del codice senza romperlo in modo significativo.
  • Orientarsi in sistemi complessi e su larga scala non è più un incubo.

In realtà, uno studio mostra che il 15% di tutti i bug JavaScript può essere rilevato da TypeScript.

La libertà di digitazione dinamica porta spesso a bug che non solo riducono l’efficienza del lavoro del programmatore, ma possono anche rallentare lo sviluppo a causa dell’aumento dei costi di aggiunta di nuove righe di codice.

Pertanto, il fallimento di JavaScript per incorporare cose come i tipi e i controlli degli errori in fase di compilazione lo rende una cattiva scelta per il codice lato server nelle imprese e nelle grandi basi di codice. Come dice il loro slogan, TypeScript è JavaScript che scala.

Di cosa ho bisogno per imparare ad usare TypeScript?

TypeScript è essenzialmente un linter JS. Oppure, JS con la documentazione che il compilatore può capire.

Pertanto, a differenza di altri linguaggi come CoffeeScript (che aggiunge zucchero sintattico) o PureScript (che non assomiglia affatto a JavaScript), non è necessario imparare molto per iniziare a scrivere codice dattiloscritto.

I tipi in TS sono facoltativi e ogni file JS è un file TypeScript valido. Mentre il compilatore si lamenterà se hai errori di tipo nei tuoi file iniziali, ti restituisce un file JavaScript che funziona come prima. Ovunque tu sia, TypeScript ti incontrerà lì, ed è facile costruire gradualmente le tue abilità.

TypeScript viene utilizzato sul frontend o sul backend?

TypeScript è compilato in JavaScript. Pertanto, TS può essere utilizzato ovunque sia possibile utilizzare JS: sia il frontend che il backend.

JavaScript è il linguaggio più popolare per implementare lo scripting per il frontend di app e pagine web. Pertanto, TypeScript può essere utilizzato per lo stesso scopo, ma brilla in progetti aziendali complessi sul lato server.

A Serokell, la maggior parte del nostro frontend web è implementato in TypeScript.

Quali sono i tipi e come funzionano in TS?

Breve introduzione ai tipi

I tipi sono un modo per distinguere i programmi corretti da quelli errati prima di eseguirli descrivendo nel nostro codice come intendiamo utilizzare i nostri dati. Possono variare da tipi semplici come Numero e Stringa a strutture complesse perfettamente modellate per il nostro dominio del problema.

I linguaggi di programmazione si dividono in due categorie: tipizzati staticamente o tipizzati dinamicamente.

Nelle lingue con tipizzazione statica, il tipo della variabile deve essere noto in fase di compilazione. Se dichiariamo una variabile, dovrebbe essere noto (o inferibile) dal compilatore se sarà un numero, una stringa o un booleano. Pensa a Java.

Nelle lingue con digitazione dinamica, questo non è necessariamente così. Il tipo di variabile è noto solo quando si esegue il programma. Pensa a Python.

TypeScript può supportare la digitazione statica, mentre JavaScript no.

A causa della digitazione statica di TypeScript, è necessario provare più duramente a:

  • introduce variabili indefinite (aiuto per gli avvisi in fase di compilazione)
  • somma due stringhe che contengono numeri (come “4” + “20” = “420”)
  • fare operazioni su cose che non li consentono, come il taglio di un numero.

Con i sistemi di tipo statico, è possibile creare i propri tipi compositi. Ciò consente agli ingegneri di esprimere le loro intenzioni in modo più dettagliato.

I tipi espliciti rendono anche il tuo codice auto-documentante: si assicurano che le variabili e le funzioni corrispondano a ciò che è destinato e consentono al computer di prendersi cura di ricordare il contesto circostante.

Tipi di dattiloscritto

TypeScript ha una varietà di tipi di base, come booleano, Numero, Stringa, Array, tupla, ecc. Alcuni di questi non esistono in JS; puoi saperne di più su di loro nella documentazione di TypeScript.

Oltre a quelli, ecco alcuni altri tipi che vogliamo caratterizzare per mostrare l’espressività di TS:

Qualsiasi & Sconosciuto

Mentre qualsiasi come tipo può coprire, beh, tutto ciò che desideri, unknown è la sua controparte sicura per il tipo.

Ogni volta che si desidera sfuggire al sistema di tipi, any consente di assegnare qualsiasi variabile JavaScript ad esso. Viene spesso utilizzato per modellare variabili in entrata (da API di terze parti, ad esempio) che non sono ancora state controllate e il cui tipo è sconosciuto.

Unknown è molto simile a qualsiasi, ma non ti consente di eseguire alcuna operazione sulla variabile prima che venga esplicitamente selezionata.

Vuoto

Void viene utilizzato quando non viene restituito alcun valore, ad esempio, come tipo di ritorno di funzioni che non restituiscono nulla.

Mai

Never è il tipo di ritorno per qualcosa che non dovrebbe mai verificarsi, come una funzione che genererà un’eccezione.

Intersezione & Tipi di unione

Questi consentono di creare tipi personalizzati per adattarsi meglio alla logica.

I tipi di intersezione consentono di mettere insieme diversi tipi di base in un unico tipo. Ad esempio, è possibile creare una persona di tipo personalizzato con un name: string e un phone_number: number. È equivalente a dire: voglio che il mio tipo sia questo e quello.

I tipi di unione consentono al tipo di prendere uno dei più tipi di base. Ad esempio, è possibile avere una query che restituisce result: string o undefined. È equivalente a dire: voglio che il mio tipo sia questo o quello.

Se si pensa ai tipi come spazi, tutti questi tipi hanno rapidamente senso.

I tipi in TypeScript possono essere sia impliciti che espliciti. Se non si scrivono esplicitamente i tipi, il compilatore utilizzerà l’inferenza del tipo per dedurre i tipi che si stanno utilizzando.

Scriverli esplicitamente, tuttavia, offre vantaggi come aiutare altri sviluppatori che leggono il codice e assicurarsi che ciò che vedi sia ciò che vede il compilatore.

dattiloscritto vs JavaScript

Vale la pena essere pragmatici. Dai un’occhiata a questo grafico:

Dal nulla, TypeScript è ora nella posizione 7th in GitHub pull requests per Q1 2020, sopra PHP e C. (Source)

Mentre una causa considerevole di questo è il supporto di TypeScript da parte di aziende come Microsoft (che lo ha creato) e Google, è supportato per una buona ragione.

3 motivi per scegliere TypeScript su JavaScript

1. TypeScript è più affidabile

A differenza di JavaScript, il codice dattiloscritto è più affidabile e più facile da refactoring. Ciò consente agli sviluppatori di eludere gli errori e riscrivere molto più facilmente.

I tipi invalidano la maggior parte degli errori stupidi che possono intrufolarsi nelle basi di codice JavaScript e creare un rapido ciclo di feedback per correggere tutti i piccoli errori durante la scrittura di nuovo codice e il refactoring.

2. TypeScript è più esplicito

Rendere espliciti i tipi focalizza la nostra attenzione su come è costruito esattamente il nostro sistema e su come le diverse parti di esso interagiscono tra loro. Nei sistemi su larga scala, è importante essere in grado di astrarre il resto del sistema mantenendo il contesto in mente. I tipi ci permettono di farlo.

3. TypeScript e JavaScript sono praticamente intercambiabili, quindi perché no?

Poiché JavaScript è un sottoinsieme di dattiloscritto, è possibile utilizzare tutte le librerie JavaScript e il codice che si desidera nel codice dattiloscritto.

Le librerie JavaScript più popolari hanno tipi nel 2020-Sicuramente Typed è un repository con tipi per molte diverse librerie JavaScript che è possibile utilizzare per rendere le interazioni con loro più sicure per i tipi.

Ciò significa che puoi gradualmente adottare TypeScript nella tua base di codice JavaScript, prima aggiungendo tipi a singoli moduli e poi espandendo a consume consumare l’universo conosciuto, immagino.

Inconvenienti del dattiloscritto

Non puoi semplicemente prendere un team JavaScript o un repository JavaScript e passarli istantaneamente a dattiloscritto idiomatico. Ci sono compromessi e sacrifici in anticipo che devi fare.

Mentre possiamo discutere sui risparmi che essere espliciti sui tipi ti danno a lungo termine, nel breve periodo, ci vuole più tempo per aggiungerli. Questo non è probabilmente un grosso problema, ma è un argomento a favore di JavaScript.

Pertanto, è possibile non scegliere TypeScript per piccoli progetti e prototipi per uso personale.

Test vs tipi

Per toccare brevemente la discussione sui test rispetto ai tipi: entrambe queste cose catturano diverse classi di bug, quindi ha senso fare entrambe le cose in modo non partisan.

È comunque possibile utilizzare sia unit testing che tecniche più avanzate come test basati su proprietà con TS mantenendo i vantaggi di un sistema di tipo statico.

Per riassumere, ecco un rapido confronto di entrambe le lingue:

Dattiloscritto JavaScript
TS è un object-oriented del linguaggio di scripting JS è un object-oriented del linguaggio di scripting
Dipendente lingua (compilato in JavaScript) linguaggio Indipendente (può essere interpretato ed eseguito)
Linguaggio compilato, non può essere eseguito direttamente in un browser linguaggio Interpretato, eseguito direttamente in un browser web
Può essere staticamente tipizzato Dinamicamente tipizzati
Meglio strutturato e conciso Più flessibile poiché non si è limitati dal sistema di tipi
Ha un .ts estensione Ha un .estensione js
Creato in Microsoft da Anders Hejlsberg (progettista di C#) e mantenuto da Microsoft Creato da Brendan Eich (Netscape) e mantenuto da ECMA (European Computer Manufacturers Association).
Una discreta scelta per i progetti più complessi Buona per lavorare con piccole, semplici progetti

Dattiloscritto guida rapida

Dattiloscritto compilatore

Per compilare il TS codice, è necessario installare tsc (breve per Dattiloscritto del compilatore). Il modo più semplice per farlo è attraverso il terminale. Questo può essere fatto facilmente tramite npm utilizzando il seguente comando:

npm install -g typescript

Se si desidera utilizzare TypeScript con codice Visual Studio, c’è una guida pratica sul loro sito web.

Una volta installato tsc, è possibile compilare i file con tsc filename.ts.

Migrazione dei file da JavaScript a TypeScript

Diciamo che vogliamo cambiare il seguente file JavaScript in TypeScript a causa di un comportamento strano:

function my_sum(a, b) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

Buone notizie. Qualsiasi file JS è tecnicamente un file dattiloscritto valido, quindi sei all’altezza di un ottimo inizio: basta cambiare l’estensione del file su .ts da .js.

TypeScript ha inferenza di tipo, il che significa che può dedurre automaticamente alcuni dei tipi che usi senza aggiungerli. In questo caso, presume che la funzione sommi due variabili di tipo any, che è vero ma di non grande utilità in questo momento.

Se vogliamo sommare solo numeri, possiamo aggiungere una firma di tipo a my_sum per farlo accettare solo numeri.

function my_sum(a: number, b: number) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

Ora, TypeScript ci fornisce un errore.

Argument of type 'string' is not assignable to parameter of type 'number'.

Per fortuna abbiamo trovato dove si trova l’errore. 🙂 Per evitare ulteriori errori come questi, puoi anche aggiungere definizioni di tipo alle variabili.

let b: number = "5" // Type '"5"' is not assignable to type 'number'.let b: number = 5 // Everything ok.

TypeScript è abbastanza flessibile in ciò che può fare e come può aiutarti. Per un esempio meno banale su come spostare la base di codice JavaScript esistente in TypeScript o utilizzare TypeScript per migliorare il codice JS, leggi questa guida.

Come utilizzare TypeScript in un browser?

Per eseguire TypeScript in un browser, deve essere traspilato in JavaScript con il compilatore TypeScript (tsc). In questo caso, tsc crea un nuovo .file js basato sul .codice ts, che puoi usare in qualsiasi modo tu possa usare un file JavaScript.

Risorse per l’ulteriore apprendimento

Dattiloscritto Immersione Profonda

Questo libera risorse web ha tutto il necessario per iniziare con Dattiloscritto, compresa la spiegazione più dettagliata delle sezioni ne abbiamo già parlato qui.

Imparare dattiloscritto da zero!

Un corso pratico di 3 ore che passa attraverso tutte le funzioni di base di TypeScript, come usarlo per interagire con alcuni framework JS e come utilizzare la potenza di TypeScript durante la scrittura di JavaScript.

Esercizio

Exercism è la migliore risorsa per praticare la scrittura di codice in un nuovo linguaggio di programmazione. Mentori che ti indirizzeranno verso il codice idiomatico, un sacco di compiti di pratica divertenti – non c’è nulla da non amare su questo sito.

Conclusioni

Nel complesso, TypeScript è un ottimo strumento per avere nel vostro set di strumenti, anche se non lo si utilizza per la sua piena capacità. È facile iniziare in piccolo e crescere lentamente, imparando e aggiungendo nuove funzionalità mentre vai. TypeScript è pragmatico e accogliente per i principianti, quindi non c’è bisogno di avere paura.

Spero che questo articolo sarà utile nel vostro viaggio dattiloscritto. Se vuoi aiuto o hai qualche domanda, assicurati di chiedere loro sui nostri social media come Twitter o Facebook.