Frontend Academy · Lekcja

Generics: T, extends i ograniczenia

Proszę pisać generyczne funkcje i interfejsy, ograniczać parametry typów za pomocą extends oraz używać domyślnych typów generycznych do tworzenia elastycznych API.

Lekcja 1 z 413 kroki

Generics: T, extends i ograniczenia to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 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.

Czym są typy generyczne

Typy generyczne pozwalają pisać funkcje, klasy i interfejsy działające z wieloma typami przy zachowaniu bezpieczeństwa typów. Zamiast pisać osobne funkcje dla każdego typu, należy napisać jedną funkcję generyczną parametryzowaną zmienną typu.

Prosta funkcja generyczna

Parametr typu T deklaruje się w nawiasach ostrych. TypeScript wywnioskuje T z typu argumentu — w miejscu wywołania nie jest potrzebna jawna adnotacja.

function identity<T>(value: T): T {
  return value;
}

identity(42);      // T is inferred as number, returns number
identity('hello'); // T inferred as string
identity<boolean>(true); // explicit

Generyczne interfejsy i typy

Parametryzowanie interfejsów i typów za pomocą typów generycznych pozwala opisywać wielokrotnego użytku struktury danych.

interface Box<T> {
  value: T;
  label?: string;
}

const numBox: Box<number> = { value: 42 };
const strBox: Box<string> = { value: 'hello', label: 'greeting' };

extends — ograniczanie typów generycznych

Należy użyć T extends SomeType, aby ograniczyć możliwe wartości T. Funkcja przyjmuje tylko typy spełniające to ograniczenie.

function getLength<T extends { length: number }>(item: T): number {
  return item.length; // safe: T is guaranteed to have length
}

getLength('hello');       // 5
getLength([1, 2, 3]);    // 3
getLength({ length: 7 }); // 7
// getLength(42);         // Error: number has no length

keyof i ograniczenia generyczne

keyof T tworzy unię kluczy właściwości typu T. W połączeniu z typami generycznymi umożliwia bezpieczny typowo dostęp do właściwości.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Alice', age: 30 };
getProperty(user, 'name');  // string
getProperty(user, 'age');   // number
// getProperty(user, 'foo'); // Error

Domyślne typy generyczne

Domyślny typ parametru generycznego można określić za pomocą T = DefaultType. Stosuje się to, gdy istnieje rozsądny typ domyślny, ale wywołujący może go zastąpić.

interface Paginated<T = unknown> {
  items: T[];
  total: number;
  page: number;
}

const rawPage: Paginated = { items: [], total: 0, page: 1 };
const typedPage: Paginated<User> = { items: [], total: 0, page: 1 };

Wiele parametrów typu

Funkcje mogą mieć wiele niezależnych parametrów typu.

function zip<A, B>(arrA: A[], arrB: B[]): Array<[A, B]> {
  return arrA.map((a, i) => [a, arrB[i]]);
}

zip([1, 2, 3], ['a', 'b', 'c']);
// [[1,'a'], [2,'b'], [3,'c']]

Klasy generyczne

Klasy również mogą być generyczne. Jest to powszechne w strukturach danych, takich jak stosy, kolejki i reaktywne magazyny danych.

class Stack<T> {
  private items: T[] = [];
  push(item: T) { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
  peek(): T | undefined { return this.items.at(-1); }
  get size() { return this.items.length; }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.pop(); // 2

Asynchroniczne funkcje generyczne

Asynchroniczne funkcje generyczne są często używane w typowanych wywołaniach API.

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<T>;
}

const users = await fetchJson<User[]>('/api/users');
const profile = await fetchJson<UserProfile>('/api/me');

infer w typach warunkowych

Słowo kluczowe infer wewnątrz typu warunkowego wyodrębnia typ z określonego wzorca. Jest używane w kodzie bibliotek do wyodrębniania typu zwracanego funkcji lub typu elementu tablicy.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type ElementType<T> = T extends Array<infer E> ? E : never;

type Fn = () => { name: string };
type Result = ReturnType<Fn>; // { name: string }

Kiedy używać typów generycznych

Typów generycznych należy używać, gdy: 1) ta sama logika ma zastosowanie do wielu typów, 2) potrzebna jest zależność między typami wejściowymi i wyjściowymi, 3) tworzona jest wielokrotnego użytku struktura danych lub narzędzie. Nie należy używać typów generycznych bez potrzeby — typy konkretne są bardziej przejrzyste, gdy istnieje tylko jeden przypadek użycia.

Szybki test

Co zapewnia ograniczenie T extends { length: number }?

Odpowiedz w interaktywnej lekcji

Podsumowanie: typy generyczne

Typy generyczne parametryzują typy, dzięki czemu jedna funkcja, klasa lub interfejs działa z wieloma typami. T extends SomeType dodaje ograniczenia. keyof T zwraca unie kluczy właściwości. Domyślne typy generyczne można definiować za pomocą T = Default. infer wyodrębnia typy w typach warunkowych. Typów generycznych należy używać w wielokrotnego użytku narzędziach typowanych i strukturach danych.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 41
Lekcje: 163

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Generics: T, extends i ograniczenia” jest bezpłatna?

Tak — pełny tekst „Generics: T, extends i ograniczenia” 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 „Generics: T, extends i ograniczenia”?

Proszę pisać generyczne funkcje i interfejsy, ograniczać parametry typów za pomocą extends oraz używać domyślnych typów generycznych do tworzenia elastycznych API. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Generics: T, extends i ograniczenia”?

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

Generics: T, extends i ograniczenia
Typy narzędziowe: Partial, Required, Pick, Omit
Typy mapowane i warunkowe
Zawężanie: typeof, instanceof, unie dyskryminowane

← Powrót do Frontend Academy