Converter JavaScript para TypeScript: de PropTypes a interfaces
Aqui você pode converter JavaScript para TypeScript e economizar a primeira etapa, a mais chata, de uma migração. O conversor lê seu código com um parser, transforma os PropTypes do React em interfaces, tira tipos dos valores padrão e adiciona os que dá para deduzir. Ele trabalha com um arquivo ou trecho por vez, nunca executa seu código e não envia nada.O que ele não tem como saber, deixa para você. As seções abaixo dizem exatamente o que é.
JavaScript para TypeScript online, passo a passo
- Cole seu código no campo JavaScript ou JSX. Até você colar, ele mostra "Cole o JavaScript ou JSX aqui…". O limite é de 5.000.000 de caracteres.
- Aguarde um instante. A ferramenta converte enquanto você digita ou cola, cerca de 0,35 segundo depois da última alteração, então não há botão para apertar.
- Leia o resultado sob o título "TypeScript", ou "TypeScript (TSX)" quando o código tem JSX. Ele aparece como código destacado, somente para leitura.
- Confira os avisos acima do código. Eles dizem o que foi feito, por exemplo "2 interfaces escritas" ou "11 anotações de tipo adicionadas". Se nada precisava de tipo, a linha diz "Nada aqui precisava de tipo, então o código só foi reformatado."
- Selecione Copiar para a área de transferência. O botão passa a mostrar "Copiado".
- Abaixo do código, Opções de conversão reúne duas caixas de seleção, Modo React e Modo estrito. Se você mudar uma delas, o código é convertido de novo.
Se o texto não for JavaScript válido, você vê "Isto não é JavaScript válido: erro de sintaxe na linha N, coluna M.", com a linha problemática e uma marca embaixo. Código que já contém sintaxe de TypeScript conta como inválido. A ferramenta trabalha com o código que você cola, então serve para um componente, um módulo ou um trecho, não para um repositório inteiro.
Um exemplo: um componente React com PropTypes
A entrada é um pequeno contador com PropTypes e um manipulador de eventos sem tipo. O conversor escreve a interface CounterProps: label é obrigatória por causa de isRequired, e start e onChange são opcionais. O valor padrão n = 1 vira n: number = 1, e o manipulador onClick de um button dá a e o tipo React.MouseEvent para o elemento botão. O import sem uso de prop-types some e o Prettier distribui o JSX em várias linhas. No total, a ferramenta informa 1 interface escrita e 3 anotações de tipo adicionadas.
O que não muda: useState(start) continua como estava, porque o conversor não adivinha um tipo a partir de como um valor é usado.
PropTypes React para TypeScript: como viram interface
Com o modo React ligado, o conversor escreve uma interface chamada NomeProps a partir dos PropTypes do componente, coloca-a acima do componente e tipa as props com ela. Isso funciona com componentes de função (declarações, arrow functions e os envolvidos em memo) e com classes que têm propTypes estático ou uma atribuição Foo.propTypes = {...}. Uma prop com .isRequired é obrigatória, e as demais ganham ?. Os comentários acima de uma prop passam para a interface.
stringenumbercontinuamstringenumberboolvirabooleanfuncvira um tipo de função com argumentos quaisquerarrayeobjectviramany[]e um Record com chavestringnodeeelementviramReactNodeeReactElementarrayOf(T)eobjectOf(T)viramT[]e um Record com valorToneOf([...])vira uma união de literais, como'sm' | 'lg'oneOfType([...])vira uma união dos tipos listadosshape({...})eexact({...})viram um tipo de objetoinstanceOf(Foo)viraFoo
A instrução propTypes é removida, e o import de prop-types também, se mais nada o usa. Um componente de classe ganha ainda uma interface de estado a partir de this.state = {...}. Uma classe sem PropTypes ganha uma interface de props montada com os this.props.x que ela lê. Um componente de função sem PropTypes só ganha uma interface de props no modo estrito.
Tipos adicionados sem PropTypes, e de JSX para TSX
- Valores padrão: um parâmetro com valor padrão é tipado a partir dele, então
n = 5viran: number = 5elet x = 0viralet x: number = 0. - Tipos de retorno: adicionados quando todo
returndá o mesmo tipo primitivo (string,numberouboolean) ou quando não há nenhum:void, ou uma Promise devoidnuma funçãoasync. - Campos de classe: cada
this.x = ...numa classe (que não estende nada, ou um componente React) ganha uma declaração de propriedade. - Eventos do React: parâmetros de manipuladores em elementos do DOM ganham o tipo de evento correspondente, como
React.ChangeEvent, emonChange,onClickouonSubmit. - Refs:
useRef(null)pega o tipo do elemento ao qual está ligado porref={...}.
Para ir de JSX para TSX, basta colar o componente: quando o código tem JSX, o resultado ganha o título "TypeScript (TSX)". O modo estrito vem desligado. Ligue-o para ver todas as lacunas. Ele escreve um any explícito onde não dá para deduzir um tipo: let x; vira let x: any;, const list = [] vira any[], e parâmetros sem tipo ganham : any. Com ele desligado, esses pontos ficam sem tipo. Com ele ligado, a lista do que falta corrigir fica fácil de pesquisar.
O que o conversor deixa em paz, comentários e privacidade
Ele lê um pedaço de código e não adivinha nada. Estes casos ficam como estão ou viram any:
- Parâmetros de callback passados direto a uma chamada, como em
items.map((x) => ...): ficam como estão, para o TypeScript tipá-los a partir da função que os recebe. - Tipos de outro arquivo ou um validador de PropTypes personalizado: viram
any, e o validador em si não é mantido. - Um componente com
forwardRef: seus PropTypes não são tocados. - Comentários de tipo do JSDoc não são lidos.
- Um tipo adivinhado pelo nome de um parâmetro ou pelo modo como é usado nunca é gerado.
- Sem inferência entre arquivos: converta e confira um arquivo por vez.
- Com o modo React desligado, os PropTypes ficam como estão.
O resultado é uma primeira etapa, não uma migração concluída. Cole-o no seu projeto, rode tsc e refine cada any à mão. O conversor não renomeia arquivos, então salve você mesmo o componente como .tsx.
Comentários e layout se mantêm: o código é lido com @babel/parser, cada anotação é inserida no seu texto original como uma edição, e o Prettier reformata o resultado mantendo suas aspas, seus pontos e vírgulas e a largura da indentação. Tudo roda em um Web Worker no seu navegador, e seu código nunca é enviado nem executado. Para arrumar o código antes de converter, use Formatador de Código. Para entender primeiro um script minificado ou ofuscado, use Desofuscador de JS.
Perguntas frequentes
Como faço para converter JavaScript para TypeScript online?
Cole seu JavaScript ou JSX no campo "JavaScript ou JSX". Cerca de um terço de segundo depois, o TypeScript aparece sob o título "TypeScript", ou "TypeScript (TSX)" se o código tiver JSX. Não existe botão de converter. Selecione "Copiar para a área de transferência" para levar o resultado.
O JavaScript to TypeScript converter faz de PropTypes React uma interface?
Sim. Com o modo React ligado, cada objeto propTypes vira uma interface com o nome do componente, como CounterProps. Uma prop com isRequired é obrigatória e as demais ganham um ponto de interrogação. A instrução propTypes é removida, e o import de prop-types também, se mais nada no arquivo o usa. Funciona com componentes de função e com classes que têm propTypes estático.
Como levar um componente de JSX para TSX?
Cole o componente JSX. Quando o código tem JSX, o resultado ganha o título "TypeScript (TSX)" e o modo React liga sozinho, então as props ganham uma interface e os manipuladores ganham tipos de evento. A ferramenta não renomeia arquivos. Salve o resultado no seu projeto com a extensão .tsx.
O que fazem o modo React e o modo estrito?
O modo React, em "Opções de conversão", transforma PropTypes em interfaces e tipa manipuladores de eventos, props e hooks. Ele vem ligado quando o código tem JSX, react ou prop-types, e, desligado, deixa os PropTypes como estão. O modo estrito vem desligado e escreve um any explícito onde não dá para deduzir um tipo, em vez de omiti-lo.
Por que o resultado ainda tem any?
Um tipo só é escrito quando dá para lê-lo no próprio código. Um validador de PropTypes personalizado ou um tipo importado de outro arquivo vira any, e o modo estrito acrescenta um any explícito a variáveis e parâmetros sem tipo. O resultado é uma primeira etapa. Passe-o pelo tsc e troque os any pelos tipos reais.
Por que o parâmetro de um callback não foi tipado?
Um parâmetro passado direto a uma chamada, como x em items.map((x) => x.id), é deixado como está de propósito, para que o TypeScript ainda possa tipá-lo a partir da função que recebe o callback.
Meus comentários e minha formatação são mantidos?
Os comentários ficam, porque as anotações são inseridas no seu código original como edições de texto, em vez de reconstruí-lo. Depois passa o Prettier, que mantém suas aspas, seus pontos e vírgulas e a largura da indentação, mas pode quebrar de novo linhas longas. Comentários acima de uma entrada de PropTypes passam para a propriedade correspondente da interface.
Meu código é enviado ou executado?
Não. O código é analisado e reescrito no seu navegador, em um Web Worker, e nunca é enviado a um servidor. Ele também nunca é executado. Se houver um erro de sintaxe, você vê a mensagem com linha e coluna. O limite é de 5.000.000 de caracteres.
