Jednym z najczęściej zadawanych pytań, które otrzymuję, jest: jaka jest różnica między JavaScript a Typescript?
Dowiedzmy Się…
Odkąd zacząłeś kodować, JavaScript (JS) byłby częścią wszystkich twoich projektów front-endowych. Jeśli jesteś trochę zaznajomiony z JS, pomyśl o TypeScript jako o JS plus kilka dodatkowych funkcji, które sprawiają, że twoja aplikacja jest czystsza i pisana. TypeScript został opracowany przez firmę Microsoft jako projekt typu open source, aby usprawnić tworzenie kodu JS i na wczesnym etapie wyłapywać błędy kompilacji.
W tym artykule omówimy kilka ważnych cech JavaScript i TypeScript oraz różnice między obydwoma językami skryptowymi.
Spis treści:
Co to jest JavaScript?
JavaScript jest używany do tworzenia skryptów po stronie klienta. Możesz utworzyć skrypt na stronie HTML lub utworzyć plik z rozszerzeniem .js i dołączyć go do swojego pliku HTML. Typowym przykładem w świecie rzeczywistym, w którym można zobaczyć JavaScript, jest walidacja strony logowania, gdzie wyświetlany jest błąd, gdy nazwa użytkownika/hasło jest niepoprawne.
Napiszmy prosty kod JS i uruchommy go w przeglądarce:
Utwórz plik example.html i dodaj następujący kod:
<script> feeling = 'happy'; feeling = 23; </script>
Ten prosty kod deklaruje zmienną i przypisuje jej wartość happy (string). Tej samej zmiennej możemy przypisać wartość innego typu (liczbę). JavaScript by na to nie narzekał i możemy uruchomić kod w dowolnej przeglądarce bez żadnych problemów. Teraz uzyskajmy wartość uczucia od użytkownika:
Nasz kod HTML będzie wyglądał tak:
<input type = "textbox" id = "howyoufeel">
a skrypt będzie:
feeling = document.getElementById("howyoufeel").value;
O ile nie umieścimy w skrypcie wyraźnych kontroli, JS zaakceptuje dowolną wartość od użytkownika i przekaże ją dalej. Możesz więc umieścić coś takiego jak 234, @.#$% itd. w zmiennej uczucia.
Funkcje JavaScript
Z powyższego możemy zaobserwować następujące cechy JavaScript:
- Słabo napisany język skryptowy
- Używany do skryptów po stronie klienta i serwera (z node.js)
- Elastyczny i dynamiczny
- Obsługiwane przez wszystkie główne przeglądarki
- Lekkie i interpretowane
Jeśli jesteś zainteresowany opanowaniem języka JavaScript, sprawdź to Kurs Udemy.
Co to jest TypeScript?
Aplikacja w świecie rzeczywistym będzie miała wiele walidacji i kontroli dynamicznych. W przypadku takich aplikacji kod JavaScript stanie się w pewnym momencie trudny do przetestowania, głównie z powodu braku sprawdzania typu. Pozyskując wartości od użytkowników, ważne jest, aby uzyskać je od samego początku. W tym miejscu pojawia się TypeScript.
TypeScript jest silnie wpisany i ma kompilator, który narzeka, jeśli nie zdefiniujesz typu zmiennej.
Zarówno JavaScript, jak i TypeScript są zgodne ze specyfikacjami ECMAScript dla języka skryptowego. Typescript może uruchamiać cały kod JavaScript i obsługuje wszystkie jego biblioteki – dlatego nazywa się go nadzbiorem JavaScript.
Instalacja TypeScript
Aby wykonać nasz poprzedni kod w TypeScript, musimy zainstalować kompilator TypeScript przy użyciu pakietu npm (jeśli masz węzeł js).
npm install -g typescript
lub pobierz go bezpośrednio z oficjalnego Strona pobierania Microsoft. Możesz także użyć TS plac zabaw aby zobaczyć, jak kod jest transkompilowany z ts na js.
Gdy to zrobisz, możesz skonfigurować ustawienia projektu w tsconfig.json i użyć dowolnego IDE lub edytora tekstu, aby napisać kod TypeScript i zapisać go jako .ts.
Nadal możesz uciec, nie definiując typu zmiennej, a TypeScript może wywnioskować typ danych. Otrzymasz jednak błąd „uczucia”, jeśli podasz cokolwiek innego niż pierwszy użyty typ (w naszym przypadku String) – podczas samej kompilacji.
Zawsze dobrze jest, aby kod miał adnotację typu dla łatwości konserwacji i łatwości użycia:
var feeling: string = “happy”;
To nie to!
TypeScript zapewnia wiele innych funkcji ułatwiających życie programistom.
Funkcje TypeScript
Typescript ma bogaty zestaw funkcji, a każde wydanie zawiera nowe funkcje, dzięki którym programowanie jest łatwiejsze niż wcześniej. Na przykład w nowej wersji (4.0), kilka dodatkowych funkcji są typami krotek wariadycznych, niestandardowych fabryk JSX, wnioskowaniem właściwości klas z konstruktorów itp. Niektóre typowe cechy TypeScript to:
- Obsługuje koncepcje programowania obiektowego, takie jak interfejs, dziedziczenie, klasa. generyczne
- Wczesne wykrywanie błędów
- Obsługa IDE ze sprawdzaniem składni i sugestiami
- Łatwiejsze debugowanie podczas pisania
- Trans-kompiluje do JavaScript
- Używany zarówno do aplikacji po stronie serwera, jak i po stronie klienta
- Obsługa wielu platform i przeglądarek
- Obsługuje wszystkie biblioteki i rozszerzenia JS
Dlaczego potrzebujemy TypeScriptu? (Przewaga TypeScript nad JavaScript)
Firma Microsoft opracowała i używała TypeScript przez dwa lata w swoich wewnętrznych projektach, zanim upubliczniła go w 2012 roku. Stworzyli typowany JavaScript, ponieważ łatwiej było przetestować kod dla aplikacji korporacyjnych klasy produkcyjnej. Nadal możesz korzystać z funkcji dynamicznego pisania, ale także wpisywać zmienne, gdy jest to naprawdę potrzebne.
Rozważ poniższy kod:
var mynum = //get from user;
addten(number){
return number + 10;
}
Spodziewalibyśmy się, że wynik będzie zawsze liczbą. Ale co, jeśli użytkownik poda „owce”? Wyjściem będzie owca10 – najlepiej, gdybyśmy powiedzieli użytkownikowi, że ta operacja nie jest możliwa!
Ponadto, gdy masz dostępne informacje o typie, edytory tekstu i środowiska IDE stają się wygodniejsze w użyciu i oszczędzają błędy w czasie wykonywania. Łatwiej jest również dokonać refaktoryzacji kodu w późniejszym czasie.
Czy to oznacza, że nie potrzebujemy JavaScript? (Wady TypeScript nad JavaScript)
Możesz myśleć o TypeScript jako o rozszerzeniu JavaScript, ale z pewnością nie o jego zamienniku.
W przypadku mniejszych fragmentów kodu TypeScript może stać się obciążeniem — instalowanie, kompilowanie i transkompilowanie będzie zbędne. Dzięki JavaScript możesz po prostu wpisać swój skrypt w HTML i zadziała. Łatwiej jest też debugować kod, gdy możesz po prostu odświeżyć przeglądarkę za każdym razem, gdy coś zmienisz.
Bezpośrednie porównanie
Teraz, gdy zrozumieliśmy funkcje i zalety zarówno TypeScript, jak i JavaScript, przejdźmy przez więcej porównań:
Maszynopis
JavaScript
Wpisany język, który wcześnie wyłapuje błędy kompilacji
Możesz znaleźć błędy w czasie wykonywania
Nadaje się do dużych projektów, ponieważ poprawia łatwość konserwacji i czytelność kodu
W miarę dodawania większej ilości kodu staje się trudny do testowania i debugowania, dlatego JS nadaje się do małych projektów
Nadzbiór JS, tj. funkcje takie jak orientacja obiektowa, sprawdzanie typu i inne
Język skryptowy obsługujący dynamiczne tworzenie treści internetowych
Wymaga instalacji i konfiguracji kompilatora
Nie ma potrzeby instalacji; Kod JS można napisać bezpośrednio w przeglądarce za pomocą tagu , zapisujesz jako HTML – zobaczysz wyniki! Następnie możesz na nim budować, aby tworzyć bardziej dynamiczną zawartość.
Co więcej, gdy pracujesz nad aplikacją na dużą skalę, znajomość języka JavaScript pomoże ci łatwo przejść do TypeScript.
Jednak z perspektywy kariery i płacy, jako Deweloper TypeScript, będziesz bardziej elastyczny i komfortowy zarówno z projektami JS, jak i TS – a więc zdecydowanie lepszym atutem na rynku. Zazwyczaj programiści TypeScript otrzymują wynagrodzenie od 110 000 do 147 000 USD, podczas gdy programiści JS otrzymują wynagrodzenie od 63 000 do 118 000 USD rocznie.