Typescript Generics , Modules and Namespaces

Level : Advanced

Mentor: Shailendra Chauhan

Duration : 00:02:15

Generics:

Generics allow you to write reusable and type-safe code by creating functions and classes that can work with different types while maintaining type information.

Example:

function identity<T>(arg: T): T {
  return arg;
}
const result = identity<string>("Hello, Generics!");
console.log(result); // Output: Hello, Generics!

Modules:

Modules in TypeScript provide a way to organize code into separate files. Each module can contain functions, classes, or variables, and you can control what gets exported and imported to maintain a clean code structure.

Example:

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}
// app.ts
import { add } from "./math";
const sum = add(5, 3);
console.log(sum); // Output: 8

Import Export Modules:

In TypeScript, you can use the import and export keywords to control the visibility and accessibility of functions, classes, or variables across different modules, enabling you to create a modular and maintainable codebase.

Example:

// moduleA.ts
export const message = "Hello from Module A!";
// moduleB.ts
import { message } from "./moduleA";
console.log(message); // Output: Hello from Module A!

Re-Export Module:

You can re-export modules in TypeScript, allowing you to create a central module that aggregates and exports functionalities from other modules, simplifying the import process.

Example:

// moduleA.ts
export function greet() {
  console.log("Hello!");
}
// moduleB.ts
export function farewell() {
  console.log("Goodbye!");
}
// main.ts
export * from "./moduleA";
export * from "./moduleB";
// app.ts
import * as utils from "./main";
utils.greet(); // Output: Hello!
utils.farewell(); // Output: Goodbye!

Namespaces:

Namespaces provide a way to group related code elements under a common name, preventing naming conflicts. They are often used for organizing code in larger applications.

Example:

// myNamespace.ts
namespace MyNamespace {
  export function greet() {
    console.log("Hello from MyNamespace!");
  }
}
// app.ts
MyNamespace.greet(); // Output: Hello from MyNamespace!

Implementing Namespaces:

You can implement namespaces in TypeScript to encapsulate related code within a specific scope, preventing global namespace pollution and ensuring better code organization.

Example:

// shapes.ts
namespace Shapes {
  export interface Shape {
    area(): number;
  }
  export class Circle implements Shape {
    constructor(private radius: number) {}
    area(): number {
      return Math.PI * this.radius * this.radius;
    }
  }
}
// app.ts
const circle = new Shapes.Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

Self-paced Membership

Upto 60% OFF

Know More

Still have some questions? Let's discuss.