Czy warto zamienić JavaScript na TypeScript

Wprowadzenie

Od lat zajmuję się JavaScriptem i nie planowałem wychodzić poza te techniczne ramy. Bezpieczniej jest trzymać się tego, co znane, natomiast próby nauki zbyt wielu języków programowania mogą być zniechęcające — powtarzałem do siebie.

Nauka JavaScriptu już teraz jest dość czasochłonna i nikt tak naprawdę nie jest w stanie jej opanować, ponieważ API jest stale aktualizowane wraz z dokumentacją, a język ten wciąż ewoluuje. Trzeba też nauczyć się wielu frameworków i bibliotek.

Na szczęście przejrzałem na oczy, kiedy między kolejnymi zatrudnieniami szukałem pracy. Firmy poszukiwały programistów poliglotów, co zasadniczo oznacza osobę, która zna i potrafi posługiwać się kilkoma językami programowania.

Poszerzaj wiedzę

Wtedy właśnie zdałem sobie sprawę, że JavaScript to za mało, jeśli chcesz się wyróżnić, musisz umieć posługiwać się różnymi językami programowania. Zdecydowałem się więc na naukę języków TypeScript i Python. Jak na ironię, udało mi się dostać pracę, ale firma wymagała ode mnie używania wyłącznie JavaScriptu, przez co niestety zapomniałem większość z tego, czego nauczyłem się do tej pory w tych językach, jako że nie używałem ich na co dzień.

Miało to miejsce, zanim stałem się aktywny na Twitterze i zanim zacząłem prowadzić bloga, więc naprawdę nie rozumiałem koncepcji publicznego budowania i pracy nad projektami pobocznymi. Uzasadniałem to faktem, że mam już pracę, więc nie muszę zajmować się programowaniem także w weekendy.

Znalezienie pracy w czasie pandemii

Po roku 2021 wszystko się zmieniło. To już drugi rok tej globalnej pandemii. Dopiero po około 6 miesiącach dostałem przyzwoitą ofertę pracy i od tamtej pory pracuję właśnie w tej firmie. W tym czasie pracowałem nad projektami z backendem w Pythonie i Kotlinie. Miałem więc styczność z różnymi językami.

JavaScript jest wciąż jednym z najpopularniejszych języków programowania na świecie i zawsze będzie na niego duże zapotrzebowanie. Znalazł się on na pierwszym miejscu w badaniu Stackoverflow 2021, natomiast TypeScript znalazł się na miejscu 7. Skoro więc JavaScript jest tak popularny i ceniony, po co zawracać sobie głowę nauką TypeScriptu?

Dlaczego powinieneś nauczyć się języka TypeScript

Mimo faktu, że JavaScript jest tak dobry, to w porównaniu z innymi nowoczesnymi językami programowania nadal ma sporo słabych stron. I niestety, ale jest wiele osób, które z różnych powodów nie lubią JavaScriptu.

TypeScript jest w istocie nowoczesnym sposobem tworzenia projektów w języku JavaScript. Język ten kompiluje się do postaci nieprzetworzonego JavaScriptu, dzięki czemu Twoja baza danych może być nadal odczytywana przez przeglądarkę i innych programistów, którzy nie znają TypeScript. Składnia jest oparta na JavaScript, tak więc nawet jeśli nie znasz TypeScript, będziesz w stanie zrozumieć, co się dzieje.

TypeScript stara się rozwiązać wiele problemów, z którymi boryka się JavaScript, co zbliża ten język do innych nowoczesnych języków programowania. Moim zdaniem każdy, kto nie znosi JavaScriptu, może zakochać się w TypeScripcie, lub przynajmniej znajdzie mniej powodów, by na niego narzekać.

JavaScript vs. TypeScript

Różnic między nimi jest sporo, omówię tutaj niektóre z nich.

Błędy kompilacji

TypeScript jest w stanie sygnalizować błędy w czasie kompilacji podczas developmentu. Jest to bardzo dobra funkcja, ponieważ zmniejsza prawdopodobieństwo wystąpienia błędów podczas uruchamiania aplikacji po jej zbudowaniu i uruchomieniu.

JavaScript jest w stanie dostrzec te błędy tylko w runtimie, więc istnieje duże prawdopodobieństwo, że debugowanie będzie znacznie wolniejsze, ponieważ wykonuje się więcej niepotrzebnych czynności sprawdzających. Lepsze narzędzia dostępne w języku TypeScript zapewniają znacznie lepsze wrażenia podczas pisania kodu.

Typowanie statyczne vs dynamiczne

JavaScript używa dynamicznego typowania, podczas gdy TypeScript używa typowania statycznego. Dzięki dynamicznemu typowaniu można ponownie przypisywać zmienne, ponieważ typ danych może się zmieniać. Nie jest to możliwe w przypadku typowania statycznego, ponieważ typ danych jest zdefiniowany, co oznacza, że próba przypisania innego typu danych spowoduje pojawienie się błędu kompilacji. Każda z metod ma swoje wady i zalety.

// This is valid JavaScript code
let num = 10;
num = "10";

// You will get the error Type 'string' is not assignable to type 'number'.
let num: number = 10;
num = "10";

Opisywanie danych za pomocą interfejsu

TypeScript może używać w kodzie interfejsu, który w dużym stopniu opisuje strukturę obiektu w aplikacji. Określa on ogólną składnię wymaganą dla obiektu, dzięki czemu można go używać do tworzenia dokumentacji i śledzenia problemów w edytorze kodu.

Warto zauważyć, że kompilator języka TypeScript nie przekonwertuje składni interfejsu na język JavaScript. Jest on używany tylko do sprawdzania typu, znanego również jako “duck typing” lub “structural subtyping”.

// Describe the shape of objects in your code.
interface Series {
id: number;
seriesName: string;
releaseDate: number;
}

// Use the interface for type checking in your object.
const series: Series = {
// The id needs to be a number
id: 1,
// The series name needs to be a string
seriesName: 'The Book of Boba Fett',
// The release data needs to be a number
releaseDate: 2021,
};

console.log(series);

Moduły CommonJS vs moduły ES

Node.js domyślnie używa modułów CommonJS i każdy, kto jest z nim zaznajomiony, wie o składni require.  Dla porównania, gdy używasz Node.js z TypeScript, masz możliwość użycia instrukcji require, import czy export.  Oczywiście istnieją sposoby, aby działały one także w natywnym JavaScripcie, jeśli zrobisz dobry research.

Moduły CommonJS w JavaScript

const express = require('express');

Moduły ES w TypeScript

import express from 'express';

Podczas korzystania z TypeScript otrzymujesz dostęp do pliku tsconfig.json, który umożliwia zmianę wielu ustawień, w tym target. Umożliwia ustawienie wersji języka JavaScript dla wyjściowych plików JavaScript. Mogą to być na przykład ES2015, ES2016, ES2017 itd.

Wady TypeScriptu

TypeScript całkiem nieźle sobie radzi, ale ma też kilka wad, o których należy pamiętać. Po pierwsze TypeScript nie działa w przeglądarce, więc przed użyciem kodu trzeba go skompilować do JavaScriptu.

Na szczęście TypeScript ma kompilator, więc po jego skonfigurowaniu pliki TypeScript będą automatycznie kompilowane do JavaScriptu, i na szczęście proces ten jest dość szybki. Nie musisz się więc martwić, że będziesz czekał przez kilka minut na skompilowanie kodu – proces ten trwa zazwyczaj kilka sekund.

Kolejną wadą jest fakt, że trzeba będzie napisać nieco więcej kodu, zwłaszcza jeśli chcemy zastosować statyczne sprawdzanie typów. Nie uważam tego jednak za wadę, ponieważ koniec końców piszesz bardziej wydajny i lepszy kod, który będzie łatwiejszy w utrzymaniu.

Trzeba też wiedzieć, że oprócz normalnych pakietów, których używasz, będą potrzebne pakiety deklaracji typu. Pakiety deklaracji typów opisują obiekty wbudowane. Pliki deklaracji umożliwiają deklarację typów lub wartości, dzięki czemu nie trzeba dostarczać żadnych implementacji dla tych wartości.

Nie zawsze jednak tak się dzieje, ponieważ niektóre pakiety mają już definicje typów, ale nie wszystkie. Łatwiej będzie to zrozumieć na poniższym przykładzie Express Node.js.

Aplikacja Express w JavaScript

npm i express

const express = require('express');

const app = express();

app.get('/', (req, res) => {

res.send('Home Route');

});

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`Server running on port ${port}, http://localhost:${port}`));

Aplikacja Express w TypeScript

npm i express @types/express @types/node

import express, { Response, Request } from 'express';

const app = express();

app.get('/', (req: Request, res: Response) => {

res.send('Home Route');

});

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`Server running on port ${port}, http://localhost:${port}`));

Wsparcie TypeScript

Język TypeScript ma niezłe wsparcie i jeśli wybrałeś edytor kodu Visual Studio Code, to TypeScript jest traktowany jak pasażer pierwszej klasy, ponieważ ten edytor kodu i język opracował Microsoft.

Prawie wszystkie popularne frameworki JavaScriptu obsługują również TypeScript. Mówimy tutaj także o React, Angular, Vue i Svelte. Framework express.js jest również kompatybilny z językiem TypeScript, podobnie jak inne frameworki Node.js. Nic więc nie stoi na przeszkodzie, aby używać języka TypeScript we frontendzie i backendzie aplikacji.

Kolejną zaletą jest to, że można teraz natywnie używać modułów ES w back-endzie i front-endzie. Jeśli więc na przykład tworzysz aplikację z back-endem Node i front-endem React, to można teraz używać instrukcji import i export dla obu tych elementów i nie trzeba już używać instrukcji require modułów CommonJS.

Jak uczyć się języka TypeScript

Nauczyłem się języka TypeScript ze Scrimba, a także z innego niezłego kursu na Udemy. Jeśli znasz już język JavaScript, zapoznanie się z językiem TypeScript nie zajmie Ci dużo czasu. Jeśli jesteś początkującym użytkownikiem JavaScriptu albo dopiero zaczynasz uczyć się podstaw, to lepiej poczekaj z nauką TypeScriptu do czasu, aż zdobędziesz większe doświadczenie.

Learn Typescript for free

Understanding TypeScript - 2022 Edition

Oryginał tekstu w języku angielskim przeczytasz tutaj.