W JavaScripcie zdefiniować można sześć typów danych: String, Number, Boolean, Undefined, null oraz Object. Każdy z tych typów danych można bez problemu przypisać do zmiennych. Nic nie stoi na przeszkodzie aby do zmiennej, w której aktualnie znajduje się na przykład łańcuch znaków, przypisać liczbę. Mało tego, obie te wartości możemy też do siebie dodać. Powodem jest to, że JavaScript to język dynamicznego typowania. Dla ludzi, którzy nie znają zarządzających tym wewnętrznych mechanizmów, sytuacja ta może sprawić wiele kłopotów.
W TypeScripcie, sytuacja wygląda inaczej. TypeScript jest językiem statycznie typowanym… W pewnym sensie. Oznacza to, że zmienne przechowują tylko dane określonego zawczasu typu.
Statyczne typowanie w TS, wprowadza ograniczenia na elementy kodu takie jak zmienne czy funkcje. Przykładowo, jeżeli dana zmienna przechowuje łańcuch znaków, nie może zostać przypisana do niej liczba. Najlepiej zacząć od przykładu. Aby uzyskać takie same wyniki najlepiej mieć skonfigurowane działające środowisko tak, jak opisałem to w poprzednim poście.
W edytorze Atom otwieram plik main.ts, znajdujący się w katalogu projektowym TSa. Najważniejsze aby w tym samym projekcie znajdował się plik tsconfig.jsosn. Przy okazji, jeśli Atom na początku będzie na czerwono wyświetlał coś co wygląda jak błąd o treści JS Outdated, nie należy się tym przejmować. Po pierwszym zapisaniu pliku i transpilacji do JavaScriptu, powiadomienie to zniknie.
Dodam jeszcze na początku, że w TS, każdy konstrukcja JavaScriptu jest poprawna (o ile nie łamie zasad TSa). Na początku, przykładowy kod może wyglądać bardzo znajomo, ponieważ będę używał tylko omówione elementy TSa. Część prezentowanego kodu to będzie wciąż stary dobry JS. Jednak w miarę jak będę przedstawiać kolejne cechy języka, składnia TSa zacznie dominować w przykładach 🙂 .
W main.ts tworzę prostą zmienną przechowującą łańcuch znaków:
|
1 |
var dog = "maja"; |
To wystarczy aby stworzyć typowaną zmienną. Od teraz dog może przechowywać tylko łańcuchy znaków. Jeżeli najadę na jego nazwę kursorem pojawi się tooltip o treści var dog:string. Jeśli w programie pojawią się inne wywołania tej zmiennej, będę mógł sprawdzić jej zawartość w ten sam sposób. Natomiast jeśli spróbuję przypisać wartość innego typu, np:
|
1 2 |
var dog = 'maja'; dog = 1; |
pojawi się błąd. Nazwa zmiennej zostanie podkreślona na czerwono. Wystarczy na nią kliknąć aby zobaczyć teść błędu. W atomie wygląda to tak:
Czyli TypeScript już sam „domyśla się”, jakiego typu dane tworzona zmienna przechowuje i „krzyczy” na programistę, jeżeli ten przypisze do niej nie to co trzeba. Już samo to pomaga w uniknięciu ogromnej ilości błędów. Jednak fajnie byłoby widzieć jakiego typu jest zmienna zanim pojawi się błąd, bez konieczności najeżdżania myszką na jej nazwę. Na szczęście w TypeScript istnieje specjalna składnia, która pozwala na wyraźne zdefiniowanie typu zmiennej. Nie trzeba polegać na tym aby TS domyślił się. Prawda jest taka, że nie zawsze będzie w stanie się domyślić, co udowodnię nieco później.
Ale wracając do składni deklarującej typ zmiennej. Jest ona bardzo prosta, po prostu po nazwie zmiennej, należy wpisać dwukropek i nazwę typu jaki ma być przechowywany:
|
1 |
var dog: string = 'maja'; |
Od razu lepiej. Teraz nie trzeba sprawdzać jakiego typu jest zmienna, widać to gołym okiem.
W TypeScipt, wszystkie te wyrażenia są poprawne:
|
1 2 3 4 |
var dog; // niezdefiniowana zmienna o nieznanym typie var dog = "maja"; // zmienna zawierająca łańcuch znaków (niebezpośredni otrzymuje ona typ string) var dog: string; // zmienna przyjmująca tylko łańcuchy znaków, lecz bez wartości var dog: string = "maja"; // zmienna z zadeklarowanym bezpośrednio typem oraz wartością. |
Polecam stosowanie bezpośredniej deklaracji typu. Dzięki temu kod jest dużo czytelniejszy i pozwoli uniknąć wielu błędów.
Oto przykłady deklaracji podstawowych typów danych:
|
1 2 3 |
var name: string = 'maja'; var age: number = 5; var rabid: boolean = false; |
Mam tu łańcuch znaków, liczby oraz wartości boolowskie. Tak naprawdę, na początek pokrywa to większość przypadków. Ale jest jeszcze parę rzeczy, które mógłbym dodać. Pierwsza z nich to deklaracja tablic. Przytoczone wyżej deklaracje zmiennych mogą przechowywać tylko pojedyncze wartości. Aby stworzyć tablicę, po nazwie typu należy dodać parę nawiasów kwadratowych. W ten sposób powstanie zmienna, która może przechowywać tablicę, zawierającą dane tego typu. Przykład:
|
1 |
var nums: number[] = [1,2,3,4,5]; |
Teraz wiem, że zmienna nums przechowywać będzie tablicę zawierającą liczby. Dodatkowym plusem jest to, że teraz atom będzie podpowiadał mi jakich metod mogę użyć na tej zmiennej. Wystarczy, że zacznę pisać jej nazwę i postawie kropkę, tak jakbym chciał dostać się do jednego z jej pól. Wygląda to tak:
Prawdziwa moc tego pojawi się w momencie kiedy zacznę tworzyć własne typy, ale o tym opowiem innym razem.
Dobra, ale co jeżeli chcę aby zmienna mogła przechowywać więcej niż jeden typ danych? Nie jest to zbyt eleganckie, ale JS na to pozwalał i czasem się przydawało. W TypeScripcie jest sposób i na to. Są to tak zwane typy związkowe (to moje własne tłumaczenie zwrotu union types 🙂 ). Jak to działa? Podczas deklaracji zmiennej, po dwukropku wypisuję te typy które chcę aby były dozwolone dla danej zmiennej, oddzielające je symbolem pipe, czyli tak zwaną pałką lub jak ktoś woli bitowym OR:
|
1 2 3 4 |
var comboVar: number|string; comboVar = "pies"; // nie ma błędu comboVar = 42; // nie ma błędu |
Wartości można wpisywać ile się chce, oddzielając je kolejnymi pałkami. Można też w ten sposób pokazać TSowi, chęć stworzenia tablicy, która może przyjmować różne wartości:
|
1 |
var nums: (number|string)[] = [1,2,'pies',4,5]; |
Jak widać typy wypisujemy przed nawiasami kwadratowymi i całość trzeba opakować w nawiasy zwykłe. Warto umieć rozróżnić takie dwie deklaracje:
|
1 2 |
var numsAndStrings: (number|string)[]; var numsOrStrings: number[]|string[]; |
Pierwsza to zmienna, które może przechowywać tablicę zawierającą liczby i łańcuchy znaków Natomiast druga przyjmuje tablice zawierającą tylko liczby lub tablicę zawierającą tylko łańcuchy znaków 😉 .
Kolejny typ danych o którym chcę powiedzieć to any. Jest on wyjątkowy, ponieważ zmienna opisana tym typem może przyjmować dane dowolnego rodzaju. Innymi słowy nie ma żadnych ograniczeń:
|
1 2 3 4 |
var randomVals: any = 'pies'; var randomVals: any = 42; var randomVals: any = false; var randomVals: any = {}; |
Powiem tak, ciężko mi wyobrazić sobie scenariusz, który usprawiedliwiłby użycie tego typu celowo. Jest on w języku, ponieważ czasem TS nie potrafi dojść do tego, co autor miał namyśli deklarując zmienną, jest wtedy ona typu any. Warto wiedzieć, bo można się z tym czasem spotkać. Jednak raczej nigdy nie będzie to dobra sytuacja. Dlatego jeszcze raz radzę zawszę bezpośrednio deklarować typy 🙂 .
Ostatni typ o którym dziś wspomnę to void, czyli TSowy odpowiednik null oraz undefined. Ciężko mi będzie teraz pokazać przykład, ponieważ zazwyczaj void pojawia się w kontekście funkcji, a konkretniej to zwracanych przez nich wartośći. Jednak na funkcję zaplanowałem osobny post, dlatego póki co, po prostu zaznaczę, że taki typ istnieje.
To wszystko jeśli chodzi o dzisiejszy wpis. Na koniec mogę jeszcze zachęcić was zaznajomienia się z typami w TS. najlepiej napisać kilka prostych programów, tak jakbyście używali zwykłego JS, jednak wszędzie tam, gdzie uznacie za stosowne, deklarujcie typy. W razie czego, czytajcie komunikaty z błędami wypisywane przez Atom, są one bardzo pomocne.
Tymczasem, jak zawsze, zachęcam do polubienia mojej strony na facebooku. Na bieżąco zamieszczam tam informacje o nowościach, więc warto polubić aby nie przegapić żadnego nowego wpisu.