PricingLoginStart free
Frontend Academy · Lektion

Dekoratorer og metadata

Aktivér eksperimentelle dekoratorer, skriv klasse-, metode- og egenskabsdekoratorer, og brug reflect-metadata til mønstre for dependency injection.

Lektion 2 af 414 trin

Dekoratorer og metadata er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er dekoratorer?

Dekoratorer er funktioner, der ændrer klasser, metoder, egenskaber eller parametre på definitionstidspunktet. De bruges i stor stil i Angular, NestJS, TypeORM og klassebaseret MobX.

Dekoratorsyntaks

Sæt @DecoratorName foran en klasse, metode, egenskab eller parameter. Dekoratorfunktionen kører, når klassen defineres.

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

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

Aktivering af dekoratorer

Aktivér det eksperimentelle flag i tsconfig.json. De nye ECMAScript Stage 3-dekoratorer (TypeScript 5.0+) kræver ikke dette flag, men har en anden betydning.

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

Klassedekorator

Modtager konstruktøren som argument. Kan erstatte, omvikle eller udvide klassen.

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 { /* ... */ }

Metodedekorator

Modtager (target, key, descriptor). Kan omvikle metoden — f.eks. for at registrere kald.

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}`; }
}

Egenskabsdekorator

Modtager (target, key). Bruges ofte sammen med reflect-metadata til at registrere oplysninger om egenskaben.

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;
}

Parameterdekorator

Modtager (target, key, parameterIndex). Bruges til afhængighedsinjektion — registrerer, hvilke parametre der kræver hvilke tjenester.

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 er et polyfill, der giver dekoratorer mulighed for at læse og skrive metadata på klasser. Det kræves til Angular DI og mange ORM'er.

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'

Dekoratorfabrikker

En fabrik returnerer en dekorator — det bruges til at sende argumenter.

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

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

Anvendelse til validering

Kombiner egenskabsdekoratorer med en validate()-funktion for at opbygge et lille valideringsbibliotek.

// 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);
}

Stage 3-dekoratorer (TC39)

De standardiserede dekoratorer (TS 5.0+, understøttet i Node 22+ bag et flag) har en anden signatur. De kræver ikke det eksperimentelle flag og kræver ikke reflect-metadata.

Hvornår skal du bruge dekoratorer?

Brug dekoratorer, hvor rammeværket stiller dem til rådighed (Angular, NestJS, TypeORM). Skriv ikke dine egne i almindelig frontend-kode — de tilføjer kompleksitet og binder dig til en bestemt kørselsadfærd.

Hurtigt tjek

Hvilke tsconfig-flag skal du aktivere for at bruge ældre (eksperimentelle) dekoratorer med refleksion af metadata?

Besvar den i den interaktive lektion

Opsummering: Dekoratorer

Dekoratorer ændrer klasser, metoder, egenskaber og parametre på definitionstidspunktet. Aktivér experimentalDecorators + emitDecoratorMetadata. Signaturerne for klasse-, metode-, egenskabs- og parameterdekoratorer er forskellige. reflect-metadata gemmer metadata; fabrikker sender argumenter. De bruges i stor stil af Angular, NestJS og TypeORM. Stage 3-dekoratorer (TS 5+) er fremtiden og kræver ingen flag.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
41
Lektioner
163
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Dekoratorer og metadata” gratis?

Ja — hele teksten til “Dekoratorer og metadata” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Dekoratorer og metadata”?

Aktivér eksperimentelle dekoratorer, skriv klasse-, metode- og egenskabsdekoratorer, og brug reflect-metadata til mønstre for dependency injection. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Dekoratorer og metadata”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Skabelonliteral-typer
  2. Dekoratorer og metadata
  3. TypeScript med React: FC-generics og hooks
  4. Strict Mode og eliminering af any
← Tilbage til Frontend Academy