Ayuda

Convertir JavaScript a TypeScript: de PropTypes a interfaces

Aquí puedes convertir JavaScript a TypeScript y ahorrarte la primera pasada, la más pesada, de una migración. El conversor lee tu código con un analizador, convierte los PropTypes de React en interfaces, toma tipos de los valores por defecto y añade los que se pueden deducir. Trabaja con un archivo o un fragmento cada vez, nunca ejecuta tu código y no sube nada.Lo que no puede saber, te lo deja a ti. Las secciones de abajo dicen exactamente qué es.

Cómo convertir JavaScript a TypeScript online, paso a paso

Pega tu código en el campo JavaScript o JSX. Hasta entonces muestra «Pega aquí JavaScript o JSX…». El límite es de 5.000.000 de caracteres.
Espera un momento. La herramienta convierte mientras escribes o pegas, unos 0,35 segundos después del último cambio, así que no hay ningún botón que pulsar.
Lee el resultado bajo el título «TypeScript», o «TypeScript (TSX)» cuando el código lleva JSX. Se muestra como código resaltado de solo lectura.
Revisa los avisos que hay sobre el código. Dicen lo que se ha hecho, por ejemplo «2 interfaces escritas» u «11 anotaciones de tipo añadidas». Si nada necesitaba un tipo, verás «Nada aquí necesitaba un tipo, así que el código solo se ha reformateado.»
Selecciona Copiar al portapapeles. El botón pasa a decir «Copiado».
Bajo el código, Opciones de conversión reúne dos casillas, Modo React y Modo estricto. Si cambias una, el código se convierte de nuevo.

Si el texto no es JavaScript válido, verás «Esto no es JavaScript válido: error de sintaxis en la línea N, columna M.», con la línea afectada y una marca debajo. El código que ya contiene sintaxis de TypeScript cuenta como no válido. Este conversor trabaja con el código que pegas, así que sirve para un componente, un módulo o un fragmento, no para un repositorio entero.

Un ejemplo: un componente de React con PropTypes

La entrada es un pequeño contador con PropTypes y un manejador de eventos sin tipo. El conversor escribe la interfaz CounterProps: label es obligatoria por isRequired, y start y onChange son opcionales. El valor por defecto n = 1 da n: number = 1, y el manejador onClick de un button da a e el tipo React.MouseEvent para el elemento botón. La importación sin uso de prop-types desaparece y Prettier reparte el JSX en varias líneas. En total, la herramienta indica 1 interfaz escrita y 3 anotaciones de tipo añadidas.

Lo que no cambia: useState(start) se queda como estaba, porque el conversor no adivina un tipo a partir de cómo se usa un valor.

PropTypes React a TypeScript: cómo se convierten en interfaz

Con el modo React activado, el conversor escribe una interfaz llamada NombreProps a partir de los PropTypes del componente, la coloca sobre el componente y tipa las props con ella. Funciona con componentes de función (declaraciones, flechas y los envueltos en memo) y con clases que tienen propTypes estático o una asignación Foo.propTypes = {...}. Una prop con .isRequired es obligatoria, y cualquier otra recibe ?. Los comentarios sobre una prop pasan a la interfaz.

string y number siguen siendo string y number
bool pasa a boolean
func pasa a un tipo de función con argumentos cualesquiera
array y object pasan a any[] y a un Record con clave string
node y element pasan a ReactNode y ReactElement
arrayOf(T) y objectOf(T) pasan a T[] y a un Record con valor T
oneOf([...]) pasa a una unión de literales, como 'sm' | 'lg'
oneOfType([...]) pasa a una unión de los tipos indicados
shape({...}) y exact({...}) pasan a un tipo de objeto
instanceOf(Foo) pasa a Foo

La sentencia propTypes se elimina, y también la importación de prop-types si nada más la usa. Un componente de clase recibe además una interfaz de estado a partir de this.state = {...}. Una clase sin PropTypes recibe una interfaz de props construida con los this.props.x que lee. Un componente de función sin PropTypes la recibe solo en modo estricto.

Qué tipos añade sin PropTypes, y qué hace el modo estricto

Valores por defecto: un parámetro con valor por defecto se tipa a partir de él, así que n = 5 pasa a n: number = 5 y let x = 0 pasa a let x: number = 0.
Tipos de retorno: se añaden cuando todos los return dan el mismo tipo primitivo (string, number o boolean) o cuando no hay ninguno: void, o una promesa de void en una función async.
Campos de clase: cada this.x = ... de una clase (que no extienda nada, o un componente de React) recibe una declaración de propiedad.
Eventos de React: los parámetros de manejadores en elementos del DOM reciben el tipo de evento correspondiente, como React.ChangeEvent, en onChange, onClick u onSubmit.
Refs: useRef(null) toma el tipo del elemento al que va unido con ref={...}.

El modo estricto viene desactivado. Actívalo para ver todos los huecos. Escribe un any explícito donde no se puede deducir un tipo: let x; pasa a let x: any;, const list = [] pasa a any[], y los parámetros sin tipo reciben : any. Sin el modo estricto, esos puntos se dejan sin tipo. Con él, la lista de lo que queda por corregir es fácil de buscar.

Lo que no toca, comentarios y privacidad

Lee un fragmento de código y no adivina nada. Estos casos se dejan como están o pasan a any:

Parámetros de callbacks pasados directamente a una llamada, como en items.map((x) => ...): se dejan igual para que TypeScript los tipe desde la función que los recibe.
Tipos de otro archivo o un validador de PropTypes propio: pasan a any, y el validador no se conserva.
Un componente con forwardRef: sus PropTypes no se tocan.
Los comentarios de tipos de JSDoc no se leen.
No deduce ningún tipo por el nombre de un parámetro ni por cómo se usa.
Entre archivos no infiere nada: convierte y revisa un archivo cada vez.
Con el modo React desactivado, los PropTypes se dejan igual.

El resultado es una primera pasada, no una migración terminada. Pégalo en tu proyecto, ejecuta tsc y afina cada any a mano. El conversor no cambia el nombre de los archivos, así que guarda el componente tú mismo como .tsx.

Los comentarios y el formato se conservan: el código se lee con @babel/parser, cada anotación se inserta como una edición en tu texto original y Prettier reformatea el resultado respetando tus comillas, tus puntos y comas y tu sangría. Todo ocurre en un Web Worker de tu navegador, y tu código no se sube ni se ejecuta nunca. Para ordenar el código antes de convertirlo, usa Formateador de código. Para entender antes un script minificado u ofuscado, usa Desofuscador de JS.

Preguntas frecuentes

¿Cómo convierto de JavaScript a TypeScript online?

Pega tu JavaScript o JSX en el campo «JavaScript o JSX». Cerca de un tercio de segundo después aparece el TypeScript bajo el título «TypeScript», o «TypeScript (TSX)» si el código lleva JSX. No hay botón de convertir. Con «Copiar al portapapeles» te llevas el resultado.

¿Puede este JavaScript to TypeScript converter pasar PropTypes de React a una interfaz?

Sí. Con el modo React activado, cada objeto propTypes se convierte en una interfaz con el nombre del componente, como CounterProps. Una prop con isRequired es obligatoria y las demás llevan un signo de interrogación. Se elimina la sentencia propTypes y también la importación de prop-types si nada más del archivo la usa. Funciona con componentes de función y con clases que tienen propTypes estático.

¿Cómo paso un componente de JSX a TSX?

Pega el componente JSX. Cuando el código lleva JSX, el resultado se titula «TypeScript (TSX)» y el modo React se activa solo, así que las props reciben una interfaz y los manejadores reciben tipos de evento. La herramienta no cambia el nombre de los archivos: guarda el resultado en tu proyecto con la extensión .tsx.

¿Qué hacen el modo React y el modo estricto?

El modo React, en «Opciones de conversión», convierte los PropTypes en interfaces y tipa manejadores de eventos, props y hooks. Viene activado cuando el código tiene JSX, react o prop-types, y con él desactivado los PropTypes se dejan igual. El modo estricto viene desactivado y escribe un any explícito donde no se puede deducir un tipo, en lugar de omitirlo.

¿Por qué el resultado todavía tiene any?

Un tipo solo se escribe cuando se puede leer en el propio código. Un validador de PropTypes propio o un tipo importado de otro archivo pasa a any, y el modo estricto añade un any explícito a variables y parámetros sin tipo. El resultado es una primera pasada. Pásalo por tsc y sustituye los any por los tipos reales.

¿Por qué no se ha tipado el parámetro de un callback?

Un parámetro pasado directamente a una llamada, como x en items.map((x) => x.id), se deja como está a propósito, para que TypeScript pueda tiparlo desde la función que recibe el callback.

¿Conserva mis comentarios y mi formato?

Los comentarios se conservan, porque las anotaciones se insertan en tu código original como ediciones de texto en lugar de reconstruirlo. Después pasa Prettier, que respeta tus comillas, tus puntos y comas y tu sangría, aunque puede volver a ajustar las líneas largas. Los comentarios sobre una entrada de PropTypes pasan a la propiedad correspondiente de la interfaz.

¿Se sube o se ejecuta mi código en este JavaScript to TypeScript converter online?

No. El código se analiza y se reescribe en tu navegador, en un Web Worker, y nunca se envía a un servidor. Tampoco se ejecuta nunca. Si hay un error de sintaxis, verás el mensaje con la línea y la columna. El límite es de 5.000.000 de caracteres.