Modules vs Namespaces

In Typescript, both modules and namespaces provide mechanisms for organizing code and avoiding naming conflicts, but they have some key differences.

It's important to note that the concept of namespaces is an older way of organizing code, and modern Typescript projects typically use modules.

Modules:

Syntax:

Use import and export keywords to manage modules.

Example:

// profile.ts
import { getFullName } from "./utility.ts";

console.log(getFullName("Alice", "Collin")); // Output: "Alice Collin"

Example:

// utility.ts
export function getFullName(first_name: string, last_name: string): string {
    return first_name + " " + last_name;
}

Scope:

Modules introduce their scope. Each module has its scope, and the names defined in a module are not automatically visible outside of it.
Helps avoid global namespace pollution.

File-Based:

Modules are typically file-based. Each module is defined in a separate file, and you can use import and export statements to control which parts of a module are visible outside.

ES6 Module Syntax:

Modules in Typescript often use the ES6 module syntax (import and export statements).
Works well with modern Javascript module systems and bundlers like webpack.

Example:

// utility.ts
export const message: string = "Module Example Through Import and Export";

export function showMessage(): void {
  console.log(message);
}

Default Exports:

Modules can have default exports using export default.

Example:

// NamespaceExample.ts
export namespace NamespaceExample {
    export const variableName: string = ""
}

Example:

/// <reference path="./NamespaceExample.ts" />

NamespaceExample.variableName;

Namespaces

Syntax:

Use the `namespace` keyword to define a namespace and the `/// ` and import keyword to import it.

Global Scope Augmentation:

Namespaces augment the global scope. All the names defined within a namespace are added to the global scope.
Can potentially lead to naming conflicts if not used carefully.

File or Declaration Merging:

Namespaces can be defined across multiple files using the directive or declaration merging.
directives are used to specify the order in which files should be concatenated during the build process.

Namespace Keyword:

Example:

// NamespaceExample.ts

namespace NamespaceExample {
  export const message: string = "This is a Sample Namespace Example";

  export function showMessage(): void {
    console.log(message);
  }
}

Namespaces use the `namespace` keyword.

Encapsulation:

Namespaces provide a way to encapsulate code within a named container. preventing from avoiding naming collisions.

Old Approach:

Namespaces were a way of organizing code before the introduction of ES6 modules. However, they are still supported in TypeScript for backward compatibility.

Avoiding Naming Collisions:

Namespaces allow us to avoid naming conflicts with other parts of our code or third-party libraries by providing a distinct namespace for our code.

<-- Modules

Generics -->

Modules vs Namespaces

In Typescript, both modules and namespaces provide mechanisms for organizing code and avoiding naming conflicts, but they have some key differences.

It's important to note that the concept of namespaces is an older way of organizing code, and modern Typescript projects typically use modules.

Modules:

Syntax:

Use import and export keywords to manage modules.

Example:

// profile.ts
import { getFullName } from "./utility.ts";

console.log(getFullName("Alice", "Collin")); // Output: "Alice Collin"

Example:

// utility.ts
export function getFullName(first_name: string, last_name: string): string {
    return first_name + " " + last_name;
}

Scope:

Modules introduce their scope. Each module has its scope, and the names defined in a module are not automatically visible outside of it.
Helps avoid global namespace pollution.

File-Based:

Modules are typically file-based. Each module is defined in a separate file, and you can use import and export statements to control which parts of a module are visible outside.

ES6 Module Syntax:

Modules in Typescript often use the ES6 module syntax (import and export statements).
Works well with modern Javascript module systems and bundlers like webpack.

Example:

// utility.ts
export const message: string = "Module Example Through Import and Export";

export function showMessage(): void {
  console.log(message);
}

Default Exports:

Modules can have default exports using export default.

Example:

// NamespaceExample.ts
export namespace NamespaceExample {
    export const variableName: string = ""
}

Example:

/// <reference path="./NamespaceExample.ts" />

NamespaceExample.variableName;

Namespaces

Syntax:

Use the `namespace` keyword to define a namespace and the `/// ` and import keyword to import it.

Global Scope Augmentation:

Namespaces augment the global scope. All the names defined within a namespace are added to the global scope.
Can potentially lead to naming conflicts if not used carefully.

File or Declaration Merging:

Namespaces can be defined across multiple files using the directive or declaration merging.
directives are used to specify the order in which files should be concatenated during the build process.

Namespace Keyword:

Example:

// NamespaceExample.ts

namespace NamespaceExample {
  export const message: string = "This is a Sample Namespace Example";

  export function showMessage(): void {
    console.log(message);
  }
}

Namespaces use the `namespace` keyword.

Encapsulation:

Namespaces provide a way to encapsulate code within a named container. preventing from avoiding naming collisions.

Old Approach:

Namespaces were a way of organizing code before the introduction of ES6 modules. However, they are still supported in TypeScript for backward compatibility.

Avoiding Naming Collisions:

Namespaces allow us to avoid naming conflicts with other parts of our code or third-party libraries by providing a distinct namespace for our code.

<-- Modules

Generics -->