Convertir JavaScript en TypeScript : des PropTypes aux interfaces

Ici, vous pouvez convertir JavaScript en TypeScript et gagner la première passe, la plus fastidieuse, d'une migration. Le convertisseur lit votre code avec un analyseur, transforme les PropTypes de React en interfaces, tire des types des valeurs par défaut et ajoute ceux qui peuvent être déduits. Il traite un fichier ou un extrait à la fois, n'exécute jamais votre code et n'envoie rien.Ce qu'il ne peut pas savoir, il vous le laisse. Les sections ci-dessous disent exactement ce que c'est.

Convertir JavaScript en TypeScript en ligne, pas à pas

1. Collez votre code dans le champ JavaScript ou JSX. Tant que vous n'avez rien collé, il affiche « Collez ici du JavaScript ou du JSX… ». La limite est de 5 000 000 de caractères.
2. Patientez un instant. L'outil convertit pendant que vous saisissez ou collez, environ 0,35 seconde après le dernier changement : il n'y a donc aucun bouton à actionner.
3. Lisez le résultat sous le titre « TypeScript », ou « TypeScript (TSX) » quand le code contient du JSX. Il s'affiche en lecture seule, avec coloration syntaxique.
4. Regardez les indications au-dessus du code. Elles disent ce qui a été fait, par exemple « 2 interfaces écrites » ou « 11 annotations de type ajoutées ». Si rien n'avait besoin d'un type, la ligne indique « Rien ici n'avait besoin d'un type : le code a seulement été reformaté. »
5. Sélectionnez Copier dans le presse-papiers. Le bouton affiche alors « Copié ».
6. Sous le code, Options de conversion regroupe deux cases à cocher, Mode React et Mode strict. Si vous en changez une, le code est converti à nouveau.

Si le texte n'est pas du JavaScript valide, vous voyez « Ce n'est pas du JavaScript valide : erreur de syntaxe à la ligne N, colonne M. », avec la ligne en cause et un repère dessous. Un code qui contient déjà de la syntaxe TypeScript est considéré comme invalide. Cet outil travaille sur le code que vous collez : il convient à un composant, un module ou un extrait, pas à un dépôt entier.

Un exemple : un composant React avec PropTypes

L'entrée est un petit compteur avec des PropTypes et un gestionnaire d'événement sans type. Le convertisseur écrit l'interface CounterProps : label est obligatoire à cause de isRequired, tandis que start et onChange sont facultatives. La valeur par défaut n = 1 donne n: number = 1, et le gestionnaire onClick d'un button donne à e le type React.MouseEvent pour l'élément bouton. L'import inutilisé de prop-types disparaît et Prettier répartit le JSX sur plusieurs lignes. Au total, l'outil annonce 1 interface écrite et 3 annotations de type ajoutées.

Ce qui ne change pas : useState(start) reste tel quel, car le convertisseur ne devine pas un type d'après la façon dont une valeur est utilisée.

PropTypes React en TypeScript : comment elles deviennent une interface

Avec le mode React activé, le convertisseur écrit une interface nommée NomProps à partir des PropTypes du composant, la place au-dessus du composant et type les props avec elle. Cela fonctionne pour les composants fonction (déclarations, fonctions fléchées et ceux enveloppés dans memo) et pour les classes avec un propTypes statique ou une affectation Foo.propTypes = {...}. Une prop avec .isRequired est obligatoire, toute autre reçoit un ?. Les commentaires placés au-dessus d'une prop passent dans l'interface.

• string et number restent string et number
• bool devient boolean
• func devient un type de fonction à arguments quelconques
• array et object deviennent any[] et un Record à clé string
• node et element deviennent ReactNode et ReactElement
• arrayOf(T) et objectOf(T) deviennent T[] et un Record de valeurs T
• oneOf([...]) devient une union de littéraux, comme 'sm' | 'lg'
• oneOfType([...]) devient une union des types listés
• shape({...}) et exact({...}) deviennent un type objet
• instanceOf(Foo) devient Foo

L'instruction propTypes est supprimée, ainsi que l'import de prop-types si rien d'autre ne s'en sert. Un composant classe reçoit aussi une interface d'état tirée de this.state = {...}. Une classe sans PropTypes reçoit une interface de props construite à partir des this.props.x qu'elle lit. Un composant fonction sans PropTypes n'en reçoit une qu'en mode strict.

Les types ajoutés sans PropTypes, et ce que fait le mode strict

• Valeurs par défaut : un paramètre avec valeur par défaut est typé d'après elle, donc n = 5 devient n: number = 5 et let x = 0 devient let x: number = 0.
• Types de retour : ajoutés quand tous les return donnent le même type primitif (string, number ou boolean) ou quand il n'y en a aucun : void, ou une promesse de void pour une fonction async.
• Champs de classe : chaque this.x = ... d'une classe (qui n'étend rien, ou un composant React) reçoit une déclaration de propriété.
• Événements React : les paramètres de gestionnaires sur les éléments du DOM reçoivent le type d'événement correspondant, comme React.ChangeEvent, pour onChange, onClick ou onSubmit.
• Refs : useRef(null) prend le type de l'élément auquel il est lié par ref={...}.

Le mode strict est désactivé par défaut. Activez-le pour voir toutes les lacunes. Il écrit un any explicite là où un type ne peut pas être déduit : let x; devient let x: any;, const list = [] devient any[], et les paramètres sans type reçoivent : any. Sans le mode strict, ces endroits restent sans type. Avec lui, la liste de ce qu'il reste à corriger est facile à rechercher.

Ce qu'il laisse intact, commentaires et confidentialité

Il lit un morceau de code et ne devine rien. Ces cas restent tels quels ou deviennent any :

• Les paramètres de callbacks passés directement à un appel, comme dans items.map((x) => ...) : ils restent tels quels pour que TypeScript les type d'après la fonction qui les reçoit.
• Les types venant d'un autre fichier ou un validateur PropTypes personnalisé : ils deviennent any, et le validateur lui-même n'est pas conservé.
• Un composant forwardRef : ses PropTypes ne sont pas touchées.
• Les commentaires de type JSDoc ne sont pas lus.
• Aucun type n'est déduit du nom d'un paramètre ni de son usage.
• Aucune inférence entre fichiers : convertissez et vérifiez un fichier à la fois.
• Avec le mode React désactivé, les PropTypes restent telles quelles.

Le résultat est une première passe, pas une migration terminée. Collez-le dans votre projet, lancez tsc et précisez chaque any à la main. Le convertisseur ne renomme pas les fichiers : enregistrez vous-même le composant en .tsx.

Commentaires et mise en forme sont conservés : le code est lu avec @babel/parser, chaque annotation est insérée comme une modification de votre texte d'origine, puis Prettier reformate le résultat en gardant vos guillemets, vos points-virgules et votre indentation. Tout se passe dans un Web Worker de votre navigateur, et votre code n'est jamais envoyé ni exécuté. Pour mettre en forme le code avant de le convertir, utilisez Formateur de code. Pour comprendre d'abord un script minifié ou obscurci, utilisez Désobfuscateur JS.

Outils similaires

Autopréfixeur CSS

Collez du CSS, obtenez les préfixes vendeurs. Gratuit.

Désobfuscateur JS

Rendre lisible du JavaScript obfusqué

Formateur de code

Formater et embellir le code : JS, JSON, HTML, CSS, Python

Minifier CSS

Minifiez du CSS en ligne : sans commentaires ni espaces

Convertisseur Base64

Encodez ou décodez du texte en Base64 instantanément