Kategoria:TypeScript

TypeScript - podstawy

  • Czas potrzebny na przeczytanie:8 minut
  • Opublikowane:

Wprowadzenie

Czymże jest TypeScript? TypeScript jest to statycznie typowany język od Microsoftu, bazuje on na JavaScripcie, do którego jest kompilowany. Jest to nieoficjalny superset js, uwierz mi, jak już go poznasz, nie będziesz chciał się wracać do czystego JavaScriptu!

O czym jest i o czym nie jest ten wpis?

Dzisiejszy materiał jest dość solidnym wprowadzeniem w czysto techniczne aspekty TypeScripta, samo mięso. Zapoznamy się dzisiaj z podstawowymi typami, funkcjami i interfejsami. Czeka na Ciebie jeszcze parę niespodzianek, ale nie będę spojlerował 🤐.

Nie poruszałem tutaj konfiguracji całego środowiska. Zrobił już to Marcin z Algosmart jakiś czas temu. Tutaj link do jego materiału wideo: https://www.youtube.com/watch?v=3E1lu88NPWY. Pssst! Chłopaki z Przeprogramowanych mają również super serię o Pair Programmingu w TS, polecam! Nie zagłębiałem się też za specjalnie w to, jakie korzyści daje nam TypeScript, zrobił to za to, bardzo dobrze zresztą, Michał na blogu Typeofweb.

Reszta, bardziej zaawansowanych tematów, u mnie, za tydzień!

Co powinieneś wiedzieć?

Przed nauką TS, powinieneś poznać JavaScript. Dlatego bez podstawowej znajomości js i składni ES6+ ani rusz!

Podstawowe typy

  • string
  • number
  • boolean
  • array
  • object & Object
  • enum
  • any
  • void
  • null i undefined
  • never
  • tuple
  • BigInt
  • unknown
  • symbol & unique symbol

Prawdopodobnie kojarzysz większość z nich, obce mogę być Ci typy: enum,any,void, tuple i never. Zajmiemy się nimi za chwilę. Typami BigInt, unknow oraz symbol i unique symbol zajmniemy się w następnym wpisie.

Spójrzmy na przykładach:

const userName: string = 'Kuba';
const userAge: number = 23;
const isUserAdult: boolean = true;
const userInfo: object = {};
const userFavoriteFood: [] = [];

Załóżmy, że nasza tablica userFavoriteFood zawiera ulubione jedzenie Kuby, wartości będą typu string. Jak to otypowoać? Wystarczy, że przed tablicą dasz znać typescriptowi jakiego typu będą jej wartości.

Enum

Z definicji służą do grupowania numerycznych wartości, jest to pewnego rodzaju zbiór. Elementy enuma(tak, wiem, jak to brzmi), numerowane są od zera. Spójrzmy na przykładzie:

enum FirstSecond {
  1,
  2,
}
console.log(FirstSecond.1); // 0
console.log(FirstSecond.2); // 1

Możemy jednak to zmienić:

enum FirstSecond {
  First = 1,
  Second,
}
console.log(FirstSecond.First); // 1
console.log(FirstSecond.Second); // 2

Enumy są często wykorzystywane na bazie strigów.

enum FirstSecond {
  First = 'First',
  Second = 'Second',
}
console.log(FirstSecond.First); // "First"
console.log(FirstSecond.Second); // "Second"

Any

Oznacza każdy typ, jeśli to możliwe, unikaj wrzucania any tam, gdzie nie ma ono zastosowania.

let anyValue: any = 4;
anyValue = '4';
anyValue = false;

const anyArray: any[] = ['🌶️', 0, true, {}];

Void

W pewnym sensie przeciwieństwo any, jest to typ "brak typu". Najczęściej używany przy funkcjach, jako oznaczenie, że dana funkcja nic nie zwraca:

Tuple

Typ tuple pozwala zadeklarować tablicę z wartościami o różnych typach. Nie muszą być one takie same, jeśli znamy typy wartości, możemy zamiast any, podać typ tuple.

Never

Typ never reprezentuje typ, który nigdy nie przemija. Może być sub typem każdego typu (oprócz samego siebie). Pewnie niewiele Ci to mówi, spójrzmy na przykładzie. Funkcja, która zwraca never, musi mieć tzw unreachable end point.

function error(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {}
}

Asercja Typów

Powiedzmy, że zadeklarowałeś w pewnym momencie zmieną typu any. Po jakimś czasie wiesz, że ta zmienna powinna być typu string. Za pomocą asercji typów możesz oznajmić TypeScriptowi, że wiesz, co robisz. Nie wpływa ona na runtime, jest używana tylko w procesie kompilacji. Asercję możemy zapisać na dwa sposoby.

Opcja nr. 1

Tej opcji nie możemy użyć w Reactcie. Dozwolona jest jedynie ta druga.

let someValue: any = 'this is a string';

let strLength: number = (<string>someValue).length;

Opcja nr. 2

let someValue: any = 'this is a string';

let strLength: number = (someValue as string).length;

Powyższe stwierdzenia działają w ten sam sposób, kwestia preferencji... No chyba, że piszesz w Reactcie.

Tablice

Zagłębmy się na chwile w wątku tablic. W TS dzielą się one na dwa rodzaje.

  • lista - wszystkie elementy mają ten sam typ.
  • tuple - elementy niekoniecznie muszą mieć ten sam typ.

Lista

I tutaj znowu mamy dwa podejścia - użycie Type literals lub globalnych Interfejsów, a dokładniej Generics. Na obecną chwilę, nie przejmuj się terminologią, to wszystko, o czym teraz wspominam, poznasz w dalszej części tej serii.

// Type literals
const myClassMates: string[] = ['Kuba', 'Wiktor', 'Kamil'];

// Globalne Interfejsy(Generics)
const myClassMates: Array<string> = ['Kuba', 'Wiktor', 'Kamil'];

Powyższe przykłady działają na tej samej zasadzie.

Tuple array

Jeżeli zapoznałeś się z podstawowymi typami, to nie będzie to dla Ciebie zaskoczenie.

Funkcje

Okej, pora na funckję, jak wyglądają one w przypadku TypeScripta?

Wyjaśnijmy sobie powyższy przykład. Każdy parametr funkcji ma własny typ, definiujemy go dwukropkiem. Po nawiasach (), podajemy typ, jaki będzie miała zwracana wartość z funkcji. Taka sama konstrukcja tyczy się funkcji strzałkowych.

Parametry

Jak już wiesz parametry funkcji typujemy po dwukropku.

Opcjonalne parametry

Defaultowo wszystkie parametry są wymagane, możemy to jednak zmienić stawiając znak zapytania przed dwukropkiem.

function makeUserMoreCool(userName?: string): string {
  if (userName === undefined) {
    return '';
  }
  return userName.concat(' is cool');
}

Defaultowe parametry

Możemy podać domyślną wartość dla parametru funkcji, gdy to zrobimy, typescript domyśli się jaki jest typ naszej wartości.

Jeśli chcesz, możesz nadal otypowoać dany parametr:

Parametry rest

Rest, jak pewnie wiesz z JavaScriptu, zbiera pozostałe parametry z tablicy. Jak to otypować? Sprawdźmy!

W przypadku rest fajnie sprawdza się tuple:

Named parameters + destrukturyzacja

Jak pewnie wiesz, w JavaScripcie możesz destrukturyzować parametry funkcji, dzięki temu mamy dostęp do symulowanych, ale jednak Named parameters. Możemy otypować taką konstrukcję w następujący sposób:

function getUserInfo({userName,favouriteFood,age = 22}: {userName:string, favouriteFood: string[], age: number}): string {...}

Interface

Napiszmy funkcję, która przyjmuje zdestrukturyzowaną wartość userName z obiektu user jako parametr.

Taka konstrukcja jest zrozumiała, ale gdy byśmy chcieli zdestrukturyzować jeszcze 2 lub 3 wartości całość staje się mało czytelna i powstaje bałagan.

A co gdybyśmy chcieli stworzyć następną funkcję z dokładnie takimi samymi typami?

Wtedy pojawiają się one - Interfejsy.

Dzięki nim możemy definiować strukturę objektu. Są one niezmiernie przydatne w klasach, ale o tym w kolejnym wpisie.

Stwórzmy nasz pierwszy Interface:

Opcjonalne typy

Defaultowo, podobnie jak w funkcjach, wszystkie wartości w interfejsach są wymagane, możemy jednak to zmienić, dodając znak zapytania przed dwukropkiem. Wtedy dany parametr stanie się opcjonalny.

interface User {
  age?: number;
  userName: string;
}

const getUserName = (user: User): string => {...}

Interfejsy i funkcje 

Użyjmy interfejsa do otypowania funkcji:

interface GetUserNameFunc {
  (userName: string): string;
}

let getUserName: GetUserNameFunc;
getUserName = function(name: string){...};

Readonly

Jeśli chcesz, aby dana wartość była tylko do odczytu i żebyś nie mógł jej modyfikować, powinieneś skorzystać z readonly.

interface User {
  age?: number;
  readonly userName: string;
}
let user: User = {
  userName: 'Mateusz',
};

user.userName = 'Paweł'; // error

Rozszerzanie interfejsów

Możemy rozszerzać interfejsy używając słowa extends. Stwórzmy dwa interfejsy - Dog i Animal.

interface Animal {
  readonly name: string;
  age: number;
}

interface Dog {
  breed: string;
}

Chcemy, aby interface Dog posiadał również name i age, dokładnie tak jak ma Animal.

interface Animal {
  readonly name: string;
  age: number;
}

interface Dog extends Animal {
  breed: string;
}

Indeksowalne typy

Tak samo jak możemy typować funkcję, możemy również użyc interfejsów z tzw. indeksowalnymi typami.

interface Animal {
  [index: number]: string;
}
const animalsArray: Animal = ['Zebra', 'Dog'];
const zebra = animalsArray[0]; // Zebra - string

W powyższym przykładzie stworzymliśmy interface Animal, który bierze index typu number i zwraca string.

Const assertions

Jest to coś podobnego do asercji typów, tylko, że w tym wypadku używamy const. Co daje taka asercja?

  • Literały objektów dostają właściwość readonly
  • Tablice zamieniają się w tuplesy readonly

// Typ 'readonly [1, 2, 3, 4]'
let values = [1, 2, 3, 4] as const;

// Typ '{readonly userName: "Piotr" }'
let user = { userName: 'Piotr' } as const;

Type Casting

Załóżmy, że chcemy pobrać inupta z naszego html. Spróbujmy dwóch sposobów. Pierwszy, za pomocą getElementById, drugi przy pomocy querySelectora.

const input1 = document.getElementById('my-input');
const input2 = document.querySelector('input');

Co dostaniemy w odpowiedzi? Input1 jest typu HTMLElement | null, input2 za to ma typ HTMLInputElement | null. I co to nam daje? Jeśli będziemy chcieli wyświetlić wartość z pierwszego inputa to dostaniemy informację, że value nie występuje w typie HTMLElement | null.

Zapis ze znakiem zapytania, to optional chaining, występuje on również w JavaScripcie. Jeśli chcesz się dowiedzieć więcej, zerknij do poprzedniego posta.

Jak możemy to zmienić? Zastosujmy asercję typów.

const input1 = document.getElementById('input') as HTMLInputElement;
const printInputValue = () => console.log(input.value);

W przypadku querySelectora, typescript sam wie jakiego typu powinien użyć, więc wszystko będzie działało, jak należy.

Podsumowanie

Uff... To by było wszystko na dzisiaj. Początki są najtrudniejsze! Pamiętaj, najlepiej przećwiczysz zdobytą dziś wiedzę w praktyce.

Do usłyszenia w następnym wpisie o TypeScripcie 💙!

Źródła

O autorze

Olaf Sulich

Olaf jest Frontend Developerem, blogerem i nosi rybacki kapelusz 🎩 Pisze o wszystkim co związane z frontendem, ale nie boi się backendu i designów 🦾 Ma głowę pełną pomysłów i nadzieję, że znajdziesz tutaj coś dla siebie!

Dołącz do społeczności!

Bo w programowaniu liczą się ludzie

Wchodzę