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;

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