Merging Declarations in TypeScript - Namespace Example

TypeScript Modules and Namespaces : Exercise-9 with Solution

Write a TypeScript namespace called "UI" and declare an interface Button and a function createButton within it. In a separate TypeScript file, declare another interface Button and a function createButton within the same UI namespace. Show how TypeScript merges these declarations and allows you to access both sets of declarations in your code.

Sample Solution:

TypeScript Code:

main.ts

import UI from './UI';

// Create a button using the first set of declarations
const button1: UI.Button = UI.createButton("Submit");
console.log(button1); // Output: { label: "Submit" }

// Create a button using the second set of declarations
const button2: UI.Button = UI.createButton("Cancel", "small");
console.log(button2); // Output: { label: "Cancel", size: "small" } 

UI.ts

namespace UI {
  export interface Button {
    label: string;
    size?: string; // Make the 'size' property optional
  }

  export function createButton(label: string): Button;
  export function createButton(label: string, size: string): Button;
  export function createButton(label: string, size?: string): Button {
    if (size) {
      return { label, size } as Button; // Explicitly cast the return value
    } else {
      return { label } as Button; // Explicitly cast the return value
    }
  }
}

export default UI;

Explanation:

The above code consists of two TypeScript files: main.ts and UI.ts. Let's break down what each file does:

UI.ts:

• It defines a TypeScript namespace named "UI".
• Inside the "UI" namespace, it declares an interface named 'Button', which has two properties:
• label, of type string (required).
• size, of type string (optional), making the 'size' property optional.
• The file also defines a function named "createButton()". It provides multiple function signatures using TypeScript function overloads:
• createButton(label: string): Button;
• createButton(label: string, size: string): Button;
• The implementation of the "createButton()" function checks if the 'size' parameter is provided. If it is, it creates a 'Button' object with both 'label' and 'size'. If 'size' is not provided, it creates a 'Button' object with only the 'label'.
• The return value of the function is explicitly cast as a 'Button' to satisfy TypeScript's type checking.
• The UI namespace and its declarations are exported for use in other files.

main.ts:

• It imports the "UI" namespace from the UI.ts file.
• It demonstrates the use of the "UI" namespace and the "createButton()" function.
• It creates two buttons:
• button1 is created using the first set of declarations with just a 'label'.
• button2 is created using the second set of declarations with both 'label' and size.
• It logs the content of both buttons to the console.
• The expected output for 'button1' and 'button2' is printed to the console.

Output:

{ label: 'Submit' }
{ label: 'Cancel', size: 'small' }

TypeScript Editor:

See the Pen TypeScript by w3resource (@w3resource) on CodePen.

Previous: Exporting Namespace Content in TypeScript