TypeScript Academy · Lektion

reflect-metadata och designtyper

Fånga parameter- och egenskapstyper vid körning.

Lektion 3 av 413 steg

reflect-metadata och designtyper är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

reflect-metadata och designtyper

Innan standardiserad metadata fanns kunde TypeScript generera typinformation vid designtid vid körning via biblioteket reflect-metadata tillsammans med kompilatorflaggan emitDecoratorMetadata. Den här lektionen behandlar den äldre men fortfarande brett använda mekanismen.

Aktivera funktionen

Två saker krävs: aktivera kompilatoralternativen och importera biblioteket en gång vid programmets startpunkt.

// tsconfig.json
// {
//   "compilerOptions": {
//     "experimentalDecorators": true,
//     "emitDecoratorMetadata": true
//   }
// }

import "reflect-metadata";

Vad som genereras

Med emitDecoratorMetadata genererar kompilatorn tre nycklar för medlemmar med dekoratorer: design:type, design:paramtypes och design:returntype. Värdena är konstruktorfunktionerna, till exempel String och Number.

Läsa design:type

För en dekorerad egenskap returnerar Reflect.getMetadata("design:type", target, key) konstruktorn för egenskapens typ.

import "reflect-metadata";

function track(target: any, key: string) {
  const t = Reflect.getMetadata("design:type", target, key);
  console.log(key, "->", t.name); // e.g. "name -> String"
}

class Person {
  @track name!: string;
  @track age!: number;
}

Läsa design:paramtypes

För en konstruktor eller metod är design:paramtypes en array med konstruktorerna för parametrarnas typer, vilket utgör grunden för beroendeinjektion.

function injectable(target: any) {
  const params = Reflect.getMetadata("design:paramtypes", target);
  console.log(params.map((p: any) => p.name)); // ["Database", "Logger"]
}

@injectable
class Service {
  constructor(private db: Database, private log: Logger) {}
}

Begränsningar hos genererade typer

Endast enkla typer som kan representeras vid körning finns kvar. Gränssnitt, unioner och generics reduceras till Object eftersom de saknar en konstruktor vid körning. Designtyper är ungefärliga, inte hela TS-typen.

Anpassad metadata med Reflect

Ni kan också definiera egna metadatanycklar med Reflect.defineMetadata, oberoende av designtyper.

import "reflect-metadata";

function required(target: any, key: string) {
  Reflect.defineMetadata("required", true, target, key);
}

function isRequired(target: any, key: string) {
  return Reflect.getMetadata("required", target, key) === true;
}

Var det används

Den här mekanismen används av många etablerade ramverk, bland annat NestJS, TypeORM och class-validator. De läser design:type och design:paramtypes för att koppla ihop beroenden och validera värden utan att ni behöver ange typerna igen.

reflect-metadata jämfört med standardmetadata

Det nya API:et Symbol.metadata är en del av språket och genererar inte designtyper. reflect-metadata tillhandahåller unikt typinformation men är knutet till det experimentella dekoratorläget. Välj en modell per projekt.

Importordningen är viktig

import "reflect-metadata" måste köras en gång, innan någon klass med dekoratorer utvärderas, eftersom den kompletterar det globala Reflect-objektet med metadatafunktionerna. Importera det allra högst upp i startfilen.

Varför det är viktigt

Genom att generera designtyper kan ramverk överbrygga gapet mellan typer vid kompilering och beteende vid körning, vilket möjliggör smidig beroendeinjektion och validering. Om ni känner till begränsningarna, alltså inga gränssnitt och inga generics, undviker ni överraskande resultat med Object.

Snabbkontroll

Testa er förståelse av reflect-metadata.

Sammanfattning

Med experimentalDecorators + emitDecoratorMetadata och en tidig import "reflect-metadata" genererar kompilatorn design:type och design:paramtypes som konstruktorer vid körning. Ramverk läser dessa för beroendeinjektion och validering, även om gränssnitt, unioner och generics reduceras till Object.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
101
Lektioner
352

Vanliga frågor

Är lektionen ”reflect-metadata och designtyper” gratis?

Ja – hela texten till ”reflect-metadata och designtyper” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”reflect-metadata och designtyper”?

Fånga parameter- och egenskapstyper vid körning. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”reflect-metadata och designtyper”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Stage 3-dekoratorer förklarade
  2. Dekoratormetadata
  3. reflect-metadata och designtyper
  4. Bygga ett dekoratorramverk
← Tillbaka till TypeScript Academy