JavaScript to TypeScript Converter: dai PropTypes alle interfacce

Questo javascript to typescript converter ti risparmia il primo passaggio, il più noioso, di una migrazione. Legge il tuo codice con un parser, trasforma i PropTypes di React in interfacce, ricava i tipi dai valori predefiniti e aggiunge quelli che si possono dedurre, poi restituisce TypeScript formattato. Lavora su un file o un frammento alla volta, non esegue mai il tuo codice e non carica nulla.Quello che non può sapere lo lascia a te. Le sezioni qui sotto dicono esattamente che cosa.

Come usare il convertitore online, passo dopo passo

1. Incolla il codice nel campo JavaScript o JSX. Finché non incolli nulla mostra «Incolla qui JavaScript o JSX…». Il limite è di 5.000.000 di caratteri.
2. Aspetta un attimo. Lo strumento converte mentre scrivi o incolli, circa 0,35 secondi dopo l'ultima modifica, quindi non c'è nessun pulsante da premere.
3. Leggi il risultato sotto il titolo «TypeScript», oppure «TypeScript (TSX)» quando il codice contiene JSX. È mostrato come codice evidenziato in sola lettura.
4. Guarda le indicazioni sopra il codice. Dicono che cosa è stato fatto, per esempio «2 interfacce scritte» o «11 annotazioni di tipo aggiunte». Se nulla aveva bisogno di un tipo, la riga dice «Qui niente aveva bisogno di un tipo, quindi il codice è stato solo riformattato.»
5. Premi Copia negli appunti. Il pulsante cambia in «Copiato».
6. Sotto il codice, Opzioni di conversione contiene due caselle, Modalità React e Modalità strict. Se ne cambi una, il codice viene convertito di nuovo.

Se il testo non è JavaScript valido, vedi «Questo non è JavaScript valido: errore di sintassi alla riga N, colonna M.», con la riga incriminata e un segno sotto. Il codice che contiene già sintassi TypeScript conta come non valido. Lo strumento lavora sul codice che incolli, quindi va bene per un componente, un modulo o un frammento, non per un intero repository.

Un esempio: un componente React con PropTypes

L'input è un piccolo contatore con PropTypes e un gestore di eventi senza tipo. Il convertitore scrive l'interfaccia CounterProps: label è obbligatoria per via di isRequired, mentre start e onChange sono facoltative. Il valore predefinito n = 1 diventa n: number = 1, e il gestore onClick su un button dà a e il tipo React.MouseEvent per l'elemento pulsante. L'import inutilizzato di prop-types scompare e Prettier distribuisce il JSX su più righe. In tutto lo strumento segnala 1 interfaccia scritta e 3 annotazioni di tipo aggiunte.

Quello che non cambia: useState(start) resta com'è, perché il convertitore non indovina un tipo da come viene usato un valore.

React prop types TypeScript: come diventano un'interfaccia

Con la modalità React attiva, il convertitore scrive un'interfaccia chiamata NomeProps a partire dai PropTypes del componente, la mette sopra il componente e tipizza le props con essa. Funziona con i componenti funzione (dichiarazioni, funzioni freccia e quelli avvolti in memo) e con le classi che hanno un propTypes statico o un'assegnazione Foo.propTypes = {...}. Una prop con .isRequired è obbligatoria, ogni altra riceve un ?. I commenti sopra una prop passano nell'interfaccia.

• string e number restano string e number
• bool diventa boolean
• func diventa un tipo funzione con argomenti qualsiasi
• array e object diventano any[] e un Record con chiave string
• node e element diventano ReactNode e ReactElement
• arrayOf(T) e objectOf(T) diventano T[] e un Record con valore T
• oneOf([...]) diventa un'unione di letterali, come 'sm' | 'lg'
• oneOfType([...]) diventa un'unione dei tipi elencati
• shape({...}) e exact({...}) diventano un tipo oggetto
• instanceOf(Foo) diventa Foo

L'istruzione propTypes viene rimossa, come l'import di prop-types se nient'altro lo usa. Un componente classe riceve anche un'interfaccia di stato da this.state = {...}. Una classe senza PropTypes riceve un'interfaccia delle props costruita dai this.props.x che legge. Un componente funzione senza PropTypes la riceve solo in modalità strict.

Da JSX a TSX: i tipi aggiunti senza PropTypes

• Valori predefiniti: un parametro con valore predefinito viene tipizzato da esso, quindi n = 5 diventa n: number = 5 e let x = 0 diventa let x: number = 0.
• Tipi di ritorno: aggiunti quando ogni return dà lo stesso tipo primitivo (string, number o boolean) o quando non ce n'è nessuno: void, oppure una promise di void per una funzione async.
• Campi di classe: ogni this.x = ... in una classe (che non estende nulla, o un componente React) riceve una dichiarazione di proprietà.
• Eventi React: i parametri dei gestori sugli elementi del DOM ricevono il tipo di evento corrispondente, come React.ChangeEvent, per onChange, onClick o onSubmit.
• Ref: useRef(null) prende il tipo dell'elemento a cui è collegato con ref={...}.

Per passare da JSX a TSX basta incollare il componente: quando il codice contiene JSX il risultato è intitolato «TypeScript (TSX)». La modalità strict è disattivata di default. Attivala per vedere tutte le lacune: scrive un any esplicito dove non si può ricavare un tipo. let x; diventa let x: any;, const list = [] diventa any[] e i parametri senza tipo ricevono : any. Senza la modalità strict quei punti restano senza tipo. Con essa, l'elenco di ciò che resta da sistemare è facile da cercare.

Cosa lascia stare, commenti e privacy

Legge un pezzo di codice e non indovina nulla. Questi casi restano come sono o diventano any:

• I parametri di callback passati direttamente a una chiamata, come in items.map((x) => ...): restano invariati, così TypeScript li tipizza dalla funzione che li riceve.
• I tipi presi da un altro file o un validatore PropTypes personalizzato: diventano any, e il validatore non viene conservato.
• Un componente forwardRef: i suoi PropTypes non vengono toccati.
• I commenti di tipo JSDoc non vengono letti.
• Nessun tipo viene dedotto dal nome di un parametro o da come è usato.
• Nessuna inferenza tra file: converti e controlla un file alla volta.
• Con la modalità React disattivata, i PropTypes restano come sono.

Il risultato è un primo passaggio, non una migrazione finita. Incollalo nel tuo progetto, esegui tsc e stringi ogni any a mano. Il convertitore non rinomina i file, quindi salva tu il componente come .tsx.

Commenti e formattazione si conservano: il codice è letto con @babel/parser, ogni annotazione è inserita nel tuo testo originale come modifica, poi Prettier riformatta il risultato mantenendo le tue virgolette, i punti e virgola e il rientro. Tutto avviene in un Web Worker nel tuo browser e il tuo codice non viene mai caricato né eseguito. Per sistemare il codice prima di passarlo, usa Formattatore di Codice. Per capire prima uno script minificato o offuscato, usa Deoffuscatore JS.

Strumenti correlati

Autoprefixer CSS

Incolla il CSS e ottieni subito i prefissi. Gratis.

Deoffuscatore JS

Rendi leggibile il JavaScript offuscato

Formattatore di Codice

Formatta codice — JS, JSON, HTML, CSS, Python

Minificatore CSS

Minifica CSS online: via commenti e spazi. Gratis.

Convertitore Base64

Codifica e decodifica testo in Base64 all'istante