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ł.

Zapraszam do dołączenia do newslettera

Jedna myśl w temacie “Podstawowe typy wbudowane w TypeScript”

Dodaj komentarz

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