Reaguj za pomocą TypeScript lub JavaScript: co jest lepsze?

Co to jest TypeScript?

TypeScript typu open source udostępnia kompilator, który przekształca kod TypeScript w kod JavaScript. Ten język jest open-source i cross-browser. Załóżmy, że w języku js prawie nie ma błędów logicznych. W takim przypadku możesz użyć TypeScript, zmieniając nazwy swoich skryptów.js na pliki.ts i zacząć otrzymywać odpowiedni kod TypeScript.

Język JavaScript byłby wyspecjalizowaną wersją TypeScript. Anders Hejlsberg, pracownik techniczny w Microsoft, wprowadził go i stworzył w 2012 roku. Ponieważ JavaScript stał się bardziej popularny, kod JS stał się bardziej obszerny i trudniejszy do zrozumienia, dlatego powstał Typescript. Kiedy programiści zaczęli wykorzystywać JavaScript w technologiach po stronie serwera, stało się to jaśniejsze.

Co to jest JavaScript?

Za każdym razem, gdy strona użytkownika robi coś więcej niż tylko siedzenie tam i wyświetlanie statycznych danych, na które możesz patrzeć — prezentując lepsze treści, wizualizacje, animowaną grafikę 2D/3D, przeglądanie odtwarzaczy wideo itp. — możesz się założyć, że JavaScript jest prawdopodobnie zaangażowany. JavaScript to język skryptowy lub kodujący, który umożliwia umieszczanie zaawansowanych struktur na stronach internetowych. Jest to trzecia warstwa tortu zbudowana ze standardowych technologii internetowych, dwie pierwsze (HTML i CSS).

Czy React jest lepszy z JavaScript czy TypeScript?

Na pierwszy rzut oka wydaje się, że nie ma różnicy między kodem ze standardowego React TypeScript i JavaScript. Jest to całkowicie oczekiwane, biorąc pod uwagę, że TypeScript jest zbiorem kodów i jest przodkiem JavaScript. Różnice między JavaScript i TypeScript nie zmieniły się zbytnio w ciągu ostatnich kilku lat. Jesteś gotowy, jeśli je znasz.

Przyszły postęp technologiczny może przyspieszyć produkcję oprogramowania, zwiększając zapotrzebowanie na programistów. Proszę używać dowolnego języka; przewidujemy rozwój zarówno w mniejszych, jak i dużych projektach: wybierz TypeScript w przypadku dużych projektów z międzynarodowymi zespołami lub JavaScript w przypadku prostych zadań ze świetnymi zespołami.

JavaScript jest szeroko stosowany. Analizują go i stwierdzają, że język jest niestabilny i nieprzewidywalny. W razie potrzeby frameworki JS można przetłumaczyć na TypeScript. Konwersja popularnych systemów JS na TS wymaga nakładu pracy.

Pliki.d.ts muszą być udokumentowane i zawierać wszystkie zwrócone metodologie dla każdej przeniesionej biblioteki. Przeniesienie jQuery wymagało dalszych wysiłków. Może to nie jest takie trudne. TypeScript jest obsługiwany przez IDEA, WebStorm, Expressive, Particle i inne.

Kod React i typ pliku w TypeScript vs. JavaScript

Na pierwszy rzut oka wydaje się, że nie ma różnicy między kodem ze standardowego React TypeScript i JavaScript.

Jest to całkowicie oczekiwane, biorąc pod uwagę, że TypeScript jest zbiorem kodów i jest przodkiem JavaScript. Oznacza to, że dowolne programowanie oparte na języku JavaScript byłoby również w stanie wykonywać pliki TypeScript. Podobnie, nie każdy język SASS może być prawidłowym kodem CSS; pomysł ten mówi, że wszystkie CSS są akceptowalne w kodzie SASS.

Jednak komputer nie może wykonywać języka TypeScript, dlatego większość aplikacji TypeScript miałaby plik tsconfig.json. Ten plik konfiguracyjny zmieni zachowanie kompilatora TypeScript i przetłumaczy kod TypeScript na JavaScript, który przeglądarka może następnie zrozumieć i użyć.

Główną różnicą między TypeScript a aplikacją JavaScript React jest nazwa pliku tej pierwszej. Na przykład TSX, podczas gdy ten ostatni to.js.

Jak stworzyć projekt React w maszynopisie?

Możesz utworzyć nowy projekt TypeScript React, korzystając z biblioteki create-react-app w swoim środowisku i używając tego polecenia:

 npx create-react-app my-app --template typescript

lub,

 yarn create react-app my-app --template Typescript

Jeśli masz istniejący projekt JavaScript React, który chcesz przekształcić w TypeScript, możesz uruchomić to polecenie.

 npm install — save typescript @types/node @types/react @types/react-dom @types/jest

lub,

 yarn add typescript @types/node @types/react @types/react-dom @types/jest

Po uruchomieniu polecenia możesz zmienić nazwy wszystkich plików .js na .tsx, ponownie uruchomić serwer i rozpocząć pracę.

1. Łapacz błędów

Odsetek pozostałych defektów, które TypeScript może naprawić, wzrasta, gdy w inny sposób zostanie ustawionych więcej błędów niewykrywalnych przez ts, ale zmniejsza to również ogólną liczbę problemów, które TypeScript może jeszcze poprawić. W związku z tym, chociaż odsetek może wzrosnąć, liczba wykrytych problemów może się nieznacznie zmienić.

2. Pomocnik IntelliSense w IDE

Lista składników, informacje o parametrach, szybkie informacje i całe słowo to niektóre z funkcji oferowanych przez IntelliSense, narzędzie do uzupełniania kodu. Wystarczy kilka naciśnięć klawiszy, aby dodać wywołania atrybutów i metod, zapisywać argumenty, które wpisujesz, i dowiedzieć się trochę o oprogramowaniu, z którego korzystasz dzięki tym możliwościom.

3. Wpisz system

Być może zastanawiasz się, jak ściśle wpisywać zmienne lub obiekty, aby kod projektu React TypeScript mógł włączyć Bug Catcher i IntelliSense. Aby zapewnić proces TypeScript Type Process w projekcie Reactive TypeScript, należy pamiętać o trzech rzeczach.

1. Zadeklaruj interakcję dla obiektów/tablic i podtypu dla zmiennych typu pierwotnego.

Aby uczynić pole w obiekcie opcjonalnym, możesz użyć Operatora. Dzięki temu TypeScript nie będzie przeszkadzał podczas sprawdzania kodu.

2. W razie potrzeby zadeklaruj typ komponentu funkcjonalnego

3. Możesz użyć tego za darmo. Inicjowanie właściwości wartością umożliwia TypeScript natychmiastowe wybranie jakości.

5 powodów, dla których warto używać TypeScriptu w React

W ciągu ostatnich kilku lat TypeScript cieszył się dużym zainteresowaniem wśród programistów front-end. Kilka czynników przyczyniających się do jego sukcesu to ulepszona możliwość ponownego użycia, jednolitość kodu i przyszła obsługa platform. Dodatkowo, reakcja pozostała bezstronna, oferując programistom możliwość korzystania z TypeScriptu lub JavaScriptu. W przeciwieństwie do wielu innych platform i bibliotek domyślnie przyjęło TypeScript.

W tym poście omówimy 5 przekonujących argumentów przemawiających za używaniem TypeScript dla aplikacji React.

1. Komponenty są łatwe do odczytania i zrozumienia

Typy podpór można łatwo zdefiniować za pomocą TypeScript, dzięki czemu kod jest znacznie bardziej precyzyjny i zrozumiały. Ponadto zostanie uwzględniona obsługa technologii IntelliSense i statycznego sprawdzania typu.

Razem te czynniki usprawniają proces rozwoju i zmniejszają możliwość wystąpienia defektów. Ponadto dodanie uwag do typów podpór ułatwia zrozumienie definicji komponentów.

2. Lepsza obsługa JSX

Kolejna zaleta TypeScript + React poprawiła technologię IntelliSense i syntezę kodu dla JSX. Bit ułatwia dystrybucję, opisywanie i ponowne wykorzystywanie niezależnych komponentów w różnych projektach. Wykorzystaj go do tworzenia skalowalnych aplikacji, utrzymania spójnego projektu, promowania ponownego wykorzystania kodu, współpracy z innymi i przyspieszenia dostarczania.

3. Domyślne wsparcie dla TypeScriptu w bibliotekach współdzielonych

Załóżmy, że używałeś TypeScript kilka lat temu. W takim przypadku możesz pamiętać, jak frustrujące było szukanie koncepcji, które pojawiły się dla bibliotek innych firm. Ale teraz, gdy TypeScript szybko zyskuje na popularności; najczęściej używane biblioteki obsługują definicje typów. Dodatkowo definicje typów są obsługiwane przez architekturę biblioteki React, więc nie musisz się już tym martwić.

4. Stopniowe wdrażanie dla bieżących projektów

Wybór TypeScript nie byłby prostą decyzją włączania lub wyłączania. Zamiast tego jest to progresywna zmiana oparta na aktualnym stanie programu. Załóżmy na przykład, że zdecydowałeś się wykorzystać TypeScript w bieżącym projekcie React. W takiej sytuacji należy zastanowić się, jak jednocześnie obsługiwać TypeScript i JavaScript, jednocześnie stopniowo rozszerzając użycie TypeScript. Ponadto można ustawić parametry kompilatora TypeScript, aby migrować stopniowo.

5. Ogólne zalety technologii IntelliSense i statycznej walidacji typu

a. Testowanie pod kątem typów statycznych

Błędy są łatwiejsze do wykrycia wcześniej dzięki statycznemu sprawdzaniu typów. Wspomniany wcześniej przykład odpowiednio rozpoznaje, że ciąg, a nie liczba, jest potrzebny jako dane wejściowe dla metody get details.

b. Lepsza IntelliSense

Można ufać, że technologia IntelliSense pozostaje w 100% poprawna, gdy walidacja danych statycznych TypeScript i funkcja IntelliSense są połączone.

c. Wzmocnienie refaktoryzacji

Refaktoryzacja jest znacznie prostsza dzięki TypeScript, ponieważ znamy dokładne języki i wiemy, gdzie wprowadzać zmiany. Dodatkowo, jeśli problem zostanie szybko wykryty, nie ryzykujesz uszkodzenia czegokolwiek.

d. Mniej błędów, które nie są zdefiniowane

Ponieważ interpreter TypeScript dodatkowo identyfikuje niezdefiniowane błędy w czasie transpilowania, prawdopodobieństwo ich wystąpienia podczas wykonywania jest zmniejszone.

mi. Poprawiona czytelność i konserwacja

Baza kodu byłaby znacznie bardziej zrozumiała i obsługiwana przy użyciu definicji typów. Możesz stosować się do zasad programowania obiektowego i wykorzystywać struktury, takie jak interfejsy, do organizowania kodu w sposób minimalizujący sprzężenie.

f. Problemy z używaniem TypeScriptu są rozwiązywane.

Biorąc pod uwagę, że wcześniej mówiliśmy o zaletach TypeScript, dowiedzmy się więcej o jego wadach, aby lepiej przygotować się do jego przyjęcia.

g. Krzywa do nauki

Rozpoczęcie korzystania z TypeScript może być trudne ze względu na stromą krzywą uczenia się, szczególnie jeśli Twoi pracownicy mają doświadczenie tylko z podstawowym JavaScript. Najlepszym sposobem postępowania w tej sytuacji jest przyjęcie opisanej wyżej progresywnej adaptacji.

Ale jeśli grupa ma już doświadczenie z językami dynamicznie typowanymi, takimi jak Java lub C#Understanding Typescript, nie jest to zbyt trudne.

h. Brak definicji typów w bibliotece innej firmy.

Jest to niezwykła okoliczność, biorąc pod uwagę rosnącą popularność języka TypeScript. Jednak oficjalna dokumentacja TypeScript zawiera przydatne porady, jeśli natrafisz na bibliotekę, w której brakuje definicji. Przytocz to.

i. Okres obliczeniowy

Oczywiście stworzenie kodu źródłowego zajmie kilka milisekund, ponieważ musi przejść przez dodatkową warstwę transpiracji. Ale przez większość czasu nie będzie to widoczne. Jego zalety w zakresie wiedzy programistycznej i mniejszej podatności na problemy przeważą nad wadą wymagającą długiego wysiłku.

Zawijanie

To połączenie krótkotrwałego cierpienia z długoterminową nagrodą. Kiedy zaczynasz projekt TypeScript, może być bardzo trudne i czasochłonne stworzenie wszystkich narzędzi do tworzenia. Jednak wraz z rozwojem Twojej aplikacji odkryjesz, że te schematy są niezwykle pomocne, przyspieszają i zmniejszają prawdopodobieństwo błędów. Mamy nadzieję, że ten artykuł niesamowicie Cię uchwycił i pomógł Ci rozpoznać wartość wykorzystania TypeScript w Twoim projekcie React.