🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

1. Introduction

In TypeScript, both decorators and functions play important roles but serve different purposes. A function is a set of statements that performs a task or calculates a value. A decorator, however, is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use functions to modify or annotate class declarations and members.

2. Key Points

1. Purpose: Functions perform tasks or calculations, decorators modify or annotate class-related code.

2. Usage: Functions are called explicitly, decorators are declared and affect the class or member they are attached to.

3. Syntax: Decorators are prefixed with an @ symbol.

4. Design Goals: Functions are designed for reusability and logic encapsulation, and decorators for meta-programming related to class declarations.

3. Differences

Characteristic	Function	Decorator
Purpose	Perform tasks or calculations	Modify or annotate classes and members
Usage	Called explicitly	Declared, affects where it is attached
Syntax	Standard function call	Prefixed with @ symbol
Design Goals	Reusability, logic encapsulation	Meta-programming, class modification

4. Example

// Example of a Function
function add(a: number, b: number): number {
    return a + b;
}

// Example of a Decorator
function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

Output:

Function Output:
add(2, 3) returns 5
Decorator Output:
The Greeter class is now sealed.

Explanation:

1. The add function is a standard function that takes two numbers and returns their sum.

2. The sealed decorator is applied to the Greeter class, modifying its behavior by sealing the class and its prototype.

5. When to use?

- Use functions for general-purpose tasks and logic encapsulation.

- Use decorators for meta-programming tasks, like modifying or annotating class declarations and members, often in frameworks or libraries.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog

Difference Between Decorator and Function in Typescript

1. Introduction

2. Key Points

3. Differences

4. Example

Output:

Explanation:

5. When to use?

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

ChatGPT + Generative AI + Prompt Engineering for Beginners

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

Building Real-Time REST APIs with Spring Boot - Blog App

Building Microservices with Spring Boot and Spring Cloud

Java Full-Stack Developer Course with Spring Boot and React JS

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

Testing Spring Boot Application with JUnit and Mockito

Spring Boot Thymeleaf Real-Time Web Application - Blog App

Master Spring Data JPA with Hibernate

Spring Boot + Apache Kafka Course - The Practical Guide

Java Testing: Mastering JUnit 5 Framework

Reactive Programming in Java: Spring WebFlux and Testing

Spring Boot + RabbitMQ Course - The Practical Guide

Functional Programming in Java (Includes Java Collections)

ChatGPT for Java Developers: Boost Your Productivity with AI

Comments