TypeScript – szybki start

Gdyby tylko mieć JavaScript, w który można dodać typy… Jak pomyśleli, tak zrobili. Dzięki temu KAŻDY działający do tej pory kod JavaScript nadal może być używany, ale nowy kod piszesz już “po bożemu”. A to wszystko dzięki językowi, który rozszerza możliwości starego dobrego JavaScriptu. Zobacz przykłady TypeScript. Naprawdę szybkie wprowadzenie do tematu.

Każdy, kto miał styczność z językami silnie typowanymi (Java, C#), gdy zaczyna pracować z JavaScriptem czuje pewien niedosyt. Nawet używając dobrych, płatnych narzędzi nie dostaje się tak dobrego wsparcia – brak (lub słabe) autouzupełniania kodu, brak (lub słabe) wsparcia dla refaktoryzacji, a także brak informacji, które dostaje się w trakcie kompilacji. Choć to ostatnie można uzyskać stosując narzędzia takiej jak JSlint.

Na początek

  • zainstalowany node
  • bardzo podstawowa wiedza o JavaScript
  • 2-3 minuty, jak sylabizujesz to 5 😉

Instalacja TypeScript

Zakładam, że masz zainstalowany node.js.

Otwórz terminal i za pomocą prostej komendy zainstaluj:

$ npm install -g typescript

Sprawdź, czy się dobrze zainstalował, i zobacz, czy masz dostępny w terminalu tsc.

Prosty skrypt TypeScript

Spójrz na ten prosty kod:

var greeting = 'Hello world';
function hello() {
    console.log(greeting);
}
hello();

Tak, to jest TypeScript!

– Ale to wygląda jak JavaScript… – powie uważny obserwator.

Tak, bo każdy poprawny kod JavaScript jest poprawnym kodem TypeScript. Ponieważ TypeScript jest nadzbiorem JavaScriptu. Zatem każdy JS to TS, ale już nie każdy TS jest JS, o czym za chwilę.

Kompilacja

– Zaraz, zaraz? Co? Kompilacja. Serio? Może jeszcze klasy?

– Tak. I kompilacja i klasy (ale o tym później).

Aby skompilować* skrypt ts użyj komendy:

$ tsc script.ts

wygeneruje to plik script.js w tej samej lokalizacji. Zajrzyjmy do tego pliku:

var greeting = 'Hello world';
function hello() {
    console.log(greeting);
}
hello();

Ej, ten kod się nie zmienił. No nie, bo po co miał się zmieniać skoro kompilator TypeScript (dostępny jako komenda tsc – TypeScript Compilator) kompiluje z TS do JS. To był poprawny kod JS, zatem nie było czego tłumaczyć.

  • Kompilacja to tak naprawdę tłumaczenie z jednego języka na drugi, np: C -> asembler, Java-> bytecode, TypeScript -> JavaScript.

OK, to jakieś przykłady TypeScript, które się różnią od JavaScript

Skorzystam z tego samego kodu, jaki mamy powyżej, tylko zapiszę go używając dodatkowych feature’ów TS:

const greeting: string = 'Hello world';

function hello (text: string): void {
    console.log(text);
}

hello(greeting);

Co tu się stało? Dodałem typy. Jak widać zarówno stałe (const zamiast var, choć to już w najnowszych wersjach JS też już istnieją stałe) mogą mieć typ (dodany przez : string, jak i argumenty funkcji czy są, a funkcja może mieć zdefiniowany typ, jak i zwraca. Ta funkcja nic nie zwraca, stąd void. Po kompilacji tego kodu TS do JS w wynikowym pliku znajduję:

var greeting = 'Hello world';
function hello(text) {
    console.log(text);
}
hello(greeting);

Zatem widać, że kompilator TS po prostu “wypluł” nam dobrze znany kod JS.

Po co?

Trudno byłoby dziś wprowadzić nowy język, który jest przystosowany do nowoczesnych wymagań i rozmiarów aplikacji webowych, a jednocześnie byłby wspierany przez wszystkie środowiska. Stąd też uznano, że najrozsądniej byłoby zachować JavaScript jako język, który ostatecznie zostaje wykonany w przeglądarce, ale do samego wytwarzania aplikacji korzystać z bardziej przyjaznych technologii.

Po kilku miesiącach pracy z TypeScriptem widzę, że niestety JavaScript traci w nim swoją “hackerską” fantazję. Jednak jednocześnie (używając np. IntelliJ Ultimate – warto zapłacić, szczególnie, gdy się używa TS) daje niezwykle szybką i przyjemniejszą prace. Rzeczy, które w czystym JavaScript bywały karkołomnym zadaniem (np. większy refactoring) tu jest bułką z masłem.

Narcystycznie jedynie wspomnę, że przewidziałem to w mojej pracy magisterskiej, której część została opublikowana jako  JavaScript na poważnie – podrozdział “2.8 Asemblaryzacja JavaScript”, s. 60.

Przyjemnego testowania nowego języka 🙂

1 comment

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *