Maszynopis a JavaScript – zrozumienie różnicy

Często spotykam się z pytaniem: jaka jest zasadnicza różnica między JavaScript a TypeScript?

Przekonajmy się!

Od momentu rozpoczęcia programowania, JavaScript (JS) zapewne towarzyszy Ci w projektach front-endowych. Jeśli masz pewne doświadczenie z JS, pomyśl o TypeScript jako o jego rozszerzeniu – to JS wzbogacony o dodatkowe funkcje, które podnoszą jakość i przejrzystość kodu. Microsoft stworzył TypeScript jako projekt open source, aby ułatwić proces tworzenia kodu JS i umożliwić wczesne wykrywanie błędów na etapie kompilacji.

W tym artykule szczegółowo omówimy charakterystyczne cechy JavaScript i TypeScript, porównując oba języki skryptowe.

Czym jest JavaScript?

JavaScript służy do tworzenia skryptów działających po stronie klienta. Możesz umieścić skrypt bezpośrednio w pliku HTML lub utworzyć odrębny plik z rozszerzeniem .js i zaimportować go do HTML. Typowym przykładem zastosowania JavaScript w praktyce jest walidacja formularza logowania, gdzie po wprowadzeniu nieprawidłowej nazwy użytkownika lub hasła wyświetla się komunikat o błędzie.

Spróbujmy napisać prosty kod JS i uruchomić go w przeglądarce:

Utwórz plik o nazwie example.html i wklej do niego poniższy kod:

<script>

feeling = 'happy';

feeling = 23;

</script>

Ten prosty kod deklaruje zmienną i przypisuje jej wartość „happy” (tekst). Następnie tej samej zmiennej przypisujemy wartość innego typu (liczbę). JavaScript nie zgłosi żadnego błędu i bez problemu uruchomimy ten kod w przeglądarce. Teraz pobierzmy wartość „uczucia” od użytkownika:

Nasz kod HTML będzie wyglądał w ten sposób:

<input type = "textbox" id = "howyoufeel">

A odpowiadający mu skrypt będzie wyglądał tak:

feeling = document.getElementById("howyoufeel").value;

O ile nie dodamy do skryptu dodatkowej kontroli, JS zaakceptuje dowolną wartość wprowadzoną przez użytkownika. W konsekwencji, do zmiennej „feeling” możemy wpisać np. „234”, „@.#$%” itp.

Charakterystyczne cechy JavaScript

Na podstawie powyższego przykładu możemy wyróżnić następujące cechy JavaScript:

• Jest to język skryptowy o słabym typowaniu.
• Stosuje się go do skryptów po stronie klienta i serwera (z wykorzystaniem node.js).
• Jest elastyczny i dynamiczny.
• Jest obsługiwany przez wszystkie popularne przeglądarki.
• Jest lekki i interpretowany.

Jeśli chcesz zgłębić tajniki JavaScript, polecam Ci ten kurs Udemy.

Czym jest TypeScript?

Aplikacje w realnym świecie wymagają rozbudowanych mechanizmów walidacji i dynamicznej kontroli danych. W takich projektach kod JavaScript może stać się trudny w utrzymaniu, zwłaszcza ze względu na brak statycznego sprawdzania typów. Kluczowe jest, aby dane wejściowe od użytkownika były weryfikowane od samego początku. Właśnie tutaj pojawia się TypeScript.

TypeScript charakteryzuje się silnym typowaniem i posiada kompilator, który zgłasza błędy, jeśli nie zdefiniujemy typu zmiennej.

Zarówno JavaScript, jak i TypeScript są zgodne ze specyfikacjami ECMAScript. Typescript potrafi uruchomić cały kod napisany w JavaScripcie i współpracuje z jego bibliotekami – dlatego też nazywany jest nadzbiorem JavaScript.

Instalacja TypeScript

Aby uruchomić poprzedni kod w TypeScript, należy najpierw zainstalować kompilator TypeScript za pomocą menedżera pakietów npm (jeśli masz zainstalowane node.js):

npm install -g typescript

Możesz też pobrać go bezpośrednio ze strony Microsoft: Strona pobierania. Alternatywnie możesz użyć TS plac zabaw, aby zobaczyć jak kod TS jest transpilowany do JS.

Po wykonaniu instalacji, możesz ustawić konfigurację projektu w pliku tsconfig.json i użyć dowolnego IDE lub edytora tekstu, aby napisać kod w TypeScript i zapisać go z rozszerzeniem .ts.

Możesz nadal nie definiować typu zmiennej, a TypeScript spróbuje go wydedukować. Natomiast w przypadku, gdy do zmiennej „feeling” przypiszemy wartość innego typu, niż ten który został użyty przy pierwszej inicjalizacji (w naszym przypadku String) kompilator zgłosi błąd.

Dla przejrzystości i łatwiejszej konserwacji kodu zaleca się jednak stosowanie adnotacji typu:

var feeling: string = "happy";

To jednak nie wszystko!

TypeScript posiada szereg innych funkcji ułatwiających pracę programistom.

Charakterystyczne cechy TypeScript

TypeScript oferuje szeroki wachlarz funkcji, a każda nowa wersja wzbogacana jest o kolejne udogodnienia. Na przykład w wersji 4.0 dodano m.in. typy krotek wariadycznych, niestandardowe fabryki JSX, wnioskowanie właściwości klas z konstruktorów. Do ważnych cech TypeScript należą:

• Wsparcie dla koncepcji programowania obiektowego, takich jak interfejsy, dziedziczenie, klasy i generyki.
• Wczesne wykrywanie błędów.
• Wsparcie IDE poprzez sprawdzanie składni i podpowiedzi.
• Łatwiejsze debugowanie na etapie pisania kodu.
• Transpilacja do JavaScript.
• Stosowany zarówno w aplikacjach po stronie serwera, jak i klienta.
• Obsługa wielu platform i przeglądarek.
• Obsługa wszystkich bibliotek i rozszerzeń JS.

Dlaczego potrzebujemy TypeScript? (Przewaga TypeScript nad JavaScript)

Microsoft przez dwa lata używał TypeScript w swoich wewnętrznych projektach, zanim udostępnił go publicznie w 2012 roku. Stworzono typowany JavaScript, aby łatwiej testować kod w aplikacjach korporacyjnych klasy produkcyjnej. Możesz nadal wykorzystywać zalety dynamicznego typowania, ale też jawnie określać typ zmiennej, kiedy jest to naprawdę potrzebne.

Rozważmy poniższy kod:

var mynum = //pobierz od użytkownika;

addten(number){

return number + 10;

}

Oczekujemy, że wynik zawsze będzie liczbą. Co jednak jeśli użytkownik poda wartość „owca”? Otrzymamy wynik „owca10” – idealnie byłoby, gdybyśmy poinformowali użytkownika, że ta operacja jest niemożliwa!

Ponadto, gdy mamy do dyspozycji informacje o typie, edytory tekstu i IDE są znacznie bardziej użyteczne i pomagają w uniknięciu błędów w czasie wykonywania. Refaktoryzacja kodu w późniejszym czasie staje się łatwiejsza.

Czy to oznacza, że nie potrzebujemy JavaScript? (Wady TypeScript w porównaniu z JavaScript)

TypeScript można traktować jako rozszerzenie JavaScript, ale na pewno nie jako jego zamiennik.

W przypadku mniejszych fragmentów kodu użycie TypeScript może być zbędnym obciążeniem – instalacja, kompilacja i transpilacja będzie niepotrzebna. W przypadku JavaScript, możesz po prostu umieścić swój skrypt w pliku HTML i od razu zacząć działać. Debugowanie kodu jest łatwiejsze, ponieważ po wprowadzeniu zmian wystarczy odświeżyć przeglądarkę.

Bezpośrednie porównanie

Teraz, gdy znamy już cechy i zalety zarówno TypeScript, jak i JavaScript, przejdźmy do bardziej szczegółowego porównania:

TypeScript
JavaScript
Język z typowaniem, który pozwala na wczesne wykrywanie błędów kompilacji.
Błędy mogą pojawiać się dopiero w trakcie działania aplikacji.
Idealny do dużych projektów, ponieważ zwiększa czytelność i ułatwia konserwację kodu.
W miarę wzrostu projektu, testowanie i debugowanie staje się trudniejsze – stąd JS jest bardziej odpowiedni do mniejszych projektów.
Nadzbiór JS, tzn. ma wbudowane funkcje takie jak programowanie obiektowe, sprawdzanie typu i inne.
Język skryptowy używany do dynamicznego generowania treści internetowych.
Wymaga instalacji i konfiguracji kompilatora.
Nie wymaga instalacji; kod JS można umieścić bezpośrednio w przeglądarce w znaczniku <script>.
Pliki .ts przed wykonaniem są zamieniane na pliki .js w procesie zwanym transpilacją.
Pliki .js mogą być dołączane bezpośrednio do plików HTML i uruchamiane za pomocą znacznika <src>.
Potężny i bogaty w funkcje, takie jak moduły, generyki, interfejsy.
Odpowiedni do prostych aplikacji internetowych, które nie wymagają zaawansowanych funkcji.
Używany do skryptów po stronie serwera i klienta.
Łatwy w obsłudze po stronie klienta, ale staje się ciężki i złożony w przypadku skryptów po stronie serwera.
Wykonanie wymaga czasu ze względu na proces kompilacji.
Nie wymaga kompilacji, co przyspiesza wykonanie.
Obsługuje zarówno typowanie statyczne, jak i dynamiczne.
Obsługuje tylko typowanie dynamiczne.
Adnotację typu możemy zdefiniować w następujący sposób:

var feeling: string = „happy”;

Nie możemy zdefiniować adnotacji typu, ponieważ typy nie są określane.

Podsumowanie

Jeśli chodzi o naukę, JavaScript może być naturalnym wyborem. Otwierasz plik, wpisujesz kod w znacznikach <script></script>, zapisujesz jako HTML i widzisz rezultat! Następnie możesz rozbudowywać swoją wiedzę, aby tworzyć bardziej dynamiczne treści.

Co więcej, jeśli pracujesz nad dużymi projektami, znajomość JavaScript ułatwi Ci naukę TypeScript.

Natomiast z perspektywy kariery i zarobków, jako programista TypeScript, będziesz bardziej elastyczny i komfortowo będziesz czuł się zarówno w projektach JS, jak i TS – dzięki czemu będziesz bardziej wartościowym pracownikiem. Zazwyczaj programiści TypeScript zarabiają od 110 000 do 147 000 USD rocznie, podczas gdy programiści JS otrzymują wynagrodzenie w przedziale 63 000 do 118 000 USD rocznie.