Decorators

What this module covers

4 steps · TypeScript

1. Step 1. Decorators

   Decorators are functions that wrap other code. They start with @ and sit above a class, method, property, or parameter. function Log(target: any, key: string, descriptor: PropertyDescriptor) { const original = descriptor.value; descriptor.value = function(...args: any[]) { console.log(`Calling ${key} with:`, args); const result = original.apply(this, args); console.log(`${key} returned:`, result); return result; }; return descriptor; } class Calculator { @Log add(a: number, b: number): number { return a + b; } } There are 5 kinds: @ClassDecorator (constructor), @MethodDecorator (wraps a method), @PropertyDecorator (class fields), @ParameterDecorator (function parameters), and @AccessorDecorator (getters/setters).

   A class decorator runs once, right after the class is defined — it receives the constructor and can mutate it before any instance is ever created. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Does Frozen freeze the class prototype?

2. Step 2. Quiz: Decorators

   Answer these questions about decorators.

   Decorators (@Name) wrap classes, methods, properties, or parameters and require experimentalDecorators in tsconfig. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Answer the quiz below.

3. Step 3. Write a Decorator

   Write a class decorator called Frozen that freezes the class prototype. Apply it to class AppConfig.

   This is the same pattern from the concepts step, applied end-to-end: define the decorator function, then attach it with @ above the class. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Does Frozen freeze the prototype and get applied to AppConfig?

4. Step 4. Mini project: Decorators

   Write a class decorator called Frozen that freezes the class prototype. Apply it to class AppConfig. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   This is the same pattern from the concepts step, applied end-to-end: define the decorator function, then attach it with @ above the class. This project stage asks you to apply the same idea without step-by-step scaffolding. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Does Frozen freeze the prototype and get applied to AppConfig?