Frontend Academy · Lekcja

Dekoratory i metadane

Włączy Pan/Pani eksperymentalne dekoratory, napisze dekoratory klas, metod i właściwości oraz użyje reflect-metadata we wzorcach wstrzykiwania zależności.

Dekoratory i metadane to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 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ą dekoratory?

Dekoratory to funkcje, które modyfikują klasy, metody, właściwości lub parametry w momencie ich definiowania. Są intensywnie używane w Angular, NestJS, TypeORM i opartym na klasach MobX.

Składnia dekoratorów

Poprzedź klasę, metodę, właściwość lub parametr zapisem @DecoratorName. Funkcja dekoratora jest wykonywana podczas definiowania klasy.

@Component({ selector: 'app-root' })
export class AppComponent {
  @Input() title: string;

  @HostListener('click')
  onClick() {
    console.log('clicked');
  }
}

Włączanie dekoratorów

Włącz eksperymentalną flagę w tsconfig.json. Nowe dekoratory ECMAScript Stage 3 (TypeScript 5.0+) nie wymagają tej flagi, ale mają inną semantykę.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Dekorator klasy

Otrzymuje konstruktor jako argument. Może zastąpić, opakować lub rozszerzyć klasę.

function Singleton<T extends { new (...a: any[]): {} }>(target: T) {
  let instance: T;
  return class extends target {
    constructor(...args: any[]) {
      if (!instance) instance = new target(...args) as T;
      return instance;
    }
  };
}

@Singleton
class Logger { /* ... */ }

Dekorator metody

Otrzymuje (target, key, descriptor). Może opakować metodę — na przykład w celu rejestrowania wywołań.

function Log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`[${key}]`, args);
    return original.apply(this, args);
  };
}

class Service {
  @Log
  greet(name: string) { return `Hello ${name}`; }
}

Dekorator właściwości

Otrzymuje (target, key). Jest często używany razem z reflect-metadata do rejestrowania informacji o właściwości.

function Required(target: any, key: string) {
  const existing = Reflect.getMetadata('required', target) || [];
  Reflect.defineMetadata('required', [...existing, key], target);
}

class User {
  @Required name: string;
  @Required email: string;
}

Dekorator parametru

Otrzymuje (target, key, parameterIndex). Jest używany do wstrzykiwania zależności — rejestruje, które parametry wymagają poszczególnych usług.

function Inject(token: string) {
  return function (target: any, key: string, index: number) {
    const existing = Reflect.getMetadata('inject', target, key) || {};
    existing[index] = token;
    Reflect.defineMetadata('inject', existing, target, key);
  };
}

class UserService {
  constructor(@Inject('Database') db: Database) {}
}

reflect-metadata

reflect-metadata to polyfill, który pozwala dekoratorom odczytywać i zapisywać metadane klas. Jest wymagany przez Angular DI i wiele ORM-ów.

npm install reflect-metadata

// main.ts (entry point):
import 'reflect-metadata';

import { Reflect } from 'reflect-metadata';
Reflect.defineMetadata('key', 'value', target);
Reflect.getMetadata('key', target); // 'value'

Fabryki dekoratorów

Fabryka zwraca dekorator — służy do przekazywania argumentów.

function Component(config: { selector: string }) {
  return function (target: any) {
    target.selector = config.selector;
  };
}

@Component({ selector: 'app-root' })
class AppComponent {}

Zastosowanie do walidacji

Połącz dekoratory właściwości z funkcją validate(), aby zbudować niewielką bibliotekę walidacyjną.

// Decorator records that a field is required:
function Required(target: any, key: string) {
  const fields = Reflect.getMetadata('required', target) || [];
  Reflect.defineMetadata('required', [...fields, key], target);
}

class User {
  @Required name!: string;
  @Required email!: string;
}

function validate(obj: any): string[] {
  const required: string[] = Reflect.getMetadata('required', obj) || [];
  return required.filter(k => obj[k] == null);
}

Dekoratory Stage 3 (TC39)

Ustandaryzowane dekoratory (TS 5.0+, obsługiwane w Node 22+ za flagą) mają inny podpis. Nie wymagają eksperymentalnej flagi ani reflect-metadata.

Kiedy używać dekoratorów

Używaj dekoratorów tam, gdzie udostępnia je framework (Angular, NestJS, TypeORM). Nie twórz własnych dekoratorów w zwykłym kodzie frontendu — zwiększają złożoność i uzależniają kod od konkretnego sposobu działania środowiska uruchomieniowego.

Szybkie sprawdzenie

Które flagi tsconfig należy włączyć, aby używać starszych (eksperymentalnych) dekoratorów z refleksją metadanych?

Podsumowanie: dekoratory

Dekoratory modyfikują klasy, metody, właściwości i parametry w momencie ich definiowania. Włącz experimentalDecorators + emitDecoratorMetadata. Podpisy dekoratorów klas, metod, właściwości i parametrów różnią się. reflect-metadata przechowuje metadane, a fabryki przekazują argumenty. Dekoratory są intensywnie używane w Angular, NestJS i TypeORM. Dekoratory Stage 3 (TS 5+) to przyszłość i nie wymagają flag.

Często zadawane pytania

Czy lekcja „Dekoratory i metadane” jest bezpłatna?

Tak — pełny tekst „Dekoratory i metadane” 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 „Dekoratory i metadane”?

Włączy Pan/Pani eksperymentalne dekoratory, napisze dekoratory klas, metod i właściwości oraz użyje reflect-metadata we wzorcach wstrzykiwania zależnoś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 2 z 4.

Ile czasu zajmuje lekcja „Dekoratory i metadane”?

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

← Powrót do Frontend Academy