Interfejsy w TypeScript

W poprzednim wpisie pokazałem jak tworzyć aliasy typów, czyli pierwszy ze sposobów na tworzenie własnych typów. Tym razem zaprezentuję jak pracować z i stworzyć interfejsy w TypeScript.

Typowanie obiektu

TypeScript pozwala oczywiście na dodawanie informacji o typie dla obiektu, na przykład kod

const me : { name: string, age: number } = {
  name: "Paweł",
  age: 33
}

utworzy stałą o nazwie me, która musi być obiektem o dwóch polach – pierwszy o nazwie name, typu tekstowego oraz age o typie number. Następnie do tak zdeklarowanej zmiennej przypisujemy już właściwy obiekt, spełniający powyższy typ.

O ile jednorazowe zdefiniowane niewielkiego typowania dla zmiennej nie jest większym problemem to gdy chciemy mieć klika zmiennych tego typu to zamiast pisać definicje typu za każdym razem

const me : { name: string, age: number } = {
  name: "Paweł",
  age: 33
}

const you : { name: string, age: number } = {
  name: "Tomek",
  age: 29
}

możemy zdefiniować interfejs.

Interfejsy w TypeScript

interface Person {
  name: string,
  age: number
}

const me : Person = {
  name: "Paweł",
  age: 33
}

const you : Person = {
  name: "Tomek",
  age: 29
}

Interfejsy tworzymy za pomocą słowa kluczowego interface, po którym następuje nazwa dla nowo utworzonego typu, a po niej otwieramy nowy blok nawiasami klamrowymi, by zdefiniować pola, jakie będą określały interfejs.

Kompozycja

Pola interfejsów mogą być typami podstawowymi, jak w powyższych przykładach. Nic nie stoi jednak na przeszkodzie by interfejs, posiadał pole o typie definiowanym przez inny interfejs.

interface Person {
  name: string,
  age: number,
  email: Email
}

const me : Person = {
  name: "Paweł",
  age: 33,
  email : { name: 'pawel', domain: 'gmail.com'}
}

const you : Person = {
  name: "Tomek",
  age: 29,
  email : { name: 'tomek', domain: 'gmail.com'}
}

interface Email {
    name: string,
    domain: string
}

Roszerzyliśmy nasz interfejs Person o dodatkowe pole email, której to również jest obiektem, definiowanym przez interfejs Email.

Warto również zauważyć, że nie musimy deklarować interfejsu zanim go użyjemy. Możemy to zrobić niżej, jak w przykładzie powyżej. Natomiast dobre praktyki programistyczne wymagają by jednak definicja interfejsu pojawiła się przed jej pierwszym użyciem.

Pola opcjonalne

TypeScript pozwala by pola definiujące interfejs były opcjonalne. Tj. obiekt, który chcemy przypisać do zmiennej o danym typie nie musi posiadać pól oznaczonych jako opcjonalne.

interface Email {
    name: string,
    domain: string
}

interface Person {
  name: string,
  age: number,
  email?: Email
}

const me : Person = {
  name: "Paweł",
  age: 33,
  email : { name: 'pawel', domain: 'gmail.com'}
}

const you : Person = {
  name: "Tomek",
  age: 29,
}

Pola opcjonalne oznaczamy używając ? przed przypisaniem typu. Jak wyżej email?: Email.

Dopasowanie interfejsów

Bardzo ważną rzeczą jest fakt, że by dany obiekt został dopasowany do interfejsu musi on posiadać dokładnie takie same pola wymagane (nieopcjonalne) jak te zadeklarowane w interfejsie. Nie może mieć ich ani mniej, ani więcej.

const she : Person = {
  name: "Marta",
  age: 29,
  gender: female
}

cons he : Person = {
  name: "Łukasz"
}

W dwóch powyższych przypadkach dostaniemy błąd kompilacji. Pierwszy obiekt (she) ma za dużo pól z nadmiarowym gender. Drugi natomiast (he) ma ich za mało, brakuje age.

Z dopasowywaniem interfejsów wiąże się jeszcze jeden, bardzo istotny fakt. Mianowicie interfejs to tylko nazwa nadana przez człowieka dla zestawu propertsów.

Mając dwa interfejsy

interface Pet {
   name: string,
   age: number
}

interface Person {
   name: string,
   age: number
}

To dla TypeScript te dwa interfejsy kryją pod sobą te same wartości, więc obiekty jednego mogą być spokojnie przypisywane do drugiego. Pomimo tego, że w głowie programisty Pet i Person to dwa, zupełnie rozdzielne byty. Poniższe skompiluje się bez problemu:

let pet : Pet;
let person : Person = { name: "Pawel", age: 33 }
pet = person;

Zapraszam do zapisywania się do newslettera TypeScript – co tydzień trzy artykuły, zero spamu. W prezencie otrzymasz ebook 7 sprawdzonych rad, dzieki którym sprawniej nauczysz sie TypeScript

Alias typu w TypeScript

W poprzednim wpisie pokazałem trzy podstawowe typy wbudowane w TypeScript. W tym natomiast pokaże jak tworzyć własne. W TypeScript możemy je definiować za pomocą aliasów, interfejsów oraz klas. W tym wpisie zajmiemy się pierwszym sposobem i stworzymy alias typu – czyli zestawy mniej bądź bardziej konkretnych wartości, jakie może zmienna danego typu przyjmować.

Czytaj dalej Alias typu w TypeScript

Instalacja TypeScript i minimalistyczny set-up projektu

W poprzednim wpisie wprowadziłem nas w świat TypeScript, a dziś zajmiemy się pokazaniem jak przebiega instalacja TypeScript oraz zestawienie (set-up) minimalistycznego projektu, bez nadmiarowych narzędzi jak Webpack czy Babel. Na to przyjdzie czas później.

Czytaj dalej Instalacja TypeScript i minimalistyczny set-up projektu

Co to TypeScript

TypeScript jest to język programowania tworzony w modelu open-source będący semantycznie nadzbiorem JavaScriptu. Główny zespół odpowiadający za jego utrzymanie pracuje w Microsoft.

O co chodzi z semantycznym nadzbiorem? Składnia języka jest niemal identyczna z JavaScript. TypeScript dodaje trochę dodatkowych rzeczy jak na przykład statyczne typowanie czy interfejsy.

Można powiedzieć też, że każdy kod napisany w JavaScript możemy skopiować do pliku .ts (rozszerzenie dla plików TypeScript) i wszystko będzie działać poprawnie.
Nie jest to jednak do końca prawda, przynajmniej nie przy domyślnych ustawieniach kompilatora TypeScript. Jeśli zluzujemy nieco różne obostrzenia to dopiero wówczas KAŻDY kod JavaScript uruchomi się jako kod TypeScript.

Czytaj dalej Co to TypeScript

Tymczasem na Dev-foundry

Jeśli ktoś jeszcze nie miał okazji się zapoznać to na blogu devfoundry.pl pojawiło się kilka ciekawych wpisów – m.in. o pracy zdalnej, platformie GitHub czy o tym jaki język programowania wybrać. Czyli pakiet startowy dla osób zaczynających przygodę z programowaniem 🙂

Oczywiście nie zabrakło bardziej technicznego “mięcha” jak wpis o pracy z typem Optional w Hibernate czy wpis o Mockach i Stubach autorstwa Dawida, które pięknie wprowadzają w nasz nowy kurs.

Tak, więc jeśli szukasz treści powiązanych z Javą zapraszam do powyższych wpisów 🙂

Kurs Java od Zera – Aktualizacja – Instalacja OpenJDK 11

Kurs został zaktualizowany do Javy 11, a konkretnie implementacji OpenJDK 11. Warto przyjrzeć się, o co chodzi ze zmianami licencyjnymi w Javie 11, a następnie jak wygląda instalacja OpenJDK 11.

Java 11 – płatna czy darmowa?

Instalacja OpenJDK 11

Java od Zera – Addendum – Java 11. Płatna czy darmowa?

Wraz z wersją Javy o numerku 11 nastał pewien chaos i zamieszanie. Mianowicie zmieniły się licencje i pojawiło się pytanie – Java 11 płatna czy darmowa? Skorzystam z okazji i wyjaśnię pewne rzeczy, bo takie akcje mogą tylko zaszkodzić osobom Javy dopiero się uczącym.

Czytaj dalej Java od Zera – Addendum – Java 11. Płatna czy darmowa?

Wprowadzenie React JS #1 – wprowadzenie na przykładzie

React jest jedną z najpopularniejszych bibliotek języka Javascript, służącą do tworzenia interfejsów użytkownika – a konkretniej tych webowych, czyli stron internetowych. Został on stworzony przez pracownika Facebooka i głównie przez tę firmę jest utrzymywany oraz oczywiście wykorzystywany. Inne duże korporacje jakie z niego korzystają to PayPal czy Netflix. W tym wpisie przedstawie krótkie wprowadzenie do biblioteki Ract. Czytaj dalej Wprowadzenie React JS #1 – wprowadzenie na przykładzie