JavaScript na TypeScript: z PropTypes do interfejsów

Tutaj zamienisz JavaScript na TypeScript i oszczędzisz sobie pierwszego, nudnego etapu migracji. Konwerter czyta twój kod parserem, zamienia React PropTypes w interfejsy, bierze typy z wartości domyślnych i dodaje te, które da się ustalić, a potem zwraca sformatowany TypeScript. Pracuje na jednym pliku lub fragmencie naraz, nigdy nie uruchamia twojego kodu i niczego nie wysyła.To, czego nie może wiedzieć, zostawia tobie. Sekcje poniżej mówią dokładnie, co to jest.

JavaScript do TypeScript online: jak to zrobić krok po kroku

1. Wklej kod do pola JavaScript lub JSX. Dopóki nic nie wkleisz, widać tam "Wklej tutaj JavaScript lub JSX…". Limit to 5 000 000 znaków.
2. Poczekaj chwilę. Narzędzie konwertuje w trakcie pisania lub wklejania, około 0,35 sekundy po ostatniej zmianie, więc nie ma przycisku do naciśnięcia.
3. Przeczytaj wynik pod nagłówkiem "TypeScript", a gdy kod zawiera JSX, pod nagłówkiem "TypeScript (TSX)". Jest pokazany jako podświetlony kod tylko do odczytu.
4. Sprawdź informacje nad kodem. Mówią, co zostało zrobione, na przykład "Zapisano 2 interfejsy" albo "Dodano 11 adnotacji typu". Jeśli nic nie wymagało typu, zobaczysz "Nic tutaj nie wymagało typu, więc kod został tylko sformatowany ponownie."
5. Wybierz Kopiuj do schowka. Przycisk zmieni się na "Skopiowano".
6. Pod kodem są Opcje konwersji z dwoma polami wyboru, Tryb React i Tryb Strict. Gdy zmienisz któreś, kod jest konwertowany ponownie.

Jeśli tekst nie jest poprawnym JavaScriptem, zobaczysz "To nie jest poprawny JavaScript: błąd składni w wierszu N, kolumnie M." razem z wierszem, którego dotyczy błąd, i znacznikiem pod nim. Kod, który już zawiera składnię TypeScriptu, jest uznawany za niepoprawny. Narzędzie działa na wklejonym kodzie, więc pasuje do komponentu, modułu lub fragmentu, a nie do całego repozytorium.

Przykład: komponent React z PropTypes

Wejściem jest mały licznik z PropTypes i procedurą obsługi zdarzenia bez typu. Konwerter zapisuje interfejs CounterProps: label jest wymagany z powodu isRequired, a start i onChange są opcjonalne. Wartość domyślna n = 1 daje n: number = 1, a procedura onClick na elemencie button nadaje e typ React.MouseEvent dla elementu przycisku. Nieużywany import prop-types znika, a Prettier rozkłada JSX na kilka wierszy. W sumie narzędzie podaje 1 interfejs i 3 adnotacje typu.

Co się nie zmienia: useState(start) zostaje takie, jak było, bo konwerter nie zgaduje typu na podstawie tego, jak używana jest wartość.

React PropTypes TypeScript: jak PropTypes stają się interfejsem

Przy włączonym trybie React konwerter zapisuje z PropTypes komponentu interfejs o nazwie NazwaProps, umieszcza go nad komponentem i za jego pomocą typuje propsy. Działa to dla komponentów funkcyjnych (deklaracji, funkcji strzałkowych i opakowanych w memo) oraz dla klas ze statycznym propTypes lub przypisaniem Foo.propTypes = {...}. Prop z .isRequired jest wymagany, każdy inny dostaje ?. Komentarze nad propem przechodzą do interfejsu.

• string i number zostają string i number
• bool staje się boolean
• func staje się typem funkcji z dowolnymi argumentami
• array i object stają się any[] i rekordem z kluczem string
• node i element stają się ReactNode i ReactElement
• arrayOf(T) i objectOf(T) stają się T[] i rekordem z wartością T
• oneOf([...]) staje się unią literałów, jak 'sm' | 'lg'
• oneOfType([...]) staje się unią wymienionych typów
• shape({...}) i exact({...}) stają się typem obiektu
• instanceOf(Foo) staje się Foo

Instrukcja propTypes jest usuwana, a razem z nią import prop-types, jeśli nic innego go nie używa. Komponent klasowy dostaje też interfejs stanu z this.state = {...}. Klasa bez PropTypes dostaje interfejs propsów zbudowany z odczytanych this.props.x. Komponent funkcyjny bez PropTypes dostaje interfejs propsów tylko w trybie Strict.

JSX na TSX i typy dodawane bez PropTypes

• Wartości domyślne: parametr z wartością domyślną dostaje z niej typ, więc n = 5 staje się n: number = 5, a let x = 0 staje się let x: number = 0.
• Typy zwracane: dodawane, gdy każde return daje ten sam typ prosty (string, number lub boolean) albo gdy żadnego nie ma: void, a dla funkcji async Promise z void.
• Pola klas: każde this.x = ... w klasie (która niczego nie rozszerza, albo w komponencie React) dostaje deklarację właściwości.
• Zdarzenia React: parametry procedur obsługi na elementach DOM dostają odpowiedni typ zdarzenia, jak React.ChangeEvent, przy onChange, onClick lub onSubmit.
• Refy: useRef(null) bierze typ elementu z ref={...}, do którego jest przypięty.

Żeby przejść z jsx na tsx, wystarczy wkleić komponent: gdy kod zawiera JSX, wynik ma nagłówek "TypeScript (TSX)". Tryb Strict jest domyślnie wyłączony. Włącz go, żeby zobaczyć wszystkie luki. Zapisuje jawne any tam, gdzie nie da się ustalić typu: let x; staje się let x: any;, const list = [] staje się any[], a parametry bez typu dostają : any. Przy wyłączonym trybie te miejsca zostają bez typu. Po włączeniu łatwo wyszukać listę rzeczy do poprawienia.

Czego konwerter nie rusza, komentarze i prywatność

Czyta jeden kawałek kodu i niczego nie zgaduje. Te przypadki zostają bez zmian albo stają się any:

• Parametry callbacków przekazywane wprost do wywołania, jak w items.map((x) => ...): zostają bez zmian, żeby TypeScript otypował je na podstawie funkcji, która je odbiera.
• Typy z innego pliku lub własny walidator PropTypes: stają się any, a sam walidator nie jest zachowywany.
• Komponent z forwardRef: jego PropTypes zostają nietknięte.
• Komentarze typów JSDoc nie są czytane.
• Typ nigdy nie jest zgadywany z nazwy parametru ani ze sposobu jego użycia.
• Brak wnioskowania między plikami: konwertuj i sprawdzaj po jednym pliku.
• Przy wyłączonym trybie React PropTypes zostają bez zmian.

Wynik to pierwsze podejście, a nie skończona migracja. Wklej go do projektu, uruchom tsc i dopracuj każde any ręcznie. Konwerter nie zmienia nazw plików, więc zapisz komponent jako .tsx samodzielnie.

Komentarze i układ zostają zachowane: kod jest czytany przez @babel/parser, każda adnotacja jest wstawiana do twojego oryginalnego tekstu jako edycja, a potem Prettier formatuje wynik, zachowując twoje cudzysłowy, średniki i szerokość wcięcia. Wszystko działa w Web Workerze w twojej przeglądarce, a twój kod nigdy nie jest wysyłany ani uruchamiany. Żeby uporządkować kod przed konwersją, użyj narzędzia Formatowanie kodu. Żeby najpierw zrozumieć zminifikowany lub zaciemniony skrypt, użyj narzędzia Deobfuskator JavaScript.

Powiązane narzędzia

Autoprefixer CSS

Wklej CSS, uzyskaj prefiksy przeglądarek. Za darmo.

Deobfuskator JavaScript

Uporządkuj i odczytaj zaciemniony kod JavaScript

Formatowanie kodu

Formatuj kod — JS, JSON, HTML, CSS, Python

Minifikator CSS

Minifikuj CSS online: usuń komentarze i spacje

Konwerter Base64

Zakoduj tekst do Base64 lub zdekoduj go z powrotem