Hilfe

JavaScript in TypeScript umwandeln: PropTypes zu Interfaces

Hier kannst du JavaScript in TypeScript umwandeln und dir die erste, mühsame Runde einer Migration sparen. Der Konverter liest deinen Code mit einem Parser, macht aus React-PropTypes Interfaces, übernimmt Typen aus Standardwerten und ergänzt, was sich ableiten lässt. Er arbeitet mit einer Datei oder einem Ausschnitt, führt deinen Code nie aus und lädt nichts hoch.Was er nicht wissen kann, überlässt er dir. Die Abschnitte unten sagen genau, was das ist.

JavaScript in TypeScript umwandeln: so geht's

Füge deinen Code in das Feld JavaScript oder JSX ein. Bis dahin steht dort „Füge hier JavaScript oder JSX ein…“. Das Limit liegt bei 5.000.000 Zeichen.
Warte einen Moment. Das Tool wandelt beim Eintippen und Einfügen um, etwa 0,35 Sekunden nach der letzten Änderung. Einen Button gibt es dafür nicht.
Lies das Ergebnis unter der Überschrift „TypeScript“, bei JSX unter „TypeScript (TSX)“. Es erscheint als schreibgeschützter, farbig hervorgehobener Code.
Sieh dir die Angaben über dem Code an. Sie zeigen, was passiert ist, zum Beispiel „2 Interfaces geschrieben“ oder „11 Typannotationen hinzugefügt“. Brauchte nichts einen Typ, steht dort „Hier brauchte nichts einen Typ, daher wurde der Code nur neu formatiert.“
Wähle In die Zwischenablage kopieren. Die Beschriftung wechselt zu „Kopiert“.
Unter dem Code findest du die Umwandlungsoptionen mit zwei Kontrollkästchen, React-Modus und Strict-Modus. Änderst du eines, wird der Code neu umgewandelt.

Ist der Text kein gültiges JavaScript, siehst du „Das ist kein gültiges JavaScript: Syntaxfehler in Zeile N, Spalte M.“ mit der betroffenen Zeile und einem Zeiger darunter. Code, der schon TypeScript-Syntax enthält, gilt als ungültig. Dieser JavaScript to TypeScript Converter online arbeitet mit dem Code, den du einfügst. Er passt also zu einer Komponente, einem Modul oder einem Ausschnitt, nicht zu einem ganzen Repository.

Beispiel: eine React-Komponente mit PropTypes

Als Eingabe dient eine kleine Zähler-Komponente mit PropTypes und einem Event-Handler ohne Typ. Der Konverter schreibt daraus das Interface CounterProps: label ist Pflicht wegen isRequired, start und onChange sind optional. Aus dem Standardwert n = 1 wird n: number = 1, und der onClick-Handler an einem button gibt e den Typ React.MouseEvent für das Button-Element. Der ungenutzte Import von prop-types fällt weg, und Prettier verteilt das JSX auf mehrere Zeilen. Insgesamt meldet das Tool 1 Interface und 3 Typannotationen.

Was gleich bleibt: useState(start) steht weiter so da, weil der Konverter keinen Typ daraus errät, wie ein Wert benutzt wird.

React PropTypes in TypeScript: aus PropTypes wird ein Interface

React PropTypes TypeScript-Interfaces von Hand zu schreiben ist Fleißarbeit. Bei eingeschaltetem React-Modus erledigt das der Konverter: Er schreibt aus den PropTypes einer Komponente ein Interface namens NameProps, setzt es über die Komponente und typisiert damit die Props. Das klappt bei Funktionskomponenten (Deklarationen, Pfeilfunktionen und mit memo umhüllte) und bei Klassen mit statischem propTypes oder einer Zuweisung Foo.propTypes = {...}. Eine Prop mit .isRequired ist Pflicht, jede andere bekommt ein ?. Kommentare über einer Prop wandern ins Interface.

string und number bleiben string und number
bool wird zu boolean
func wird zu einem Funktionstyp mit beliebigen Argumenten
array und object werden zu any[] und einem Record mit Schlüsseltyp string
node und element werden zu ReactNode und ReactElement
arrayOf(T) und objectOf(T) werden zu T[] und einem Record mit Werttyp T
oneOf([...]) wird zu einer Union aus Literalen wie 'sm' | 'lg'
oneOfType([...]) wird zu einer Union der aufgelisteten Typen
shape({...}) und exact({...}) werden zu einem Objekttyp
instanceOf(Foo) wird zu Foo

Die Anweisung propTypes wird entfernt, der Import von prop-types ebenfalls, wenn ihn nichts anderes braucht. Eine Klassenkomponente bekommt aus this.state = {...} zusätzlich ein State-Interface. Eine Klasse ohne PropTypes erhält ein Props-Interface aus den gelesenen this.props.x. Eine Funktionskomponente ohne PropTypes bekommt ein Props-Interface nur im Strict-Modus.

Welche Typen ohne PropTypes ergänzt werden

Standardwerte: Ein Parameter mit Standardwert wird danach typisiert. Aus n = 5 wird n: number = 5, aus let x = 0 wird let x: number = 0.
Rückgabetypen: Der Konverter ergänzt sie, wenn jedes return denselben einfachen Typ liefert (string, number oder boolean) oder gar keins vorkommt. Dann steht void, bei async-Funktionen ein Promise von void.
Klassenfelder: Jedes this.x = ... in einer Klasse (ohne Basisklasse oder als React-Komponente) bekommt eine Eigenschaftsdeklaration.
React-Events: Handler-Parameter an DOM-Elementen erhalten den passenden Event-Typ, etwa React.ChangeEvent, bei onChange, onClick oder onSubmit.
Refs: useRef(null) übernimmt den Elementtyp aus dem ref={...}, an dem es hängt.

Der Strict-Modus ist standardmäßig aus. Schaltest du ihn ein, schreibt der Konverter ein explizites any, wo sich ein Typ nicht ableiten lässt: Aus let x; wird let x: any;, aus const list = [] wird any[], und Parameter ohne Typ bekommen : any. Ohne Strict bleiben diese Stellen einfach ohne Typ. Mit Strict lässt sich die Liste der offenen Stellen leicht durchsuchen.

Was der Konverter nicht anfasst

Er liest ein Stück Code und rät nichts. Diese Fälle bleiben unverändert oder werden zu any:

Callback-Parameter, die direkt an einen Aufruf gehen, etwa bei items.map((x) => ...): Der Konverter lässt sie unverändert, damit TypeScript sie über die aufnehmende Funktion typisiert.
Typen aus einer anderen Datei oder ein eigener PropTypes-Validator: Das wird zu any, der Validator selbst bleibt nicht erhalten.
Komponenten mit forwardRef: Deren PropTypes bleiben unberührt.
JSDoc-Typkommentare werden nicht gelesen.
Typen aus dem Namen eines Parameters oder aus seiner Verwendung rät er nie.
Dateiübergreifend schließt er nichts. Wandle eine Datei nach der anderen um und prüfe sie.
PropTypes bei ausgeschaltetem React-Modus bleiben unverändert.

Das Ergebnis ist ein erster Durchgang, keine fertige Migration. Füge es in dein Projekt ein, lass tsc laufen und ersetze jedes any von Hand. Dateien benennt der Konverter nicht um, speichere eine Komponente also selbst als .tsx.

Warum Kommentare und Layout erhalten bleiben

Der Code wird mit @babel/parser gelesen, und jede Annotation wird als Textänderung in deinen Originaltext eingefügt. Deshalb bleiben Kommentare und die Form deines Codes erhalten. Danach formatiert Prettier das Ergebnis neu und behält deinen Anführungszeichen-Stil, deine Semikolons und deine Einrückung. Das Parsen, Ändern und Formatieren läuft in einem Web Worker in deinem Browser. Dein Code wird nie hochgeladen und nie ausgeführt.

Willst du Code vor der Umwandlung aufräumen, nimm den Code-Formatierer. Minimierte oder verschleierte Skripte entschlüsselst du vorher mit dem JS-Deobfuskierer.

Häufige Fragen

Wie wandle ich JavaScript online in TypeScript um?

Füge dein JavaScript oder JSX in das Feld „JavaScript oder JSX“ ein. Etwa eine drittel Sekunde später erscheint das TypeScript unter der Überschrift „TypeScript“, bei JSX unter „TypeScript (TSX)“. Einen Umwandeln-Button gibt es nicht. Mit „In die Zwischenablage kopieren“ übernimmst du das Ergebnis.

Macht der JavaScript to TypeScript Converter aus React PropTypes ein Interface?

Ja. Bei eingeschaltetem React-Modus wird jedes propTypes-Objekt zu einem Interface, das nach der Komponente heißt, etwa CounterProps. Eine Prop mit isRequired ist Pflicht, jede andere bekommt ein Fragezeichen. Die propTypes-Anweisung fällt weg, und der Import von prop-types ebenfalls, wenn ihn nichts anderes in der Datei braucht. Das funktioniert bei Funktionskomponenten und bei Klassen mit statischem propTypes.

Wie bekomme ich aus meiner JSX-Komponente TSX?

Füge die JSX-Komponente ein. Enthält der Code JSX, trägt das Ergebnis die Überschrift „TypeScript (TSX)“, und der React-Modus schaltet sich von selbst ein. Props bekommen dann ein Interface und Handler Event-Typen. Dateien benennt das Tool nicht um, speichere das Ergebnis in deinem Projekt selbst mit der Endung .tsx.

Was machen React-Modus und Strict-Modus?

Der React-Modus unter „Umwandlungsoptionen“ macht aus PropTypes Interfaces und typisiert Event-Handler, Props und Hooks. Er ist standardmäßig an, wenn der Code JSX, react oder prop-types enthält. Ist er aus, bleiben PropTypes unberührt. Der Strict-Modus ist standardmäßig aus und schreibt ein explizites any, wo sich kein Typ ableiten lässt, statt ihn wegzulassen.

Warum steht im Ergebnis noch any?

Ein Typ wird nur geschrieben, wenn er sich aus dem Code selbst lesen lässt. Ein eigener PropTypes-Validator oder ein aus einer anderen Datei importierter Typ wird zu any, und der Strict-Modus ergänzt ein explizites any für Variablen und Parameter ohne Typ. Das Ergebnis ist ein erster Durchgang. Lass es durch tsc laufen und ersetze die any-Typen durch die echten.

Warum hat ein Callback-Parameter keinen Typ?

Ein Parameter, der direkt an einen Aufruf geht, etwa x in items.map((x) => x.id), bleibt absichtlich unverändert. So kann TypeScript ihn weiter aus der Funktion typisieren, die den Callback entgegennimmt.

Bleiben meine Kommentare und die Formatierung erhalten?

Kommentare bleiben, weil Annotationen als Textänderungen in deinen Originalcode eingefügt werden, statt ihn neu aufzubauen. Danach läuft Prettier darüber. Es behält deinen Anführungszeichen-Stil, deine Semikolons und deine Einrückung, bricht lange Zeilen aber unter Umständen neu um. Kommentare über einem PropTypes-Eintrag wandern in die passende Eigenschaft des Interface.

Wird mein Code beim JS to TS Converter online hochgeladen oder ausgeführt?

Nein. Der Code wird in deinem Browser in einem Web Worker gelesen und umgeschrieben und nie an einen Server geschickt. Er wird auch nie ausgeführt, ein Skript mit Nebenwirkungen kannst du also einfügen. Bei einem Syntaxfehler siehst du die Meldung mit Zeile und Spalte, und das Limit liegt bei 5.000.000 Zeichen.