TypeScript, czyli pomoc w okiełznaniu JavaScript

Jak większość programistów, która wychowała się na tworzeniu aplikacji okienkowych nie jestem wielkim fanem JavaScirpt’u. Niemniej jednak język ten zyskuje coraz większą popularność, nie tylko wśród Web Developerów. Nie można zignorować tego jak bardzo największe firmy (takie jak Microsoft) zachęcają do tworzenia aplikacji mobilnych za pomocą HTML i JavaScript, dlatego myślę, że w niedługim czasie o ile już nie są, programiści tego języka będą bardzo cenni.

In JavaScript, arrays are objects, functions are objects, regular expressions are objects, and, of course, objects are objects.

Sam JavaScript jest językiem dla mnie językiem dziwnym. Można w nim zrobić rzeczy, o jakich nie śniło się nawet zwykłym programistom języków C – podobnych. Niestety zbyt duże możliwości jakie daje ten język nakładają się na to, że o wiele ciężej wykryć błąd w programie, bo tak na prawdę kompilator nie wie czy to błąd, czy użyliśmy tego specjalnie.

Programiści języków statycznie typowanych przyzwyczajeni są, że kompilator im krzyknie kiedy będą chcieli przesłać stringa, zamiast inta. Stety/niestety w JavaScripcie nie było takich możliwości. Ostatnio jednak coraz większą popularność zyskują biblioteki pozwalające na okiełznanie trochę samego JavaScript. Jedną z tych bibliotek, jest rozwijana przez Microsoft, TypeScript.

TypeScirpt

TypeScript w żaden sposób nie zastępuje kodu JS, jest bardziej rozszerzeniem jego składni. Edytor TypeScript wyświetla na raz zarówno kod TS jak i JS, dzięki czemu wiemy, czy na pewno chodzi nam o to co piszemy. Na stronie typescriptlang.org jest dostępnadokumentacja, z której możemy dowiedzieć się jakie funkcjonalności posiada biblioteka. W niniejszym poście postaram się przedstawić tylko największe zalety tego rozszerzenia.

Sprawdzanie typów

selekcja
JavaScript nie jest językiem silnie typowanym, więc zmienna, która jest napisem, za chwilę może być liczbą, lub funkcją. Tak samo zmienne przesyłane do funkcji nie mają w żaden sposób sprawdzanych typów. Tak więc jeśli chcemy być 100% pewni, że przesłana zmienna jest odpowiedniego typu musimy sprawdzać za każdym razem typy argumentów. Na szczęście TypeScript wprowadza możliwość określenia jakiego typu argumentu oczekujemy w funkcji. Nie pozwala to jednak korzystać z przesilania funkcji, bo koniec końców i tak cały kod jest konwertowany na JS.

function add(a: number, b : number){
   return a + b;
}
var sum = add(2, 3);    //OK
sum = add(2.1, 2.3e3);  //OK
sum = add(2, "Ola");    //ERR

Jest to najprostszy przykład sprawdzania argumentów przesłanych do funkcji, Warto jednak zauważyć, że błąd, który wyskoczy przy ostatnim wywołaniu funkcji, wyskakuje jedynie w edytorze TypeScript, więc jeśli ktoś chciałby użyć tej funkcji z poziomu zwykłego JavaScript operacja byłaby w pełni dozwolona, co więcej funkcja zwróciłaby wynik: “2Ola”.

Sprawdzanie typów nie ogranicza się tylko do wartości przychodzących do funkcji, można również określić jakiego typu zmienną, funkcja zwróci. Jeśli tego nie zadeklarujemy, kompilator sam sprawdzi jaki typ zwracamy i zmienną zadeklarowaną z wartości zwróconej będzie traktować jako właśnie takiego typu.

function add(a: number, b : number) : string{
   //return a + b;             //ERR
   return (a + b).toString();  //OK
}

Ostatnią rzeczą, odnośnie sprawdzania typów, którą zamierzam opisać to sprawdzanie jaką funkcję przesyłamy jako argument. Jak było wspomniane na początku w JS nawet funkcje są obiektami, więc często funkcje przesyła się jako parametr innej funkcji. Dzięki określeniu interfejsu funkcji możemy zadeklarować, że oczekujemy funkcji, która przyjmuje liczbę i zwraca liczbę. Jest to coś na kształt delegatów w języku C#.

function doSomething (arg : string, foo : (a : number) => number){
   return arg + " : " + foo(2).toString();
}
var foo2 = function (x : number){
   return "-" + x;
}
/*
Supplied parameters do not match any signature of call target: Call signatures of types
'(x: number) => string' and '(a: number) => number' are incompatible
*/
var res = doSomething("Jan", foo2);     //ERR

Klasy

u have no class
JavaScript jest językiem, w którym klasy określamy poprzez prototyp. Każdy obiekt, posiada swój prototyp, do którego możemy dodawać funkcje, przez co zyskujemy coś na kształt klas. Dziedzicznie natomiast jest tak zawiłe, że trzeba się sporo napisać, żeby osiągnąć wymagany efekt. Na szczęście TypeScript pomoże nam również z tym. Dzięki dobrze znanej z języków C-podobnych składni można definiować klasy, prywatne bądź publiczne zmienne, oraz metody. Poniższy przykład posiada: prywatną zmienną, konstruktor, publiczną metodę oraz prywatną metodę. Podobnie jak we wcześniejszym przypadkach, prywatne zmienne oraz metody są tylko umowne w kodzie TypeScript. Więc z poziomu kodu JavaScript można zarówno się odwołać do zmiennej name jak i wywołać metodę setName.

class MyClass {
   private name : string;

   constructor (nam : string){
      this.setName(nam);
   }
   getName() {
      return this.name;
   }
   private setName(value){
      this.name = value;
   }
}
var ob = new MyClass("Ala");
document.writeln(ob.getName());  
//Alaob.setName("Ola");  //ERR
ob.name = "Ola";    //ERR

Dziedziczenie

Dziedziczenie obiektów jest banalnie proste i oszczędza pisania bardzo wielu linijek kodu. Przykład ze strony typescriptlang.org świetnie pokazuje wszystkie zalety dziedziczenia.

class Animal {
   constructor(public name: string) { }
   move(meters: number) {
      alert(this.name + " moved " + meters + "m.");
   }
}
class Snake extends Animal {
   constructor(name: string) { super(name); }
   move() {
      alert("Slithering...");
      super.move(5);
   }
}
class Horse extends Animal {
   constructor(name: string) { super(name); }
   move() {
      alert("Galloping...");
      super.move(45);
   }
}

var sam = new Snake("Sammy the Python");
var tom: Animal = new Horse("Tommy the Palomino");
sam.move();
tom.move(34);

W obu przypadkach zostaną wywołane funkcje przeciążające.

Intefejsy

Implementowanie interfejsów, chociaż podobne jest do dziedziczenia po klasach, to używane jest do trochę innych rzeczy. Dlatego twórcy TypeScript również pozwolili na tworzenie interfejsów w JavaScripcie. W interfejsach możemy deklarować zmienne bądź metody publiczne. Klasy implementujące te interfejsy muszą zagwarantować obsługę wszystkich metod oraz stworzenie zmiennych przedstawionych w interfejsie. Implementacja odbywa się za pomocą słówka implements, czyli po Javovemu.

interface SayHello {
   hello ();
}
class Animal {
   name : string;
   constructor (name : string){
      this.name = name;
   }
}
class Snake extends Animal implements SayHello{
   hello(){
      return ("ssss " + this.name + " ssss");
   }
}
class Duck extends Animal implements SayHello {
   hello (){
      return ("quack " + this.name + " quack");
   }
}

function echo (soundSource : SayHello){
   alert(soundSource.hello());
   alert(soundSource.hello());
}

var tom = new Snake ("Tom");
var james = new Duck("James");
echo(tom);
echo(james);

Dodatkowe linki
Aby móc korzystać z TypeScript w Visual Studio, trzeba najpierw pobrać plugin. Polecam również zainstalować dodatek do Visual Studio – Web Essentials 2012, który pozwoli na kompilacje kodu TS na JS z poziomu Visual Studio. Poza tym świetny edytor do nauki TypeScript można znaleźć na stronie domowej TypeScript.

Windows 8 Extensions

Już jakiś czas temu udostępniłem na github’ie projekt o nazwie Win8Extensions, w którym miałem umieszczać klasy, które mogą się przydać podczas pisania aplikacji na Windows 8. Na razie aplikacje Windwos Store, które stworzyłem można liczyć na palcach jednej ręki, natomiast z doświadczenia wiem, jakie klasy są zawsze potrzebne podczas pisania tego typu aplikacji. Stworzyłem ten projekt również po to aby zobaczyć co inni myślą o moim kodzie. Jeśli ktoś zajrzy w kod z chęcią wysłucham co powinienem poprawić… Oczywiście komentarze staram się pisać, ale ciężko mi to idzie ;)

W projekcie tym możecie znaleźć przede wszystkim różnego rodzaju konwertery, które nie są tworzone tworzeniu nowego projektu Windows Store, a które mogą się przydać. Między innymi ObjectToVisibilityConverter, który sprawdza czy obiekt jest pusty (null) i jeśli tak zwraca Visibility.Collapsed. W ten sposób możemy ukryć na ekranie ramki, które mają wyświetlić obiekt, ale tylko jeśli nie jest on pusty.

Inną ciekawą klasą, która może zainteresować programistów Windows Store Apps jest ApplicationDataSerializer, który za pomocą jednej funkcji zapisuje i odczytuje wybrany obiekt z i do podręcznej pamięci programu. Obecnie korzysta on z seriazliacji do json’a, natomiast łatwo go przerobić tak aby serializował do xml’a.

Z biegiem czasu, jeśli jeszcze będę pisał aplikacje na Windows 8 będę starał się dodawać nowe rzeczy do biblioteki, może jakieś nowe kontrolki… już nawet mam kilka pomysłów co to mogłoby być. Niczego jednak nie obiecuje, bo jest to jednak projekt robiony w wolnym czasie, więc może być różnie.

Tak jak pisałem wcześniej, jest to moja pierwsza biblioteka OpenSource, więc jeśli ktoś będzie miał jakieś opinie lub pomysły co można tam jeszcze uwzględnić, niech do mnie napisze. No i oczywiście zachęcam do korzystania z tych klas w swoich własnych projektach.

Win8Extensions na GitHub

Zainwestuj w swój sprzęt

Ostatnio zacząłem się interesować trochę tym w co warto inwestować. Właśnie przeczytałem książkę “Bogaty Ojciec, Biedny Ojciec“, w której autor przedstawia jak budować swoje aktywa, tak, aby pieniądze zaczęły na siebie zarabiać. Polecam tą książkę wszystkim, którzy myślą o tym, żeby rozkręcić swój biznes lub po prostu nie widzą siebie, jako pracownika etatowego.

Wracając do tematu, przekładając to na świat zwykłego programisty. Z doświadczenia wiem, że zarówno studenci jak i pracujący programiści większość dnia spędzają przed komputerem. Nie jest to tylko czas spędzony w pracy czy na uczelni, jeśli programowanie jest czyjąś pasją / uzależnieniem, to po powrocie do domu, fotel przed komputerem jest miejscem, gdzie spędza się najwięcej czasu. W końcu to komputer jest naszym największym aktywem, to on na nas zarabia.

W dzisiejszych czasach naprawdę nie trudno jest zarobić jakieś pieniądze na boku, nie mówię tu o nielegalnym dorabianiu na drugi etat, ale o wciąż rosnącym zapotrzebowaniu rynku na różnego rodzaju aplikacje. Najlepszym przykładem są tutaj aplikacje mobilne, których tworzenie wydaje się dosyć proste, a mogą wygenerować znaczny zysk. Jedyne co potrzeba do zarabiania na aplikacjach mobilnych to programista i komputer.

Wiele się mówi, że programiści powinni inwestować w siebie, kupno nowych książek o programowaniu jest dobrą inwestycją, tak samo poznanie nowego języka programowania. Dlatego raz na jakiś czas, jeśli mamy już wystarczająco książek a został jakiś grosz, który możemy wydać, może warto go zainwestować właśnie w komputer.

system-stats

Nie posiadam jakiegoś mega wypasionego komputera, ale uważam, że dobry sprzęt jest niezbędny jeśli chcemy stworzyć coś na prawdę dobrego. Dlatego 4 GB ramu i coś szybszego od Pentium 4, byłoby bardzo wskazane. Co jeszcze może ułatwić i przyspieszyć pracę programiście?

  • Wygodny fotel – wiele osób pisało o tym, czemu wygodny fotel jest inwestycją nie tylko w wasze zdrowie, ale również w efektywność,
  • Dodatkowy monitor – na ten luksus już nie wszystkich może stać, sam nie miałem okazji pracowania na dwóch monitorach dłużej niż przez godzinę, ale z doświadczenia wiem, że czasami przydaje się kawałek dodatkowego miejsca na ekranie,
  • Dysk SSD – taaak! W dzisiejszych czasach dyski te są nadal drogie, natomiast kupno dysku ssd pod system (120GB) kosztuje ok 350 zł, więc myślę, że warto zainwestować taką kwotę jeśli czas czekania na otwarcie Visual Studio zmaleje 3 krotnie.
  • Szybki internet – szybki internet znacznie przyspiesza wyszukiwanie informacji i z przykrością widzę jak niektóre firmy informatyczne oferują swoim pracownikom jakieś strasznie wolne łącza na których znalezienie odpowiedzi na swój problem zajmuje dłużej niż znalezienie odpowiedzi w książce.

Istnieje pewnie jeszcze sporo czynników, które przyspieszają pracę, natomiast chciałem tylko zwrócić uwagę, że warto czasami pomyśleć o rozbudowie swojego centrum dowodzenia, nawet jak rodzina czy znajomi znów narzekają, że “znowu wydałeś całą kasę na komputer!“.