Autor: Codenga 21.02.2022

Każdy, kto interesuje się front-endem prędzej czy później trafia na język TypeScript. Są różne opinie na jego temat, ale nie da się ukryć, że jest to istotna i rozpowszechniona technologia.

Czym więc jest TypeScript? I czy warto się tym językiem zainteresować? Sprawdźmy!

Co to jest TypeScript

Formalna definicja brzmi tak: TypeScript to nadzbiór języka JavaScript. Nie ma tu naprawdę nic skomplikowanego. Wyobraź sobie, że TypeScript po prostu rozszerza JavaScript o nowe możliwości.

W “czystym” JS (tak będziemy umownie nazywać JavaScript) brakuje wielu mechanizmów, które ułatwiają tworzenie złożonych, front-endowych projektów. I dlatego wymyślono język TypeScript (TS). Właśnie po to, aby tych ograniczeń się pozbyć, albo przynajmniej je zniwelować.

Wśród front-end developerów można spotkać podzielone opinie na temat TS. Jedni go uwielbiają a inni wręcz nie znoszą. Nie zmienia to faktu, że TS jest bardzo ważna częścią współczesnego front-end.

Jak używamy TypeScript

Zacznijmy od rzeczy podstawowej - jak zacząć pracę z TypeScript? Z technicznego punktu widzenia język TS jest kompilowany (inaczej: transpilowany) do JS. Dlaczego? Bo środowisku, w którym uruchamiasz kod “rozumie” język JS, ale nie rozumie TS.

Kod TypeScript trzeba więc przed uruchomieniem przekonwertować do wyjściowego kodu JavaScript. Sama konwersja to nic trudnego. To kwestia użycia odpowiedniego narzędzia. W praktyce takie narzędzia zazwyczaj są głęboko zintegrowane z całym “workflow” projektu a sam proces transpilacji/konwersji przebiega automatycznie.

Gdzie się używa TypeScript?

Na to pytanie odpowiemy ogólnikowo - TS można używać wszędzie tam gdzie dotychczas używaliśmy czystego JavaScript. Po transpilacji kod TS jest zamieniany na kod JS. I można go uruchamiać w przeglądarce albo na przykład w środowisku Node.js.

TS oferuje mechanizmy ułatwiające pracę nad złożonymi projektami. Oczywiście można go też użyć do pisania jakiś prostych skryptów dla przeglądarki ale to się trochę mija z celem. Generalnie, im bardziej rozbudowany projekt, tym więcej możesz zyskać używając TS.

TypeScript został stworzony przez Microsoft. Z założenia więc miał ułatwiać rozwój aplikacji w środowisku typowo korporacyjnym. TS został dość szybko zaadoptowany nie tylko przez wielkie firmy (Slack, Airbnb) ale też i przez różne projekty open-source (Angular, Vue).

Opanuj najważniejszy język współczesnej sieci Web. Zdobądź umiejętności niezbędne aby zostać front-end developerem.

Dowiedz się więcej

Jakie możliwości oferuje TS?

Wiesz już, że TS rozszerza JS o nowe możliwości. Popatrzmy więc teraz, co takiego TS nam oferuje.

Najważniejsze jest statyczne typowanie. Ten mechanizm sprawia, że już na etapie transpilacji TS do JS sprawdzany jest typ danych w zmiennej.

W JS można zadeklarować zmienną i przypisywać do niej dane dowolnego typu: string, number, boolean itp. Z jednej strony zapewnia to elastyczność ale z drugiej staje się przyczyną wielu problemów.

Mamy taki klasyczny przykład:

function sum(x, y) {
return x + y;
}
let result = sum("10", "5");
console.log(result);

Wynik to string "105". Funkcja powinna operować na liczbach ale podaliśmy argumenty typu string. I stąd wynik typu string - inny niż można by się spodziewać.

W TypeScript możesz podejść do tematu tak:

function sum(x: number, y: number) {
return x + y;
}
let result = sum("10", "5");
console.log(result);

Tutaj określamy, że argumenty muszą być typu number (czyli liczby). Jeśli spróbujemy taki kod przekonwertować do JS to transpilacja zostanie przerwana a TS zwróci nam błąd. to jest jedna z tych kluczowych możliwości, których brakuje w czystym JS. Czyli właśnie sprawdzanie typów przed wykonaniem kodu.

Inne możliwości

TypeScript ma też inne możliwości:

• Klasy oraz Interfejsy - to daje możliwość pisania kodu w stylu zbliżonym do tego znanego z języków typu Java, C# itp.
• Moduły
• Typy wyliczeniowe

Co ciekawe niektóre z tych mechanizmów są też dostępne w nowszych standardach “czystego” JS. To trochę świadczy o tym, że przez lata były spore braki w języku JS, które wreszcie dostrzeżono.

Podsumowanie

Używanie TS zamiast JS ma swoje istotne zalety: większa przewidywalność kodu, łatwiejsze utrzymanie złożonego projektu, potencjalna redukcja wielu błędów itp.

Z drugiej strony TS wprowadza kolejną warstwę złożoności:

• konieczność opanowania mechanizmów TypeScript np. typowania
• konieczność użycia narzędzi do transpilacji.

Zazwyczaj, przy bardziej złożonych projektach zalety jednak przeważają zdecydowanie nad wadami. Jeśli wiążesz swoją przyszłość z front-endem to czasem nie będziesz mieć po prostu wyjścia.

Możesz trafić na projekty, które są pisane w TS i w takiej sytuacji nie pozostaje nic innego jak się porządnie tego nauczyć. To nie jest dramatycznie trudne. Kod TS to po prostu JS wzbogacony o nowe mechanizmy. Jak znasz dobrze fundamenty JavaScript to opanowanie TS nie powinno sprawić większych problemów.