What are Decorators in TypeScript?
Learn what TypeScript decorators are, how @ decorators add reusable behavior to classes and methods, and how DI frameworks like Angular and NestJS use them.
Expected Interview Answer
Decorators are special functions, prefixed with @, that attach reusable metadata or behavior to classes, methods, accessors, properties, or parameters at declaration time without changing their core logic.
A decorator is evaluated when the class is defined, receiving the target it decorates and returning either nothing or a replacement. TypeScript supports the modern Stage 3 ECMAScript decorators, while frameworks like Angular and NestJS still use the older experimental form enabled by the experimentalDecorators flag. They shine for cross-cutting concerns such as logging, validation, dependency injection, and serialization, keeping that plumbing separate from business code.
- Adds behavior without editing the original class
- Centralizes cross-cutting concerns like logging and auth
- Enables declarative, framework-driven configuration
- Improves readability by moving boilerplate out of methods
- Reusable across many classes and members
AI Mentor Explanation
Think of a decorator as the third umpire review layer bolted onto a normal delivery. The ball is bowled exactly as always, but an extra system wraps the event to record no-balls, snicks, and run-outs. The core action never changes, yet every delivery now carries added checking and metadata around it automatically.
Step-by-Step Explanation
Step 1
Enable decorator support
Use modern Stage 3 decorators, or set experimentalDecorators in tsconfig for the legacy framework style.
Step 2
Define the decorator function
Write a function that receives the target (and a context object in the new spec) it will augment.
Step 3
Return behavior
Return nothing to observe, or return a replacement class/method to wrap or override the original.
Step 4
Apply with @
Prefix the class, method, accessor, or field with @decoratorName at its declaration.
Step 5
Compose multiple
Stack several decorators; they evaluate bottom-up so ordering of wrapping matters.
What Interviewer Expects
- Knows decorators are functions applied at declaration time
- Understands the difference between Stage 3 and experimental decorators
- Can name valid targets: class, method, accessor, property, parameter
- Explains real uses like DI, logging, or validation
- Aware that evaluation order is bottom-up when stacked
Common Mistakes
- Thinking decorators run every call rather than at declaration time
- Confusing legacy experimental decorators with the Stage 3 standard
- Forgetting to enable the correct compiler configuration
- Assuming decorators mutate the original instead of wrapping it
- Getting the stacking evaluation order backwards
Best Answer (HR Friendly)
“A decorator is a reusable label you attach to a class or method with an @ symbol to add extra behavior, like logging or validation, without rewriting the original code. Frameworks like Angular and NestJS use them heavily to keep configuration clean and declarative.”
Code Example
function logged<T extends (...args: any[]) => any>(
target: T,
context: ClassMethodDecoratorContext
) {
return function (this: unknown, ...args: any[]) {
console.log(`Calling ${String(context.name)} with`, args)
const result = target.apply(this, args)
console.log(`${String(context.name)} returned`, result)
return result
}
}
class Calculator {
@logged
add(a: number, b: number): number {
return a + b
}
}
new Calculator().add(2, 3) // logs the call and the resultFollow-up Questions
- How do Stage 3 decorators differ from the legacy experimental ones?
- What is the evaluation order when multiple decorators are stacked?
- How does a class decorator differ from a method decorator?
- How do decorators enable dependency injection in NestJS or Angular?
- What is a decorator factory and when would you use one?
MCQ Practice
1. When is a decorator function evaluated?
Decorators execute at declaration time, when the class is defined, not on each method invocation.
2. How do stacked decorators evaluate?
Multiple decorators apply bottom-up, so the decorator nearest the declaration wraps first.
3. Which flag enables the legacy experimental decorators?
The experimentalDecorators compiler option enables the older TC39 proposal used by Angular and NestJS.
Flash Cards
What is a decorator? — A function applied with @ that adds behavior or metadata to a class or member at declaration time.
Valid decorator targets? — Classes, methods, accessors, properties/fields, and (in legacy mode) parameters.
Stacked decorator order? — Bottom-up: the decorator closest to the declaration wraps first.
Decorator factory? — A function that returns a decorator, letting you pass configuration arguments.