0Pricing
Frontend Academy · Lekcja

Interfejsy i typy obiektów

Proszę opisywać kształt obiektów za pomocą interface i type, rozszerzać interfejsy, używać opcjonalnych właściwości z ? oraz readonly na potrzeby niezmienności.

Interfejsy i typy obiektów to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

interface a type

Zarówno interface, jak i type opisują kształt obiektów. Najważniejsza różnica polega na tym, że interfejsy można scalać (scalanie deklaracji) i zazwyczaj preferuje się je do definiowania kształtu publicznego API. Aliasy type są bardziej elastyczne w przypadku złożonych typów.

// interface:
interface User {
  id: number;
  name: string;
}

// type alias (equivalent for objects):
type User = {
  id: number;
  name: string;
};

Definiowanie interfejsu

Elementu interface należy użyć do zdefiniowania kształtu obiektu. Wszystkie właściwości są domyślnie wymagane. Właściwości należy oddzielać średnikami.

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  inStock: boolean;
  category: string;
}

Właściwości opcjonalne i tylko do odczytu

Właściwości opcjonalne oznacza się symbolem ?. Słowo kluczowe readonly zapobiega modyfikowaniu wartości. readonly wymusza niezmienność podczas kompilacji.

interface Config {
  host: string;
  port?: number;          // optional: number | undefined
  readonly apiKey: string; // can't change after assignment
}

const config: Config = { host: 'localhost', apiKey: 'abc' };
config.port = 8080;       // OK
config.apiKey = 'new';    // Error: readonly

Rozszerzanie interfejsów

Elementu extends należy użyć do utworzenia nowego interfejsu zawierającego wszystkie właściwości innego interfejsu. Obsługiwane jest wielodziedziczenie.

interface Animal {
  name: string;
  sound(): string;
}

interface Dog extends Animal {
  breed: string;
  fetch(): void;
}

interface ServiceDog extends Dog {
  task: string;
}

Sygnatury indeksów — dynamiczne klucze

Jeśli nazwy właściwości nie są z góry znane, ale znane są typy ich wartości, należy użyć sygnatury indeksu.

interface StringMap {
  [key: string]: string;
}

const headers: StringMap = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token123'
};

// Also for translating:
interface Translations {
  [locale: string]: { [key: string]: string };
}

Typy funkcji w interfejsach

Sygnatury metod można definiować wewnątrz interfejsu — działa zarówno skrócona składnia, jak i pełna składnia właściwości.

interface Logger {
  log(message: string): void;
  warn(message: string): void;
  error(message: string, err?: Error): void;
}

// Also valid:
interface Logger2 {
  log: (message: string) => void;
}

Implementowanie interfejsów w klasach

Klasa może implementować jeden interfejs lub większą ich liczbę za pomocą słowa kluczowego implement. TypeScript sprawdza, czy klasa udostępnia wszystkie wymagane elementy.

interface Serialisable {
  serialise(): string;
  deserialise(data: string): this;
}

class User implements Serialisable {
  constructor(public name: string) {}
  serialise() { return JSON.stringify({ name: this.name }); }
  deserialise(data: string) {
    const obj = JSON.parse(data);
    return new User(obj.name) as this;
  }
}

Scalanie deklaracji

Wiele deklaracji interface o tej samej nazwie jest scalanych w jeden interfejs. Jest to przydatne do rozszerzania typów zewnętrznych bibliotek. Aliasy typów nie obsługują tej funkcji.

interface Window {
  myPlugin: { version: string };
}
// Now window.myPlugin is typed everywhere

Zagnieżdżone typy obiektów

Właściwości interfejsu mogą same mieć typy obiektowe — zdefiniowane bezpośrednio lub przez odwołanie do innego interfejsu.

interface Order {
  id: string;
  customer: {
    name: string;
    email: string;
  };
  items: Array<{
    productId: string;
    quantity: number;
    price: number;
  }>;
  total: number;
}

Typowanie strukturalne — duck typing

TypeScript używa typowania strukturalnego: wartość spełnia wymagania typu, jeśli ma co najmniej wymagane właściwości. Jawne implementowanie nie jest konieczne. Każdy obiekt o właściwym kształcie jest zgodny z typem.

interface Named {
  name: string;
}

function greet(obj: Named) {
  console.log(`Hello, ${obj.name}!`);
}

// No 'implements Named' needed:
greet({ name: 'Alice', age: 30 }); // OK — has the name property

Unie rozróżniane za pomocą interfejsów

Do rozróżniania wariantów unii należy dodać właściwość dyskryminatora o typie literałowym. TypeScript zawęża typ w instrukcji switch/if na podstawie dyskryminatora.

interface Circle { kind: 'circle'; radius: number; }
interface Square { kind: 'square'; side: number; }
type Shape = Circle | Square;

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.side ** 2;
  }
}

Szybkie sprawdzenie

Jaka jest najważniejsza różnica między interface a type w TypeScript?

Podsumowanie: interfejsy

interface opisuje kształt obiektów za pomocą właściwości wymaganych, opcjonalnych i tylko do odczytu. Interfejsy rozszerza się za pomocą extends. Sygnatury indeksów służą do obsługi dynamicznych kluczy. Klasy implementują interfejsy. Scalanie deklaracji jest unikatową cechą interfejsów. TypeScript używa typowania strukturalnego — liczy się kształt, a nie jawna deklaracja.

Często zadawane pytania

Czy lekcja „Interfejsy i typy obiektów” jest bezpłatna?

Tak — pełny tekst „Interfejsy i typy obiektów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Interfejsy i typy obiektów”?

Proszę opisywać kształt obiektów za pomocą interface i type, rozszerzać interfejsy, używać opcjonalnych właściwości z ? oraz readonly na potrzeby niezmienności. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Interfejsy i typy obiektów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Dlaczego TypeScript: typy wyłapują błędy podczas kompilacji
  2. Typy prymitywne, unie i aliasy typów
  3. Interfejsy i typy obiektów
  4. Kompilowanie TS i tsconfig.json
← Powrót do Frontend Academy