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

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 🙂

Optional – nie tylko .isPresent() i .get() + ogłoszenie parafialne

Cześć! Kolejny post już online, jednak tym razem pod flagą Dev Foundry. Na Clockwork Java nowe materiały od 6 czerwca co dwa tygodnie – zaczynamy z cyklem nauki Javy od podstaw (a jak już te nieco ogarniemy to i o Javascript zahaczymy, będzie się działo 🙂

Optional – nie tylko .isPresent() i .get()



Natomiast na http://devfoundry.pl materiały tradycyjnie porozrzucane po różnych aspektach stacks javowego, tworzone przeze mnie oraz Dawida Nowaka, z którym to stworzyłem całkiem popularny kurs o wzorcach projektowych na Udemy (a już niedługo zabieramy się za kolejny, o wiele ciekawszy temat).

Nowy kurs już dostępny! Wzorce Projektowe.

Na blogu zapanowała ostatnio ponownie błoga cisza (co powoli staję się normą, którą wypadałby zmienić), jednak i tym razem miałem dobry powód.
Wydałem swój drugi kurs, utworzony w duecie, więc mojego współautorstwa dotyczący Wzorców Projektowych, czyli popularnych Design Patterns. Przechodzimy przez kilkanaście podstawowych wzorców projektowych, wszystko w języku java. Kurs dostępny jest na platformie Udemy, zapraszam do zajrzenia, zapozniania się i możne nawet kupna 😉

Jeśli kurs mieści się w zakresie Twoich zainteresowan to korzystając z tego linka możesz zakupić go za 34,99zł.

Obrazek kursu, z linkiem, link identyczny jak wyżej