Einführung in Module und Namespaces

Module und Namespaces in TypeScript helfen dabei, Ihren Code zu organisieren und zu strukturieren, insbesondere in großen Projekten.

Obwohl beide ähnliche Ziele verfolgen, werden sie unterschiedlich eingesetzt. In dieser Lektion lernen Sie ihre Unterschiede und ihre Verwendung kennen.

Was sind Module?

Module sind Dateien oder Codeteile, die Funktionalität wie Variablen, Funktionen oder Klassen exportieren, damit sie in anderen Teilen einer Anwendung wiederverwendet werden kann.

TypeScript verwendet ES-Module für Import- und Exportfunktionen, die inzwischen zum JavaScript-Standard gehören.

Exportieren und Importieren in Modulen

Sie können Code mit export aus einem Modul exportieren und mit import importieren:

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

Importieren Sie ihn in eine andere Datei:

// app.ts
import { add } from './math';
console.log(add(2, 3));

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

// app.ts
import { add } from './math';
console.log(add(2, 3));

Standardexporte

TypeScript unterstützt auch Standardexporte. Damit können Sie einen einzelnen Wert aus einem Modul exportieren:

// math.ts
export default function add(a: number, b: number): number {
  return a + b;
}

Importieren Sie ihn ohne geschweifte Klammern:

// app.ts
import add from './math';
console.log(add(2, 3));

// math.ts
export default function add(a: number, b: number): number {
  return a + b;
}

// app.ts
import add from './math';
console.log(add(2, 3));

Was sind Namespaces?

Namespaces in TypeScript bieten eine Möglichkeit, verwandten Code unter einem einzigen Namen zu gruppieren. Dadurch lassen sich Code organisieren und Namenskonflikte vermeiden.

Namespaces werden mit dem Schlüsselwort namespace definiert.

Namespaces erstellen und verwenden

Hier ist ein Beispiel für einen Namespace:

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

Sie können ihn wie folgt verwenden:

console.log(MathUtils.add(2, 3));

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

console.log(MathUtils.add(2, 3));

Module vs. Namespaces

Hier sind die wichtigsten Unterschiede zwischen Modulen und Namespaces:

• Module basieren auf Dateien und unterstützen die ES-Modulsyntax.
• Namespaces eignen sich ideal zum Organisieren von Code in einer einzelnen Datei, gelten jedoch für moderne Anwendungen als veraltet.

Best Practices

Beachten Sie bei der Arbeit mit TypeScript:

• Verwenden Sie für neue Projekte Module, da diese den modernen JavaScript-Standards entsprechen.
• Verwenden Sie Namespaces nur für ältere oder kleinere Projekte.
• Halten Sie Ihren Code stets organisiert und konsistent.

Glückwunsch!

Sie haben gelernt, wie Sie Module und Namespaces verwenden, um Ihre TypeScript-Projekte zu strukturieren und zu organisieren. Üben Sie weiter, um diese wichtigen Konzepte zu meistern!