JavaScript naar TypeScript: van PropTypes naar interfaces

Hier breng je JavaScript naar TypeScript zonder de eerste, saaie ronde van een migratie met de hand te doen. De converter leest je code met een parser, maakt van React PropTypes interfaces, haalt types uit standaardwaarden en voegt de types toe die zich laten afleiden. Als js naar ts converter werkt hij op één bestand of fragment tegelijk, voert hij je code nooit uit en uploadt hij niets.Wat hij niet kan weten, laat hij aan jou over. De onderdelen hieronder zeggen precies wat dat is.

JavaScript naar TypeScript online, stap voor stap

1. Plak je code in het veld JavaScript of JSX. Tot je iets plakt, staat er "Plak hier JavaScript of JSX…". De limiet is 5.000.000 tekens.
2. Wacht even. De tool zet de code om terwijl je typt of plakt, ongeveer 0,35 seconde na de laatste wijziging, dus er is geen knop om op te drukken.
3. Lees het resultaat onder de kop "TypeScript", of "TypeScript (TSX)" als de code JSX bevat. Het verschijnt als gemarkeerde code die je alleen kunt lezen.
4. Bekijk de meldingen boven de code. Ze vertellen wat er is gedaan, bijvoorbeeld "2 interfaces geschreven" of "11 typeannotaties toegevoegd". Had niets een type nodig, dan staat er "Hier had niets een type nodig, dus de code is alleen opnieuw opgemaakt."
5. Kies Kopiëren naar klembord. De knop verandert in "Gekopieerd".
6. Onder de code staan de Conversie-opties met twee selectievakjes, React-modus en Strikte modus. Verander je er een, dan wordt de code opnieuw verwerkt.

Is de tekst geen geldig JavaScript, dan zie je "Dit is geen geldig JavaScript: syntaxfout op regel N, kolom M." met de regel in kwestie en een markering eronder. Code die al TypeScript-syntax bevat, telt als ongeldig. De tool werkt op de code die je plakt, dus hij past bij een component, een module of een fragment, niet bij een hele repository.

Een voorbeeld: een React-component met PropTypes

De invoer is een kleine teller met PropTypes en een event handler zonder type. De converter schrijft het interface CounterProps: label is verplicht door isRequired, terwijl start en onChange optioneel zijn. De standaardwaarde n = 1 wordt n: number = 1, en de onClick-handler op een button geeft e het type React.MouseEvent voor het knopelement. De ongebruikte import van prop-types verdwijnt en Prettier verdeelt de JSX over meerdere regels. In totaal meldt de tool 1 interface en 3 typeannotaties.

Wat niet verandert: useState(start) blijft staan zoals het was, omdat de converter geen type raadt uit hoe een waarde wordt gebruikt.

React PropTypes naar TypeScript: hoe ze een interface worden

Met de React-modus aan schrijft de converter uit de PropTypes van een component een interface met de naam NaamProps, zet die boven de component en typeert de props ermee. Dat werkt voor functiecomponenten (declaraties, pijlfuncties en componenten in memo) en voor klassen met een statische propTypes of een toewijzing Foo.propTypes = {...}. Een prop met .isRequired is verplicht, elke andere krijgt een ?. Commentaar boven een prop gaat mee naar het interface.

• string en number blijven string en number
• bool wordt boolean
• func wordt een functietype met willekeurige argumenten
• array en object worden any[] en een Record met sleutel string
• node en element worden ReactNode en ReactElement
• arrayOf(T) en objectOf(T) worden T[] en een Record met waarde T
• oneOf([...]) wordt een union van literals, zoals 'sm' | 'lg'
• oneOfType([...]) wordt een union van de genoemde types
• shape({...}) en exact({...}) worden een objecttype
• instanceOf(Foo) wordt Foo

De propTypes-regel wordt verwijderd, en de import van prop-types ook als niets anders hem gebruikt. Een klassecomponent krijgt daarnaast een state-interface uit this.state = {...}. Een klasse zonder PropTypes krijgt een props-interface op basis van de this.props.x die ze leest. Een functiecomponent zonder PropTypes krijgt alleen in de strikte modus een props-interface.

Welke types erbij komen zonder PropTypes, en JSX naar TSX

• Standaardwaarden: een parameter met een standaardwaarde krijgt daar zijn type van, dus n = 5 wordt n: number = 5 en let x = 0 wordt let x: number = 0.
• Retourtypes: toegevoegd als elke return hetzelfde primitieve type geeft (string, number of boolean) of als er geen is: void, of een Promise van void bij een async-functie.
• Klasse-eigenschappen: elke this.x = ... in een klasse (die niets uitbreidt, of een React-component) krijgt een eigenschapsdeclaratie.
• React-events: handlerparameters op DOM-elementen krijgen het passende eventtype, zoals React.ChangeEvent, bij onChange, onClick of onSubmit.
• Refs: useRef(null) neemt het elementtype over van de ref={...} waaraan hij hangt.

Voor JSX naar TSX plak je gewoon de component: bevat de code JSX, dan heet het resultaat "TypeScript (TSX)". De strikte modus staat standaard uit. Zet hem aan om alle gaten te zien. Hij schrijft een expliciete any waar geen type is af te leiden: let x; wordt let x: any;, const list = [] wordt any[], en parameters zonder type krijgen : any. Staat hij uit, dan blijven die plekken zonder type. Aan maakt het lijstje van wat je nog moet oplossen makkelijk doorzoekbaar.

Wat de converter met rust laat, commentaar en privacy

Hij leest één stuk code en raadt niets. Deze gevallen blijven staan of worden any:

• Callbackparameters die rechtstreeks aan een aanroep worden meegegeven, zoals bij items.map((x) => ...): die blijven staan, zodat TypeScript ze typeert vanuit de functie die ze ontvangt.
• Types uit een ander bestand of een eigen PropTypes-validator: die worden any, en de validator zelf blijft niet bewaard.
• Een forwardRef-component: de PropTypes blijven onaangeroerd.
• JSDoc-typecommentaar wordt niet gelezen.
• Een type raden uit de naam van een parameter of uit hoe hij wordt gebruikt gebeurt nooit.
• Geen inferentie tussen bestanden: verwerk en controleer één bestand tegelijk.
• Met de React-modus uit blijven PropTypes ongemoeid.

De uitvoer is een eerste ronde, geen afgeronde migratie. Plak hem in je project, draai tsc en maak elke any met de hand strakker. De converter hernoemt geen bestanden, dus sla de component zelf op als .tsx.

Commentaar en opmaak blijven bewaard: de code wordt gelezen met @babel/parser, elke annotatie wordt als bewerking in je oorspronkelijke tekst gezet, en Prettier maakt het resultaat daarna netjes met jouw aanhalingstekens, puntkomma's en inspringing. Alles draait in een Web Worker in je browser, en je code wordt nooit geüpload of uitgevoerd. Wil je code eerst opschonen, gebruik dan Code Formatter. Wil je een geminimaliseerd of versluierd script eerst begrijpen, gebruik dan JS-deobfuscator.

Gerelateerde tools

CSS Autoprefixer

Plak CSS voor directe vendor-prefixes. Gratis.

JS-deobfuscator

Maak geobfusceerde JavaScript weer leesbaar

Code Formatter

Formatteer code — JS, JSON, HTML, CSS, Python

CSS-minifier

CSS online minificeren: haal commentaar en spaties weg

Base64-converter

Direct tekst naar Base64 coderen of decoderen