Gli strumenti JavaScript Flow e TypeScript sono simili sotto molti aspetti. Tuttavia, differiscono per quanto riguarda la loro funzionalità e abilità come pedine statiche.
Scopri come confrontare Flow e TypeScript e qual è il miglior correttore statico per il tuo prossimo progetto.
Cos'è il flusso?
Flow è uno strumento di verifica del tipo statico per JavaScript, creato da Facebook per identificare in anticipo gli errori di codice di compilazione e runtime. Lo fa monitorando i valori trasmessi dal codice e il modo in cui i loro tipi di dati cambiano nel tempo. Questo sistema di controllo statico migliora l'affidabilità e la leggibilità. Aiuta anche a ridurre il verificarsi di bug nel codice JavaScript.
Cos'è TypeScript?
TypeScript non è solo un controllo del tipo, come Flow, ma un linguaggio di programmazione fortemente tipizzato. Microsoft ha creato il linguaggio, costruendolo su JavaScript.
Per convenzione, dovresti creare file TypeScript con estensione .ts. Puoi compilare un file TypeScript in codice JavaScript, quindi ovunque venga eseguito JavaScript, anche TypeScript può essere eseguito.
Configurazione del flusso per la tua applicazione JavaScript
Puoi integrare Flow in qualsiasi framework JavaScript che decidi di utilizzare per il tuo progetto. Dovrai aver configurato un compilatore JavaScript come Babel per gestire tutti i tipi di flusso nel tuo codice e compilarlo in JavaScript vanilla.
Per installare Flow nel tuo progetto, esegui il seguente comando:
filato aggiungere --dev flow-bin
Successivamente, dovresti installare l'interfaccia della riga di comando di Flow a livello globale. Questa CLI fornisce diversi comandi per la creazione di applicazioni di flusso.
Su macOS, usa Birra casalinga per installare Flow CLI:
brew installare flusso-cli
Avrai bisogno di sapere come utilizzare Windows PowerShell per installare Flow su un computer Windows.
Per installare Flow CLI su Windows, esegui questo script nel tuo terminale PowerShell:
iex "& {$(im '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
I progetti di flusso richiedono a .flowconfig file per tutte le configurazioni necessarie dello strumento.
Esegui questo comando per creare un file di configurazione del flusso in un progetto nuovo o esistente:
npm esegue il flusso init
Tieni presente che framework specifici possono fornire progetti con un file di configurazione di Flow per impostazione predefinita.
L'ultima cosa da fare è aggiungere lo script Flow al tuo pacchetto.json file:
"script": {
"fluire": "fluire"
},
Ora hai configurato correttamente Flow per l'esecuzione nella tua applicazione JavaScript.
Impostazione di TypeScript nel tuo progetto
Esegui il seguente comando per installare TypeScript nel tuo progetto:
npm installare dattiloscritto --save-dev
Dovresti anche installare il compilatore per compilare il codice TypeScript in JavaScript vanilla. Potrebbe anche essere necessario impostare la configurazione di TypeScript per un flusso di lavoro migliore esperienza.
Installa il compilatore TypeScript a livello globale con questo comando:
npm installare -g dattiloscritto
Per inizializzare a tsconfig.json config, inserisci il seguente comando nel tuo terminale:
tsc --dentro
Le istruzioni precedenti ti consentiranno di iniziare a utilizzare TypeScript nel tuo progetto.
Costruire con flusso
Per scrivere il codice Flow in un file JavaScript, dichiara la sintassi Flow all'inizio del codice prima di qualsiasi espressione o istruzione:
// @fluire
È possibile impostare tipi di dati di variabili e funzioni utilizzando l'annotazione. Il flusso genererà quindi un errore se il tipo previsto non viene soddisfatto.
Per esempio:
// @fluire
let foo: numero = "Ciao";
Flow genererà un errore qui perché il tipo di valore previsto di pippo è un numero, non una stringa.
Correre flusso di esecuzione npm per vedere l'output dell'errore nel terminale:
L'abilitazione dell'estensione Flow all'interno di qualsiasi editor di testo preferito mostrerà gli errori nel tuo editor durante la codifica.
Flow usa anche l'inferenza del tipo per determinare quale dovrebbe essere il valore previsto di un'espressione.
Per esempio:
// @fluire
funzionefare qualcosa(valore) {
valore di ritorno * "Ciao";
};
permettere risultato = fai qualcosa(6);
Non è possibile eseguire operazioni aritmetiche tra il numero sei e la stringa Ciao.
L'uscita di flusso di esecuzione npm sarà un errore:
Sviluppare con TypeScript
La sintassi del tipo di TypeScript è molto simile a quella di Flow. Puoi definire tipi di variabili e funzioni con annotazioni di tipo proprio come faresti in Flow.
TypeScript viene fornito con molte altre funzionalità simili a Flow, come l'inferenza del tipo.
Prendi l'esempio di codice TypeScript:
// Typescript.ts
digitare Risultato = "passaggio" | "fallire"
funzioneverificare(risultato: Risultato) {
se (risultato "passaggio") {
console.log("Passato")
} altro {
console.log("Fallito")
}
}
Puoi correre tsc Typescript.ts per compilare questo codice in semplice JavaScript vaniglia.
Questo sarebbe lo stesso codice TypeScript compilato in JavaScript vanilla:
funzioneverificare(risultato) {
se (risultato "passaggio") {
console.log("Passato")
} altro {
console.log("Fallito")
}
}
Pro e contro di TypeScript e Flow
Ora sai come iniziare a utilizzare entrambi gli strumenti nel tuo progetto JavaScript. Dovresti conoscere i pro e i contro dell'utilizzo di ciascuno.
Integrazione
Il processo di configurazione per utilizzare Flow è un po' più complesso rispetto a TypeScript. Dovrai impostare un compilatore JavaScript come Babel o flow-remove-types per eliminare i tipi di flusso dal tuo codice. TypeScript include un compilatore per convertire il codice TypeScript in JavaScript, semplificando l'integrazione.
TypeScript ha strumenti molto migliori e la maggior parte dei framework JavaScript lo supporta per impostazione predefinita. Gli IDE più popolari forniscono un supporto di prima classe per TypeScript. Anche Flow è supportato, ma richiede uno speciale plug-in.
Comunità
A differenza di Flow, i framework JavaScript come React, React Native, Vue e Angular supportano TypeScript immediatamente.
Questa adozione diffusa e l'ampia community si traducono in migliori risorse di apprendimento, aggiornamenti e supporto per gli strumenti.
Flessibilità
Flow funge da controllo del tipo che funziona per avvisarti di codice potenzialmente errato. TypeScript ti impedisce di scrivere codice errato e ha un sistema di tipi rigoroso. TypeScript supporta anche incapsulamento di oggetti, che aiuta a mantenere gestibile il codice complesso. Flow non ha questa funzione.
Servizi
TypeScript fornisce tutti i servizi del linguaggio JavaScript, come il refactoring del codice e il completamento automatico. Flow è un controllo di tipo statico che fornisce una comprensione e un'analisi approfondite del codice scritto.
Flow può lavorare fino ai moduli e alle librerie importati del tuo progetto e discernere come influenzano il tuo codice. Ad esempio, può rilevare e generare un avviso quando manca una libreria richiesta nel progetto o quando si tenta di accedere a una definizione che non esiste.
Quale controllo statico dovresti usare?
Esistono molti argomenti validi per l'utilizzo di ogni strumento perché ognuno ha caratteristiche diverse. Alcuni possono avere la massima priorità per uno sviluppatore e bassa priorità per l'altro. Entrambi gli strumenti funzionano bene per loro stessi e offrono vantaggi per il loro utilizzo.
Dovresti esaminare i requisiti del tuo progetto e prendere una decisione ponderata basata su di essi.
