TypeScript: Creating Function Annotations

Function annotations in TypeScript help define the structure of function parameters and return types, ensuring type safety and clarity. In this post, we’ll explore how to create and use function annotations by building a transformation function that converts a UserInterface object into a ProfileInterface object.

Define UserInterface

Let’s define a UserInterface with three properties (id, name, and age) and a method getMessage that returns a string.

interface UserInterface {
  id: string;            // Unique identifier
  name: string;          // Name of the user
  age: number;           // Age of the user

  getMessage(): string;  // Method to return a custom message
}

// Example implementation
const user: UserInterface = {
  id: "1",
  name: "Alice",
  age: 30,
  getMessage: function (): string {
    return `Hello, ${this.name}!`;
  }
};

console.log(user.getMessage()); // Output: Hello, Alice!

Define ProfileInterface

Next, we’ll define the ProfileInterface, which includes the following properties:

• name: The user’s name.
• profileUrl: A URL string based on the user’s name.
• isActive: A boolean indicating whether the profile is active.

interface ProfileInterface {
  name…