Podstawowe typy wbudowane w TypeScript

W poprzednim wpisie postawilismy środowisko do pracy. Teraz przyjrzyjmy się jakie podstawowe typy wbudowane oferuje nam TypeScript. Zanim przejdziemy do konkretów pochylmy się na chwilę nad samą koncepcją typów.

---

Zapraszam do dołączenia za darmo do kilkugodzinnego kursu wprowadzającego do TypeScript.

---

W programowaniu typ jest to informacja o danej, która pomaga kompilatorowi (bądź interpreterowi, w zależności od języka) zrozumieć co z tą konkretną daną może zrobić i jakie wartości przechowuje.

I tak możemy przypisać typ do zmiennej, do parametru funkcji bądź też do wartości przez daną funkcję zwracanej. W TypeScript ten pierwszy przypadek będzie wyglądał tak: let name : string Dzięki temu kompilator będzie wiedział, że do zmiennej name może przypisać tylko wartości tekstowe. Czyli najpierw mamy let (bądź const) i nazwe dla zmiennej – to znamy z JavaScript. Następnie mamy skłanie TypeScriptowa – dwukropek, po którym następuje nazwa typu dla danej zmiennej, w tym wypadku jest to string.

Po co komu typowanie w JavaScript?

JavaScript przez lata radził sobie doskonale bez sztywnego typowania, po co więc wprowadzać je teraz?

JS w ostatnich latach odnotował gigantyczny skok popularności przez co powstają w nim coraz większe projekty, a nie tylko animacje spadających płatków śniegu na stronach internetowych. W dużych projektach bardzo ważną rzeczą jest utrzymanie kodu i jego czytelność. Typowanie w gigantycznym stopniu poprawiają obie te rzeczy. Podobnie jak możliwość bezpiecznego refaktoringu kodu. Dodatkowo już sama obecność typów dokumentuje dany program, bo informuję gdzie jakie wartości są oczekiwane.

Podstawowe typy wbudowane w TypeScript

TypeScript posiada kilka typów podstawowych, nas jednak na chwilę obecną interesują tylko trzy zupełnie podstawowe, mianowicie boolean, string i number.

Pierwszy z nich – boolean – jest to tak zwany typ logiczny, może przybierać dwie wartości – true bądź false.

let flag : boolean = false;
let isSet : boolean = true;

Kolejnym ze wspominanych typów jest string, czyli typ dla wartości tekstowych. Wartości tekstowe w TypeScript, podobnie jak w JavaScript możemy umieszczać pomiędzy różnymi znacznikami.

let firstName : string = 'Paweł';
let lastName : string = "Ćwik";
let longText : string = `this is some
                          kind of long,
                           multiline text with
                            ${firstName} variables included`

I finalnie mamy number, czyli wartości liczbowe. TypeScript pozwala nam na zapisywanie ich od razu w formacie binarnym, ósemkowym czy szesnastkowym, ale szczerze mówiąc nie jest to jakaś super przydatna funkcjonalność. O wiele ciekawszy jest prosty fakt możliwości zapisu dużych liczb żywając _ by oddzielić kolejne miejsca dziesiętne w celu poprawy czytelności.

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let bigOne: number = 21_322_101_32.2;

Pozorność typów

Po przekompilowaniu powyższych przykładów na JavaScript (ES2017) otrzymujemy co następuje:

"use strict";
let flag = false;
let isSet = true;
let firstName = 'Paweł';
let lastName = "Ćwik";
let longText = `this is some
                          kind of long,
                           multiline text with
                            ${firstName} variables included`;
let decimal = 6;
let hex = 0xf00d;
let binary = 0b1010;
let octal = 0o744;
let bigOne = 2132210132.2;

Czyli informację o typach zniknęły. W TypeScript typy obecne są tylko w statycznej części kodu – podczas jego pisania i kompilowania. Po kompilacji otrzymujemy wynikowy kod JavaScript pozbawiony wszelkich namiastek typów. Z jednej strony to dobrze – nie spowalniamy (choć są to rzędy nanosekund albo i mniejsze) przeglądarki sprawdzaniem typów za każdym razem, gdy przypisywana jest zmienna do wartości. Z drugiej strony tracimy pewność czy to, co otrzymaliśmy jako zwrotkę z serwisu REST faktycznie tym, czego oczekujemy.

Dedukcja typów przez TypeScript

TypeScript jest w stanie, dzięki kompilatorowi i serwerowi języka, który prześle odpowiednie informację do IDE/edytora kodu, wydedukować jaki typ ma miec dana zmienne. Gdy napiszemy coś takiego

let age = 27;

to po najechaniu na te linijke kursorem czy to w Visual Studio Code czy też na playgroundzie dostaniemy informacje w chmurcę

let age : number

Oznacza to tyle, że TypeScript wydedukował na podstawie wartości, że age ma być typu number;

TypeScript radzi sobie z dedukcją nawet dla tych bardziej skomplikowanych typów, które sami stworzymy. Jednak moim zdaniem na początku naszej przygody z TS powinniśmy zawsze pisać typy wprost, nieważne jak zdaniem niektórych nadmiarowe może to być. Chodzi o to, by przyzwyczajać się do używania typów oraz by uniknąć błędów spowodowanych faktem, że Typescript coś źle wydedukował.

Interesuje Cię TypeScript? Wprowadzenie do tego języka jest jednym z darmowych kursów dostępnych na kursy.clockworkjava.pl.

Zapraszam do dołączenia do newslettera