ES-Module (benannt vs. Standard), Re-Exports
Verstehen Sie benannte und Standard-Exporte/-Imports und wie Sie mit Re-Exports übersichtliche Modulgrenzen schaffen.
ES-Module (benannt vs. Standard), Re-Exports ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Einführung
Ziel: Verwenden Sie ES-Module sicher. Sie exportieren und importieren benannte und Standard-Symbole und kombinieren sie anschließend mit Re-Exports zu übersichtlichen öffentlichen APIs.
Benannte Exporte/Importe
Benannte Exporte verwenden export vor Deklarationen; importieren Sie sie mit geschweiften Klammern: import { name }.
// file: math.ts
export function add(a: number, b: number): number { return a + b }
export const PI = 3.14159
// file: app.ts
import { add, PI } from "./math"
console.log(add(2, 3), PI) // 5 3.14159Default-Export/-Import
Der Default-Export ist der primäre Wert eines Moduls. Importieren Sie ihn ohne geschweifte Klammern: import Foo from "./mod".
// file: greet.ts
export default function greet(name: string) { console.log(`Hello, ${name}`) }
// file: app.ts
import greet from "./greet"
greet("Ada")Default- und benannte Exporte zusammen
Sie können ein default mit mehreren benannten Exporten in einem Modul kombinieren und beide zusammen importieren.
// file: color.ts
export default "black"
export const palette = [ "red", "green", "blue" ]
// file: app.ts
import baseColor, { palette } from "./color"
console.log(baseColor, palette.length)Re-Exporte (Barrels)
Re-Exporte (export { x } from / export * from) erzeugen ein Barrel, sodass Nutzer aus einem einzigen Einstiegspunkt importieren.
// file: math/add.ts
export const add = (a: number, b: number) => a + b
// file: math/index.ts (barrel)
export { add } from "./add"
export * from "./more"
// file: app.ts
import { add } from "./math"
console.log(add(1, 2))Tipps und Stolperfallen
Tipps:
- Bevorzugen Sie benannte Exporte für bessere Auffindbarkeit und konsistente Umbenennungen.
- Verwenden Sie den Default-Export für die einzelne „Hauptsache“ eines Moduls.
- Erstellen Sie Barrels an Paketgrenzen und vermeiden Sie zirkuläre Importe.
Prüfung zum Default-Import
Schnellprüfung: Welche Importanweisung passt zu einem Default-Export?
Zusammenfassung
Zusammenfassung: Verwenden Sie benannte Exporte für mehrere Exporte, default für einen einzelnen primären Wert und Re-Exporte, um einen übersichtlichen Einstiegspunkt bereitzustellen.
Häufig gestellte Fragen
Ist die Lektion „ES-Module (benannt vs. Standard), Re-Exports“ kostenlos?
Ja — der vollständige Text von „ES-Module (benannt vs. Standard), Re-Exports“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „ES-Module (benannt vs. Standard), Re-Exports“?
Verstehen Sie benannte und Standard-Exporte/-Imports und wie Sie mit Re-Exports übersichtliche Modulgrenzen schaffen. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um TypeScript Academy zu starten?
Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.
Wie lange dauert die Lektion „ES-Module (benannt vs. Standard), Re-Exports“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- ES-Module (benannt vs. Standard), Re-Exports
- Ambient-Deklarationen (.d.ts) und Typisierungen von Drittanbietern
- Pfad-Mapping und Modulauflösung