Klassen und Module in JavaScript mit Entwicklerwerkzeugen

Eine Klasse beschreibt Objekte mit derselben Struktur und demselben Verhalten. Jedes daraus erstellte Objekt ist eine Instanz. Verwende eine Klasse, wenn mehrere Objekte dieselben Operationen benötigen; für einen einzelnen Einstellungswert reicht oft ein einfaches Objekt.

Gib jedem Objekt eigene Daten

Klassennamen verwenden üblicherweise PascalCase, etwa Rectangle. Der constructor läuft jedes Mal, wenn new eine Instanz erstellt. Darin verweist this auf das neue Objekt. Eine Zuweisung an this.width speichert eine Instanzeigenschaft; ein Parameter namens width allein ist nur eine lokale Variable.

class Rectangle {
  constructor(width, height) {
    this.width = width; // cm
    this.height = height;
  }
  area() {
    return this.width * this.height;
  }
  perimeter() {
    return 2 * (this.width + this.height);
  }
}
const a = new Rectangle(3, 4);
const b = new Rectangle(5, 2);
a.area();      // 12
a.perimeter(); // 14
b.area();      // 10

Bei a.area() ruft JavaScript die Methode auf und setzt this auf a. Die Breite von 3 cm multipliziert mit der Höhe von 4 cm ergibt 12 cm². Für den Umfang werden die beiden unterschiedlichen Seiten addiert und diese Summe verdoppelt. Das ergibt 14 cm. Eine Änderung von b.width ändert nur b.

Methoden haben kein Schlüsselwort function und keine Kommas zwischen sich. Eine Klasse hat höchstens einen Konstruktor. Wird er bei einer Klasse ohne extends weggelassen, erhält die Klasse einen leeren Standardkonstruktor. new gibt die erstellte Instanz automatisch zurück.

Ein Feld deklariert eine Eigenschaft im Klassenrumpf: unit = "cm"; gibt jeder Instanz einen eigenen Wert. label; hat zunächst den Wert undefined. In einer Klasse ohne extends werden Instanzfelder initialisiert, bevor der Konstruktorrumpf ausgeführt wird.

Über Zugriffsmethoden lesen und zuweisen

Ein Getter wird ausgeführt, wenn eine Eigenschaft gelesen wird. Mit get area() { return this.width * this.height; } liest du a.area ohne Klammern. Das ist eine Alternative zur obigen Methode, die a.area() verwendet.

Ein Setter wird bei einer Zuweisung ausgeführt und kann ungültige Eingaben ablehnen. Er benötigt einen separaten Speicherplatz: set width(value) { this.width = value; } ruft sich wiederholt selbst auf, bis der Stapel überläuft. Speichere den Wert unter einem anderen Namen, etwa im privaten Feld #width.

Das Empfängerobjekt beim Übergeben einer Methode beibehalten

class Counter {
  count = 0;
  increment() { this.count++; }
}
const counter = new Counter();
const inc = counter.increment;
// inc(); // TypeError: this is undefined
const safeInc = () => counter.increment();
safeInc(); // counter.count is 1

Klassenmethoden laufen im strikten Modus. Ein losgelöster Aufruf hat kein Empfängerobjekt vor dem Punkt, daher ist this gleich undefined. Auch der Aufrufer eines Callbacks kann ein anderes Empfängerobjekt übergeben. Ein Pfeilfunktions-Wrapper erhält den Aufruf auf counter; counter.increment.bind(counter) erstellt eine gebundene Funktion. Ein Pfeilfunktionsfeld, increment = () => { this.count++; };, erfasst ebenfalls das this der Instanz.

Der Aufruf von Rectangle(3, 4) ohne new löst einen TypeError aus. Die Verwendung einer Klasse vor der Initialisierung ihrer Deklaration löst einen ReferenceError aus. Klassen unterscheiden sich hier von Funktionsdeklarationen, die früher in einer Datei aufgerufen werden können.

JSON erhält Daten, nicht das Verhalten von Klassen. JSON.stringify(a) speichert die eigenen öffentlichen Werte für Breite und Höhe. Das Parsen dieses Textes erstellt ein einfaches Objekt; erstelle mit new Rectangle(data.width, data.height) wieder eine Instanz, um ihre Methoden zu nutzen.

Ein Objekt kann eine kleine öffentliche Schnittstelle anbieten und gleichzeitig seine gespeicherten Daten privat halten. Das ist Kapselung. Die Schnittstelle entscheidet, welche Änderungen gültig sind; der private Zugriffsschutz allein prüft keinen Wert, der an einen öffentlichen Setter übergeben wird.

Validierung an der Schnittstelle platzieren

Ein privates Feld beginnt mit # und muss im Klassenrumpf deklariert werden. Code innerhalb dieser Klasse liest es über this.#target. Code außerhalb kann t.#target weder lesen noch schreiben: Das ist ein Syntaxfehler und kein Eigenschaftszugriff, der undefined zurückgibt.

class Thermostat {
  static MIN = 10;
  static MAX = 30;
  #target = 20;

  get target() { return this.#target; }
  set target(value) {
    if (!Number.isFinite(value) ||
        value < Thermostat.MIN ||
        value > Thermostat.MAX) {
      throw new RangeError("Target must be between 10 and 30 °C");
    }
    this.#target = value;
  }
}
const t = new Thermostat();
t.target = 22;
t.target; // 22
// t.target = 35; // throws RangeError

Der Getter ermöglicht das Lesen des Werts, ohne den Speicher offenzulegen. Der Setter lehnt zuerst nicht endliche oder nicht numerische Eingaben ab, dann Werte außerhalb des Bereichs von 10 bis einschließlich 30 °C. Nur ein akzeptierter Wert erreicht die Zuweisung. Nach einem abgelehnten Versuch, 35 °C einzustellen, bleibt der Sollwert bei 22 °C. Auch eine numerische Zeichenkette wie "22" besteht die Prüfung mit Number.isFinite nicht.

Getter und Setter verwenden #target, sodass die Zuweisung an t.target den Setter nicht rekursiv aufruft. Die Namen target und #target sind verschieden. Ein vorangestellter Unterstrich wie in _target bittet andere Programmierer nur darum, eine öffentliche Eigenschaft als intern zu behandeln; JavaScript erlaubt weiterhin den Zugriff darauf.

Private Felder erscheinen nicht in Object.keys, for...in oder bei der JSON-Serialisierung. Dieses Thermostat hat keine eigenen öffentlichen Felder, daher ergibt JSON.stringify(t) den Wert "{}". Zum Speichern eines Objekts kann deshalb eine ausdrückliche öffentliche Methode nötig sein, die die zu speichernden Daten zurückgibt.

Interne Hilfsmethoden privat halten

Eine Methode wie #check(value) { ... } kann Validierungsschritte enthalten und wird innerhalb der Klasse als this.#check(value) aufgerufen. Sie ist nicht Teil der öffentlichen Schnittstelle. Innerhalb der Klasse prüft #target in obj, ob ein Objekt dieses private Feld besitzt.

Eine Unterklasse kann den privaten Namen ihrer Oberklasse nicht direkt verwenden. Sie kann den öffentlichen Getter oder Setter der Oberklasse verwenden, der in der Klasse ausgeführt wird, die das Feld deklariert hat. So behält die Oberklasse die Kontrolle über ihren eigenen Zustand.

Gemeinsam genutzte Aufgaben auf der Klasse ablegen

Ein statisches Mitglied gehört zur Klasse. Thermostat.MIN ist 10, während t.MIN den Wert undefined hat. Diese statischen Schranken sind öffentliche Felder; static allein macht sie nicht schreibgeschützt.

class Tracked {
  static count = 0;
  constructor() { Tracked.count++; }
}
new Tracked();
new Tracked();
new Tracked();
Tracked.count; // 3

Jeder Konstruktor erhöht einen Zähler auf Klassenebene. Ein Instanzfeld würde dagegen jedem Objekt einen eigenen Zähler geben. Eine statische Fabrikmethode wie static square(side) { return new Rectangle(side, side); } gehört in Rectangle und wird als Rectangle.square(5) aufgerufen. Eine statische Vergleichshilfsfunktion kann an sort übergeben werden, wenn sie die verglichenen Objekte als Argumente entgegennimmt.

Innerhalb einer statischen Methode ist this die Klasse, auf der sie aufgerufen wurde; es ist keine Rechteckinstanz mit einer Breite. Ein Initialisierungsblock static { ... } führt die Einrichtung einmal aus, wenn die Klasse definiert wird, und kann auf die privaten Mitglieder dieser Klasse zugreifen.

Vererbung bildet eine „ist ein“-Beziehung ab. Ein Kreis ist eine Form, daher kann eine Klasse Circle die gemeinsame Beschreibung einer Form erben und zugleich eine eigene Flächenberechnung bereitstellen. Eine Unterklasse erbt Verhalten, ohne jede Methode in ihren Rumpf zu kopieren.

Initialisiere zuerst die Oberklasse

class Circle extends Shape macht Circle zu einer Unterklasse und Shape zu ihrer Oberklasse. In einem Unterklassenkonstruktor ruft super(...) den Konstruktor der Oberklasse auf. Dieser Aufruf muss vor der ersten Verwendung von this ausgeführt werden. Eine Unterklasse ohne Konstruktor erhält einen, der ihre Argumente an die Oberklasse weitergibt.

class Shape {
  constructor(name) { this.name = name; }
  area() { return 0; }
  describe() {
    return this.name + " with area " +
      this.area().toFixed(2) + " cm²";
  }
}
class Circle extends Shape {
  constructor(radius) {
    super("Circle");
    this.radius = radius;
  }
  area() { return Math.PI * this.radius ** 2; }
}
class Rectangle extends Shape {
  constructor(width, height) {
    super("Rectangle");
    this.width = width;
    this.height = height;
  }
  area() { return this.width * this.height; }
}

Der Aufruf new Circle(2).describe() ergibt "Circle with area 12.57 cm²". Zuerst setzt super den Namen. Der Kreis speichert seinen Radius. Das geerbte describe() ruft dann this.area() auf, wodurch die Methode des Kreises gefunden wird. toFixed(2) formatiert das Ergebnis für die Anzeige. new Rectangle(3, 4).describe() ergibt "Rectangle with area 12.00 cm²".

Überschreibe oder erweitere eine Methode

Eine Unterklasse überschreibt eine Methode, indem sie eine Methode mit demselben Namen deklariert. Sie kann die Version der Oberklasse über super.methodName() aufrufen.

class Square extends Rectangle {
  constructor(side) {
    super(side, side);
    this.name = "Square";
  }
  describe() {
    return super.describe() +
      " (all sides " + this.width + " cm)";
  }
}
new Square(5).describe();
// "Square with area 25.00 cm² (all sides 5 cm)"

super(side, side) initialisiert Breite und Höhe mit demselben Wert. Die geerbte Flächenmethode multipliziert sie, und die überschreibende Methode ergänzt die geerbte Beschreibung um Informationen. Werden erforderliche Argumente für die Oberklasse vergessen, können ihre Eigenschaften den Wert undefined haben; der Aufruf von super() allein reicht nicht, wenn die Oberklasse Werte benötigt.

Polymorphie bedeutet, dass derselbe Aufruf unterschiedliches Verhalten auswählen kann. Eine Schleife kann s.describe() auf Kreisen und Rechtecken aufrufen; jede Beschreibung ruft das passende area() auf. Das Hinzufügen einer Form mit eigener Flächenmethode erfordert keinen neuen Fall in dieser Schleife.

Sowohl new Circle(2) instanceof Circle als auch new Circle(2) instanceof Shape sind wahr. Auch statische Mitglieder werden geerbt. Die Beziehung einer Instanz zu einer Klasse folgt ihrer Prototypenkette; genau diese prüft instanceof normalerweise.

Wähle eine sinnvolle Beziehung

Eine Klasse kann nur eine Oberklasse erweitern. Für eine „hat ein“-Beziehung verwende Komposition: Ein Auto hat einen Motor und fordert ihn mit this.engine.start() auf, Arbeit zu leisten. Die gemeinsame Nutzung einer Hilfsmethode allein ist kein Grund zu behaupten, dass eine nicht verwandte Klasse eine Art der anderen ist. Ein Mixin kopiert eine Gruppe von Methoden auf einen Prototyp, zum Beispiel mit Object.assign(Rectangle.prototype, serializable). Tiefe Ketten von Oberklassen können es erschweren, Änderungen nachzuvollziehen.

Auch eingebaute Klassen können erweitert werden. Ein Konstruktor von ValidationError extends Error ruft super(message) auf, setzt this.name = "ValidationError" und kann this.field = field speichern. Ein catch-Block kann mit err instanceof ValidationError diesen Fehler anders behandeln und die geerbte Meldung lesen.

Ein Objekt hat eine verborgene Verknüpfung zu einem anderen Objekt, seinem Prototyp, oder zu null. Beim Lesen einer fehlenden Eigenschaft wird dieser Verknüpfung gefolgt. JavaScript sucht weiter, bis es die Eigenschaft findet oder null erreicht; eine erfolglose Suche gibt undefined zurück.

Unterscheide gespeicherte und geerbte Werte

const defaults = { theme: "light", fontSize: 16 };
const settings = Object.create(defaults);
settings.fontSize = 18;
settings.theme;                   // "light"
settings.fontSize;                // 18
defaults.fontSize;                // 16
Object.hasOwn(settings, "theme"); // false
"theme" in settings;              // true
Object.keys(settings);            // ["fontSize"]

Object.create(defaults) erstellt ein leeres Objekt, dessen Prototyp defaults ist. Die Zuweisung an fontSize erstellt eine eigene Eigenschaft, die den geerbten Wert verdeckt. Sie lässt defaults.fontSize unverändert. Nach delete settings.fontSize erreicht die Suche wieder den geerbten Wert 16.

Eine fehlende eigene Eigenschaft kann dennoch in der Kette existieren. Klassenmethoden sind nicht aufzählbar, daher führt for...in sie normalerweise nicht auf. Lies den Prototyp des Objekts mit Object.getPrototypeOf(settings). Bevorzuge diese Object-Methoden gegenüber dem älteren Zugriff über __proto__.

Sieh, wie Klassen Methoden gemeinsam nutzen

Für eine Rechteckinstanz r ist Object.getPrototypeOf(r) === Rectangle.prototype wahr. Ihre Breite ist eine eigene Eigenschaft, während area normalerweise auf Rectangle.prototype gespeichert ist. Object.hasOwn(r, "area") ist falsch, obwohl r.area() funktioniert. Ein Pfeilfunktionsfeld verhält sich anders: Es erstellt auf jeder Instanz eine eigene Funktionseigenschaft.

Eine geerbte Methode erhält weiterhin das Objekt vor dem Punkt als this. Die gemeinsam genutzte Flächenmethode kann daher für jedes Rechteck andere Maße lesen, ohne auf jedem Objekt eine separate Methode zu speichern.

Für die Formenhierarchie folgt die Suche diesem Weg:

circle -> Circle.prototype -> Shape.prototype
       -> Object.prototype -> null

Die Flächenmethode des Kreises wird zuerst gefunden. Seine Beschreibung stammt von Shape.prototype, und toString kann von Object.prototype stammen. Shape.prototype in der Kette erklärt auch, warum circle instanceof Shape wahr ist.

Der Name Rectangle.prototype bezeichnet den Prototyp, den Rechteckinstanzen erhalten. Er bezeichnet nicht den verborgenen Prototyp der Funktion Rectangle selbst; für diese Klasse ist das Shape, wenn sie Shape erweitert, oder Function.prototype bei einer Klasse ohne Oberklasse.

Erkenne älteren Konstruktorcode

function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}
Rectangle.prototype.area = function () {
  return this.width * this.height;
};

Konstruktorfunktionen verwenden dieselbe grundlegende Struktur von Instanz und Prototyp. Die Klassensyntax ergänzt Regeln: new ist erforderlich, der Rumpf läuft im strikten Modus, Methoden sind nicht aufzählbar und private Mitglieder sind verfügbar. typeof Rectangle ist bei beiden Formen "function".

Arrays finden map auf Array.prototype; Zeichenkettenmethoden stammen von String.prototype. Vermeide es, eingebaute Prototypen um eigene Methoden zu ergänzen: Bibliotheken und künftige Standards können dieselben Namen mit anderem Verhalten verwenden. Weil eine Bibliothek bereits flatten verwendete, erhielt die Standard-Arraymethode unter anderem deshalb den Namen flat.

Eine gewöhnliche Zuweisung an eine Dateneigenschaft erstellt oder ändert eine eigene Eigenschaft, aber ein geerbter Setter kann die Zuweisung abfangen. Den Prototyp eines vorhandenen Objekts mit Object.setPrototypeOf zu ändern, ist erlaubt, kann aber die Leistung beeinträchtigen; wähle den Prototyp beim Erstellen des Objekts.

Ein ES-Modul hat einen eigenen Gültigkeitsbereich. Seine Deklarationen auf oberster Ebene bleiben innerhalb der Datei, sofern sie nicht exportiert werden. Importeure fordern bestimmte Funktionen und Werte an und machen so Abhängigkeiten sichtbar, ohne alles in globalen Variablen abzulegen.

Wähle die passende Exportform

// geometry.js
export const round2 = (n) => Math.round(n * 100) / 100;
export function circleArea(r) {
  return Math.PI * r * r;
}

// shapes.js
import { circleArea, round2 } from "./geometry.js";
export default class Circle {
  constructor(r) { this.r = r; }
  area() { return round2(circleArea(this.r)); }
}

// main.js
import Circle from "./shapes.js";
console.log(new Circle(3).area()); // 28.27

Das Einstiegsmodul importiert eine Klasse. Das Modul der Klasse importiert zwei Hilfsfunktionen. Bei einem Radius von 3 cm beträgt die Fläche etwa 28,274 cm²; die Rundungshilfsfunktion ergibt 28,27. Das Einstiegsmodul erhält nicht automatisch Zugriff auf die Hilfsfunktionen, die innerhalb eines anderen Moduls verwendet werden.

Ein Modul kann viele benannte Exporte, aber höchstens einen Standardexport haben. Benannte Importe verwenden den exportierten Namen in geschweiften Klammern; den lokalen Namen für einen Standardimport wählt der Importeur. import { Circle } fordert nicht den Standardexport an, auch wenn die exportierte Klasse Circle heißt.

Benenne um, gruppiere und reexportiere

import { circleArea as areaOfCircle } from "./geometry.js"; gibt einer importierten Funktion einen anderen lokalen Namen. export { circleArea as area }; ändert ihren exportierten Namen. Eine Exportliste kann auch Deklarationen verfügbar machen, die zuvor in der Datei erstellt wurden.

import * as geometry from "./geometry.js"; erstellt ein Modulnamensraumobjekt. Rufe geometry.circleArea(3) auf. Ein Namensraum enthält einen Standardexport unter der Eigenschaft default, sofern das Modul einen hat.

Eine Datei kann die Exporte anderer Dateien zusammenfassen: export { circleArea } from "./geometry.js"; leitet einen benannten Export weiter. export * from "./geometry.js"; leitet benannte Exporte weiter, aber nicht den Standardexport dieses Moduls.

Verstehe gemeinsame Auswertung und Live-Bindungen

Module laufen im strikten Modus und haben auf oberster Ebene undefined als this. Abhängigkeiten werden vor dem eigenen Rumpf des importierenden Moduls ausgewertet. Wird dasselbe aufgelöste Modul aus mehreren Dateien importiert, werden ein einmal ausgewertetes Modul und sein Zustand gemeinsam genutzt.

Angenommen, ein Modul exportiert let count = 0 und increment() ändert den Wert. Nachdem ein Importeur increment() aufgerufen hat, ergibt sein importiertes count beim Lesen 1. Importe sind Live-Bindungen, keine Momentaufnahmen. Der Importeur kann der Bindung selbst keinen neuen Wert zuweisen. Ist ein Export ein Objekt, kann dennoch eine seiner Eigenschaften geändert werden, und andere Importeure sehen die Änderung.

Statische Importdeklarationen gehören auf die oberste Ebene des Moduls. Ein statischer Import innerhalb eines if oder einer Funktion ist ein Syntaxfehler; dynamisches import() übernimmt das spätere Laden. Füge .js in relative ES-Modulpfade für Browser und Node.js ein: Diese Ladesysteme ergänzen die Endung nicht. Ein Pfadfehler oder eine Verwechslung von benanntem und Standardexport verhindert das Laden des Moduls. Korrigiere daher den Import, bevor du im Code, der danach laufen sollte, nach einem Fehler suchst.

Dieselbe ES-Modulsyntax läuft im Browser und in Node.js. Jede Umgebung muss dennoch wissen, dass eine Datei ein Modul ist, und jede hat ihre eigene Art, die angeforderten Pfade aufzulösen.

Starte ein Browsermodul

<script type="module" src="main.js"></script>

Lade nur das Einstiegsmodul mit einem script-Tag. Seine Importe rufen die anderen Dateien automatisch ab. Modulskripte ohne async werden verzögert ausgeführt: Sie laufen nach dem Parsen des HTML in Dokumentreihenfolge. Die Seitenelemente, auf die sie zugreifen, sind dann verfügbar.

Stelle den Ordner mit einem lokalen Server wie python3 -m http.server oder npx serve über HTTP bereit und öffne dessen Localhost-Adresse. Das Öffnen der HTML-Datei vom Datenträger führt wegen der Sicherheitsregeln des Browsers meist dazu, dass Modulanfragen fehlschlagen. Der Server muss JavaScript außerdem mit einem geeigneten MIME-Typ wie text/javascript zurückgeben.

Moduldeklarationen werden nicht global. Ein Inline-Handler wie onclick="save()" kann eine modullokale Funktion nicht finden. Registriere den Handler stattdessen aus JavaScript heraus:

const button = document.querySelector("#save");
function save() { console.log("Saved"); }
button.addEventListener("click", save);

Löse Pfade und Paketnamen auf

Der Modulbezeichner ist die Zeichenkette, die das Modul benennt. ./geometry.js ist relativ zur importierenden Datei; ../geometry.js führt einen Ordner nach oben. Ein mit / beginnender Pfad beginnt im Stammverzeichnis der Website, während eine vollständige HTTPS-URL den vollständigen Ort angibt.

Ein bloßer Name wie "date-fns" hat kein Pfadpräfix. Ein Browser kann dafür nicht node_modules durchsuchen. Eine vor den Modulskripten platzierte Import-Map ordnet einem bloßen Namen eine URL zu. Ein Entwicklungsserver oder Bundler kann stattdessen installierte Pakete auflösen und für den Browser vorbereiten. Die Installation eines Pakets allein ändert das Ladesystem des Browsers nicht.

Lege das Modulformat für Node.js ausdrücklich fest

Node.js liest type aus der nächstgelegenen übergeordneten package.json. Ohne ausdrücklichen Typ können aktuelle Versionen ES-Modulsyntax in einer ansonsten mehrdeutigen .js-Datei erkennen. Setze in einem neuen ES-Modulprojekt "type": "module", damit sich die Werkzeuge über das vorgesehene Format einig sind. Die Endungen .mjs und .cjs haben Vorrang vor dieser Einstellung.

Mit den drei Dateien des Kreisbeispiels und { "type": "module" } gibt node main.js den Wert 28.27 aus. Dieselben Dateien funktionieren über ein Browsermodulskript, das über HTTP bereitgestellt wird.

Erkenne CommonJS und eingebaute Module

CommonJS ist das ältere Modulsystem von Node.js. Es verwendet require() zum synchronen Laden und module.exports zum Bereitstellen von Werten. Ein ES-Modul kann module.exports eines CommonJS-Pakets als Standardexport importieren. Aktuelles Node.js kann auch synchrone ES-Modulgraphen mit require laden; Top-Level-await in diesem Graphen verhindert das synchrone Laden.

Verwende in einem ES-Modul import { readFile } from "node:fs/promises"; für ein eingebautes Node.js-Modul. require, module und __dirname sind CommonJS-Variablen, keine globalen ES-Modulvariablen. import.meta.url liefert die URL des Moduls; neuere Node.js-Versionen stellen für lokale Dateimodule auch import.meta.dirname bereit.

Wird eine Importanweisung abgelehnt, weil sie außerhalb eines Moduls steht, prüfe die Einstellung des Ladesystems: type="module" im Browser-HTML oder den Pakettyp beziehungsweise die Dateiendung in Node.js.

Ein statischer Import deklariert eine Abhängigkeit, die beim Laden eines Moduls benötigt wird. Ein dynamischer Import ist ein Ausdruck: Er beginnt mit dem Laden, wenn die Ausführung ihn erreicht, und gibt ein Promise zurück. Verwende ihn für eine Funktion, die bei vielen Besuchen gar nicht benötigt wird.

Warte auf das Namensraumobjekt

const button = document.querySelector("#show-chart");
button.addEventListener("click", async () => {
  try {
    const { drawChart } = await import("./chart.js");
    drawChart(measurements);
  } catch (err) {
    console.error("Could not load the chart module", err);
  }
});

Hier sind measurements die Daten, die die Seite gesammelt hat. Der erste Klick lädt das Diagrammmodul und ruft seine exportierte Funktion auf. Spätere Klicks verwenden das ausgewertete Modul erneut. Das Promise kann bei einem Lade- oder Auswertungsfehler abgelehnt werden, daher fängt der Handler den Fehler ab.

import("./chart.js").drawChart versucht, eine Eigenschaft des Promise zu lesen, nicht des geladenen Moduls. Warte auf das Promise oder verwende .then. Greife bei einem Standardexport auf die Eigenschaft default des Namensraums zu: const { default: Chart } = await import("./chart.js");. Anders als eine statische Deklaration kann dieser Ausdruck innerhalb einer Funktion oder Bedingung stehen und sein Pfad kann zur Laufzeit berechnet werden.

Warte während der Moduleinrichtung

Ein ES-Modul kann Top-Level-await außerhalb einer Funktion verwenden:

const response = await fetch("./config.json");
export const config = await response.json();

Module, die von diesem Modul abhängen, warten, bis seine Auswertung abgeschlossen ist, bevor ihre eigenen Rümpfe ausgeführt werden. Unabhängige Module können fortfahren. Eine langsame Konfigurationsanfrage verzögert daher die davon abhängigen Module, aber nicht unbedingt jeden Teil des Programms. Klassische Skripte und CommonJS erlauben kein Top-Level-await; verwende diese Modulfunktion für Vorbereitungen, die abhängige Module tatsächlich zuerst benötigen.

Gib jedem Modul eine klare Aufgabe

Eine Aufgabenanwendung kann diese Zuständigkeiten verwenden:

Die Daten- und Speichermodule importieren die Benutzeroberfläche nicht. Sie können getestet und wiederverwendet werden, ohne Seitenelemente zu erstellen. Wenn Berechnung und Speicherung außerhalb von Event-Handlern bleiben, lassen sich Fehler auch leichter eingrenzen.

Privater Zustand auf oberster Ebene wird von allen Importeuren gemeinsam genutzt. In let nextId = 1; export function createId() { return nextId++; } bleibt die Variable privat, während die Funktion kontrollierten Zugriff ermöglicht. Zwei Importeure, die sie jeweils einmal aufrufen, erhalten 1 und 2, nicht zwei separate Zähler, die bei 1 beginnen.

Steuere die Arbeit beim Import

import "./setup.js"; ist ein Seiteneffektimport: Er lädt das Modul und wertet es aus, ohne lokale Namen anzufordern. Seiteneffekte können für die Einrichtung nützlich sein, aber ein wiederverwendbares Modul lässt sich leichter testen, wenn es auf oberster Ebene Funktionen und Werte definiert und seine Funktionen die Arbeit ausdrücklich starten.

Eine Index- oder Barrel-Datei sammelt Reexporte. Sie kann eine Schnittstelle vereinfachen, aber große Barrel-Dateien können zusätzlichen Code einbeziehen und einen Zyklus verbergen. Eine zyklische Abhängigkeit entsteht, wenn Module direkt oder über andere Module voneinander abhängen. Ein Zyklus kann funktionieren, aber das Lesen einer Bindung, bevor das exportierende Modul sie initialisiert, verursacht einen ReferenceError. Verschiebe gemeinsam genutzte Definitionen in ein drittes Modul, das beide Seiten importieren, um diesen Abhängigkeitszyklus aufzulösen.

npm ist der mit Node.js gelieferte Paketmanager. Der Name bezeichnet sowohl ein Kommandozeilenwerkzeug als auch dessen öffentliche Paket-Registry. Ein Paket ist ein durch package.json beschriebener Ordner; der Stammordner eines Projekts ist der Ordner, der diese Datei enthält.

Erstelle die Projektbeschreibung

Führe node -v und npm -v aus, um die installierten Werkzeuge zu prüfen. Wechsle in den vorgesehenen Projektordner, bevor du npm init ausführst. Der interaktive Befehl stellt Fragen; npm init -y übernimmt die Standardwerte. Bearbeite dann die Datei, um das Projekt zu beschreiben.

{
  "name": "shape-lab",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "node src/main.js",
    "test": "node --test",
    "lint": "eslint ."
  },
  "dependencies": {},
  "devDependencies": {}
}

Dies ist JSON, kein JavaScript-Objektliteral. Schlüssel und Zeichenketten stehen in doppelten Anführungszeichen. Kommentare und nachgestellte Kommas sind ungültig. Ein Parserfehler kann npm stoppen, bevor es einen Befehl ausführt.

Der name wird kleingeschrieben und ist URL-tauglich; veröffentlichte Paketnamen haben höchstens 214 Zeichen. version beschreibt dieses Projekt, nicht seine Node.js-Version. private: true verhindert eine versehentliche Veröffentlichung über npm. type: "module" sorgt dafür, dass Node.js die .js-Dateien des Pakets als ES-Module lädt.

Veröffentlichte Pakete können mit main und exports Einstiegspunkte für ihre Nutzer definieren. Ein optionaler Eintrag engines wie { "node": ">=22" } gibt unterstützte Node.js-Versionen an. Lies diese Anforderungen, wenn ein Projekt auf einer älteren Installation fehlschlägt.

Nutze Skripte als Aufgabenmenü

npm run listet verfügbare Skripte auf. In diesem Beispiel führt npm run lint den Befehl eslint . aus, npm start startet die Anwendung und npm test führt den Testrunner aus. start und test haben diese Kurzformen; andere Aufgabennamen verwenden normalerweise npm run.

npm fügt das Verzeichnis node_modules/.bin des Projekts vorübergehend zum Suchpfad für Befehle hinzu. Ein lokal installiertes Werkzeug kann daher direkt in einem Skript genannt werden. Alle, die das Projekt nutzen, führen dasselbe festgehaltene Werkzeug aus, statt sich auf eine globale Installation zu verlassen.

Zusätzliche Argumente folgen auf --: npm run lint -- --fix übergibt --fix an ESLint. Das Skript gibt der Aufgabe einen stabilen Namen, auch wenn das Team das dahinterstehende Werkzeug ändert. Beginne mit dem Feld scripts, wenn du lernst, wie du an einem unbekannten Projekt arbeitest.

Lies Versionsnummern

Die semantische Versionierung verwendet HAUPTVERSION.NEBENVERSION.PATCH. Ausgehend von 2.4.1 wird eine kompatible Fehlerkorrektur zu 2.4.2, eine kompatible Funktion zu 2.5.0 und eine inkompatible Änderung zu 3.0.0. Ein Wechsel auf eine neue Hauptversion kann Änderungen an Code erfordern, der das Paket verwendet. Vor 1.0.0 befindet sich ein Projekt in früher Entwicklung und Veröffentlichungen können sich freier ändern.

Führe gelegentlich einen Paketbefehl aus

npx serve führt den installierten Befehl aus, wenn er lokal verfügbar ist. Andernfalls kann npx nachfragen, ob es das Paket vorübergehend herunterladen und ausführen soll. Das ist für ein Werkzeug nützlich, das keine dauerhafte Projektabhängigkeit werden muss. Prüfe den genauen Paketnamen und die Vertrauenswürdigkeit des Codes, bevor du ihn installierst oder ausführst: Paketbefehle und Installationsskripte können mit deinen Berechtigungen ausgeführt werden.

Ein im falschen Ordner ausgeführter Befehl kann fehlschlagen, weil package.json fehlt, oder eine Installation kann Paketdateien an einem unbeabsichtigten Ort erstellen. Prüfe zuerst den aktuellen Ordner. Halte Skripte verständlich und vermeide betriebssystemspezifische Befehlskniffe, wenn das Projekt auf mehreren Systemen laufen muss.

Eine Abhängigkeit ist Code, auf den ein Projekt angewiesen ist. npm hält direkte Abhängigkeiten in package.json fest, installiert Pakete in node_modules und verzeichnet den genauen installierten Abhängigkeitsbaum in package-lock.json.

Trenne Produktcode von Entwicklungswerkzeugen

npm install date-fns fügt ein Laufzeitpaket zu dependencies hinzu. npm install --save-dev eslint fügt ein Entwicklungswerkzeug zu devDependencies hinzu; -D ist die Kurzform. Linter, Codeformatierer, Testrunner, Bundler und TypeScript gehören normalerweise in die Entwicklungsliste.

Wenn ein anderes Projekt ein veröffentlichtes Paket installiert, installiert npm dessen Abhängigkeiten, aber nicht dessen Entwicklungsabhängigkeiten. Eine Browseranwendung kann Laufzeitabhängigkeiten dennoch in ihre endgültigen Dateien bündeln, obwohl das Buildwerkzeug selbst eine devDependency ist.

npm install ohne Paketnamen installiert die für das Projekt aufgeführten Abhängigkeiten. npm uninstall <package> entfernt ein Paket und seinen Eintrag. Nach der Installation von date-fns können Node.js und Buildwerkzeuge import { format } from "date-fns"; auflösen. Ein einfacher Browser benötigt weiterhin eine Auflösungshilfe wie eine Import-Map oder einen Entwicklungsserver.

Lies den erlaubten Bereich

Das Caret ist der übliche Standard von npm. Bei Versionen ab 1.0.0 erlaubt es kompatible Aktualisierungen der Neben- und Patchversion. Unter 1.0.0 ist es strenger. Für ^2.3.0 passen 2.3.5 und 2.9.0; 2.2.9 ist zu alt und 3.0.0 überschreitet die Grenze zur nächsten Hauptversion.

Ein erlaubter Bereich bezeichnet keine einzelne installierte Version. Das tut die Lockdatei, einschließlich der transitiven Abhängigkeiten, also der Pakete, die deine ausgewählten Pakete benötigen.

Stelle eine Installation wieder her

Gib package.json und package-lock.json zusammen mit dem Projekt weiter. Lass npm die Lockdatei verwalten. Der generierte Ordner node_modules kann neu erstellt werden und wird nicht weitergegeben.

Verwende npm install während der Entwicklung, wenn sich die Abhängigkeitseinträge ändern können. Verwende npm ci für eine saubere, reproduzierbare Installation: Es benötigt die Lockdatei, entfernt ein vorhandenes node_modules, installiert den festgelegten Baum und schreibt keine der beiden Paketdateien neu. Es schlägt fehl, wenn Paketdatei und Lockdatei nicht übereinstimmen. Behebe diese Abweichung während der Entwicklung bewusst; das Löschen der Lockdatei kann viele Versionen unbemerkt ändern.

Aktualisiere aus einem bestimmten Grund

npm outdated vergleicht die aktuelle, die gewünschte und die neueste Version. Die gewünschte Version ist die neueste, die der deklarierte Bereich erlaubt; die neueste kann eine Hauptversion außerhalb dieses Bereichs sein. npm update aktualisiert innerhalb der Bereiche und hält den resultierenden Baum fest. Um bewusst zu einer neuen Hauptversion zu wechseln, lies das Änderungsprotokoll, führe npm install <package>@latest aus und prüfe das Projekt mit seinen Tests.

Installiere Projektwerkzeuge lokal, damit ihre Versionen festgehalten werden. Prüfe vor dem Hinzufügen einer weiteren Abhängigkeit deren Pflege, Verbreitung und Lizenz sowie die Frage, ob eine eingebaute Funktion das Problem bereits löst. structuredClone() deckt unterstützte Anwendungsfälle für tiefe Kopien ab; Intl.DateTimeFormat formatiert Datumsangaben ohne Datumspaket.

npm audit meldet bekannte Sicherheitslücken in installierten Versionen. Lies den Bericht, um den betroffenen Code und seine Nutzung zu verstehen. npm audit fix kann kompatible Korrekturen anwenden, beweist aber weder, dass jede Sicherheitslücke behoben ist, noch, dass eine Aktualisierung das Verhalten des Projekts erhält.

Ein Linter liest Quellcode, ohne ihn auszuführen, und meldet wahrscheinliche Fehler oder riskante Muster. Ein Codeformatierer gestaltet das Layout einheitlich um. ESLint und Prettier arbeiten oft zusammen, weil diese Aufgaben unterschiedliche Probleme lösen.

Konfiguriere die Prüfungen

npm init @eslint/config@latest stellt Fragen zum Projekt, installiert Entwicklungspakete und erstellt eine Konfigurationsdatei. Aktuelles ESLint verwendet eine flache Konfiguration, üblicherweise in eslint.config.js.

import js from "@eslint/js";
import globals from "globals";

export default [
  js.configs.recommended,
  {
    languageOptions: { globals: globals.browser },
    rules: {
      eqeqeq: "error",
      "no-unused-vars": "warn",
    },
  },
];

Die empfohlene Konfiguration aktiviert Regeln zur Fehlersuche. Die globalen Browsernamen teilen ESLint mit, dass Namen wie document existieren. So wird eine tatsächlich vorhandene Funktion der Umgebung nicht als undefinierter Name behandelt.

Die Schweregrade der Regeln sind "off", "warn" und "error", auch als 0, 1 und 2 geschrieben. Fehler führen zu einem Fehlercode; Warnungen allein lassen den Befehl standardmäßig nicht fehlschlagen. Auch wenn das Skript erfolgreich endet, enthält eine Warnung Informationen, die du lesen solltest.

Lies einen Linter-Bericht

function total(items) {
  let sum = 0;
  let unused = 5;
  for (const item of items) {
    if (item.quantity == "2") sum += item.price;
  }
  return summ;
}

Mit der obigen Konfiguration werden fünf Probleme gemeldet. total wird nie verwendet. sum wird aktualisiert, aber sein Wert wird über diese Aktualisierungen hinaus nie verwendet. unused wird nicht verwendet. Die Regel eqeqeq beanstandet ==, und no-undef erkennt das falsch geschriebene summ. Ein Aufruf dieser Funktion würde an diesem undefinierten Namen fehlschlagen, aber der Linter kann ihn ohne Aufruf finden.

Beginne im Bericht mit dem Namen der Regel und der Fundstelle. Korrigiere das beabsichtigte Verhalten und führe den Befehl erneut aus. npm run lint -- --fix fordert sichere automatische Korrekturen an, wenn das Projekt ein Skript lint hat. Der Befehl kann nicht für jede Warnung die richtige Programmlogik bestimmen. Deaktiviere eine Regel für eine Zeile nur, wenn es einen Grund gibt, und halte diesen neben dem Kommentar fest.

Überlasse das Layout einem Codeformatierer

npm install --save-dev --save-exact prettier
npx prettier . --write
npx prettier . --check

--write ändert Dateien; --check meldet Formatierungsunterschiede, ohne Dateien zu ändern. Mit den Standardeinstellungen wird aus const point={x:1,y:2} der Code const point = { x: 1, y: 2 };. Optionen wie "singleQuote": true stehen in .prettierrc.

Die empfohlenen ESLint-Regeln schreiben das Layout von Prettier nicht vor, sodass diese Einrichtung Formatierungskonflikte vermeidet. Fügt eine andere ESLint-Konfiguration widersprüchliche Stilregeln hinzu, schaltet eslint-config-prettier diese Regeln aus. Werden zwei konkurrierende Codeformatierer ausgeführt, können sich Dateien ständig hin und her ändern.

Füge Skripte lint und format hinzu, damit sich Prüfungen leicht wiederholen lassen. Editor-Erweiterungen können nach der Konfiguration während der Eingabe Diagnosen anzeigen und beim Speichern formatieren. Beide Werkzeuge überspringen node_modules standardmäßig; füge generierte Ausgaben wie dist zu den passenden Ignoriereinstellungen hinzu. Eine Funktion ohne Linter-Meldungen kann trotzdem den Umfang berechnen, obwohl sie die Fläche berechnen sollte; das Verhalten braucht Tests.

Ein Browser kann einige ES-Module direkt laden, aber größere Projekte verwenden auch installierte Pakete und Dateien, die transformiert werden müssen. Ein Entwicklungsserver bereitet Dateien während der Bearbeitung vor. Ein Bundler folgt Abhängigkeiten, um für die Veröffentlichung geeignete Dateien zu erstellen.

Durchlaufe den Vite-Zyklus

npm create vite@latest shape-lab
cd shape-lab
npm install
npm run dev
npm run build
npm run preview

Wähle für dieses Projekt die JavaScript-Vorlage Vanilla. Der Generator stellt Entwicklungs- und Buildskripte bereit. npm run dev gibt eine lokale Adresse aus, häufig http://localhost:5173. Öffne diese Adresse während der Bearbeitung. In Vite ist index.html der Einstiegspunkt und lädt /src/main.js normalerweise mit einem Modulskript.

Der Entwicklungsserver löst Paketnamen auf und transformiert Dateien nach Bedarf. Das Speichern einer Datei löst eine Aktualisierung aus. Hot Module Replacement, kurz HMR, ersetzt ein geändertes Modul auf der laufenden Seite; bei unterstützten Aktualisierungen kann der Zustand erhalten bleiben, statt ein vollständiges Neuladen zu erzwingen.

npm run build schreibt optimierte Ausgaben nach dist. npm run preview stellt diese Ausgabe lokal bereit, damit du den tatsächlichen Produktionsbuild prüfen kannst. Die Vorschau benötigt einen vorhandenen Build und erstellt keinen neuen. Bearbeite die Quelldateien, da ein weiterer Build die generierte Ausgabe ersetzt.

Verstehe die Änderungen im Produktionsbuild

Ein Hilfsmodul kann zum Beispiel sowohl formatArea als auch formatVolume exportieren. Wenn nur formatArea verwendet wird und das Entfernen des anderen Codes sicher ist, kann Tree Shaking formatVolume weglassen. Statische Importe und Exporte machen Abhängigkeiten sichtbar. Seiteneffekte eines Moduls auf oberster Ebene müssen möglicherweise erhalten bleiben, auch wenn keiner seiner Exporte verwendet wird.

Ein dynamisches import() gibt dem Buildwerkzeug eine Grenze für das spätere Laden. Buildwerkzeuge können dafür separate Abschnitte erstellen; deren Aufteilung hängt vom Build ab, sodass ein Quellmodul nicht immer zu genau einer Ausgabedatei wird.

Ein Name wie assets/index-4f2a9c1b.js ändert sich mit seinem Inhalt und ermöglicht so langlebige Browser-Caches, ohne nach einer Aktualisierung eine alte Datei auszuliefern. Eine Source Map verbindet Stellen in der generierten Ausgabe mit ursprünglichen Quellcodezeilen und erleichtert damit Stacktraces und das Debuggen, wenn solche Zuordnungen verfügbar sind.

Binde Ressourcen und öffentliche Konfiguration ein

Vite verarbeitet auch Ressourcen: import "./style.css"; bindet Stile ein und import logoUrl from "./logo.png"; liefert die endgültige URL des Bildes. Der Build kann diese Verweise aktualisieren, damit sie zu den generierten Dateinamen passen.

Lies Modusinformationen über import.meta.env.MODE. Die Standardwerte sind "development" für die Entwicklung und "production" für einen Build; ein benutzerdefinierter Modus kann einen anderen Namen verwenden. Benutzerdefinierte Umgebungswerte, die mit VITE_ beginnen, werden dem Browsercode standardmäßig zur Verfügung gestellt. Alles, was an den Browser ausgeliefert wird, ist öffentlich: Bewahre geheime Schlüssel und Passwörter auf einem Server auf, außerhalb des Browsercodes und offengelegter Umgebungsvariablen.

Prüfe nicht nur die Entwicklungsseite. Erstelle vor der Veröffentlichung einen Build und sieh ihn dir in der Vorschau an, um Probleme in der transformierten Ausgabe und bei Ressourcenpfaden zu finden. dist/index.html direkt vom Datenträger zu öffnen, entspricht nicht der Bereitstellung der Website über HTTP. Eine kleine Seite mit wenigen einfachen Modulen benötigt möglicherweise nur einen statischen Server und kein vollständiges Buildwerkzeug.

Ein automatisierter Test führt Code mit bekannten Eingaben aus und prüft das Ergebnis mit Assertions. Ein Unittest konzentriert sich auf einen kleinen Teil, etwa eine Funktion oder Methode. Der Testrunner findet Tests, führt sie aus, meldet Fehler und endet mit einem Fehlercode, wenn ein Test fehlschlägt.

Vorbereiten, ausführen, prüfen

Bereite die Eingabe vor, führe den Code aus und prüfe das erwartete Ergebnis. Ein hilfreicher Testname beschreibt das Verhalten. Für eine Rechteckklasse, deren Konstruktor eine negative Seitenlänge ablehnt:

import { test } from "node:test";
import assert from "node:assert/strict";
import { Rectangle } from "./rectangle.js";

test("area multiplies width by height", () => {
  assert.equal(new Rectangle(3, 4).area(), 12);
});
test("rejects a negative width", () => {
  assert.throws(() => new Rectangle(-1, 4), RangeError);
});

Die erste Assertion prüft 12 cm², ein unabhängig bekanntes Ergebnis. Die zweite übergibt eine Funktion an assert.throws, damit die Assertion den Fehler erfassen kann. Bei der Ausführung von node --test werden Dateien mit Namen wie rectangle.test.js gefunden; ein Paketskript "test": "node --test" ermöglicht npm test.

Der strikte Assertion-Modus verwendet für assert.equal die Methode Object.is ohne implizite Typumwandlung. assert.deepEqual vergleicht den Inhalt von Objekten und Arrays. Verschiedene Arrays mit denselben Werten sind nicht dasselbe Objekt, daher ist ein strikter Identitätsvergleich die falsche Prüfung auf gleichen Inhalt.

Nutze entsprechende Konzepte in Vitest

import { describe, it, expect } from "vitest";
import { Rectangle } from "./rectangle.js";

describe("Rectangle", () => {
  it("computes the area", () => {
    expect(new Rectangle(3, 4).area()).toBe(12);
  });
  it("rejects a negative width", () => {
    expect(() => new Rectangle(-1, 4)).toThrow(RangeError);
  });
});

Vitest verwendet describe zum Gruppieren und it für einzelne Tests. Führe npx vitest aus, um Änderungen zu überwachen, oder npx vitest run für einen einmaligen Durchlauf. Jest bietet einen ähnlichen Stil. Verwende toEqual für Inhalte und toBe für Identität oder primitive Werte.

Beziehe Grenzwerte und numerische Schranken ein

Teste die genauen Endpunkte eines erlaubten Bereichs ebenso wie Eingaben knapp außerhalb. Ein Thermostat, das 10 bis 30 °C akzeptiert, benötigt Tests, die 10 und 30 akzeptieren, sowie Tests, die 9,5 und 30,5 ablehnen. Ergänze separate Prüfungen für nicht numerische und nicht endliche Werte, wenn die Schnittstelle sie ablehnt. Tests sollten nicht von einem durch einen vorherigen Test veränderten Objekt oder von der Ausführungsreihenfolge abhängen.

Gleitkommaarithmetik stimmt möglicherweise nicht genau mit einem geschriebenen Dezimalwert überein: 0.1 + 0.2 ist 0.30000000000000004. Verwende für eine passende Toleranz assert.ok(Math.abs(actual - expected) < 1e-9). Ein Kreis mit Radius 3 hat eine Fläche von etwa 28,274333882 cm²; toBeCloseTo(28.27, 2) von Vitest prüft die Nähe auf diese Dezimalgenauigkeit. Wähle die Toleranz passend zu dem, was der Test nachweisen soll.

Lerne aus einem Fehlschlag

Lies das benannte Verhalten, den erwarteten und den tatsächlichen Wert sowie die Stelle im Quellcode. Entscheide, ob die Implementierung oder die Erwartung des Tests falsch ist. Schreibe bei der testgetriebenen Entwicklung einen fehlschlagenden Test, implementiere genug, damit er besteht, und verbessere dann den Code, während die Tests weiterhin bestehen.

Exportiere Logik aus Modulen und übergib Eingaben als Argumente. Ein Event-Handler kann dann Seitendaten sammeln und diese Logik aufrufen, statt Berechnungen mit DOM-Arbeit zu vermischen. DOM-abhängiger Code kann einen simulierten Browser wie jsdom verwenden. Warte in einem asynchronen Test auf asynchrone Arbeit, damit der Test nicht vor seinen Prüfungen endet. Ein Test, der lediglich die Formel der Implementierung wiederholt, kann deren Fehler wiederholen; verwende das erwartete Verhalten und unabhängige Beispiele.

TypeScript ergänzt JavaScript um statische Typsyntax. Ein Typ beschreibt, welche Art von Wert der Code erwartet. Die Typprüfung nutzt diese Beschreibungen, bevor das Programm läuft, und kann so Fehler aufdecken, bevor Nutzer darauf stoßen.

Prüfe einen Aufruf vor der Ausführung

function area(width: number, height: number): number {
  return width * height;
}
area(3, "4"); // type error: the second argument is a string

Beide Parameter müssen Zahlen sein. Das geschriebene "4" ist eine Zeichenkette, daher meldet die Typprüfung die Abweichung. Einfaches JavaScript würde diese Zeichenkette bei der Multiplikation implizit umwandeln: 3 * "4" ergibt 12. Bei der Addition ergibt 3 + "4" die Zeichenkette "34". Ein Typfehler zeigt eine Abweichung von den vorgesehenen Eingaben an, auch wenn JavaScript den Ausdruck ausführen könnte.

Ein Interface beschreibt die Struktur eines Objekts:

interface Shape {
  name: string;
  area(): number;
}

Eine mit implements Shape deklarierte Klasse muss die angegebenen Eigenschaften und Methoden mit kompatiblen Typen bereitstellen. Die Typprüfung kann bei aktivierter strikter Prüfung auch falsch geschriebene Eigenschaften, falsche Argumentzahlen und mögliche undefined-Werte erkennen.

Trenne Typprüfung und Entfernen der Typen

Die TypeScript-Projekteinstellungen stehen in tsconfig.json. Ein Vite-Build stellt nicht selbst fest, ob alle Typen korrekt sind. Projekte führen häufig tsc --noEmit separat aus. Aktuelles Node.js kann unterstützte .ts-Dateien direkt ausführen, prüft ihre Typen beim Type Stripping aber ebenfalls nicht.

Behalte Laufzeitprüfungen an Datengrenzen bei

Typannotationen werden vor der Ausführung entfernt. Die Deklaration des erwarteten Typs von Daten aus fetch() oder JSON.parse() überprüft den tatsächlichen Wert nicht. Prüfe externe Daten im laufenden Code, bevor du dich auf sie verlässt. Ein Server kann eine Zeichenkette senden, selbst wenn eine Typdeklaration ein Feld als numerisch bezeichnet.

private und readonly von TypeScript sind Einschränkungen der Typprüfung; sie bieten nicht den privaten Zugriffsschutz von JavaScript mit # zur Laufzeit. Private JavaScript-Felder werden weiterhin geschützt, während das Programm läuft. TypeScript macht ein Programm auch nicht schneller und beweist nicht, dass seine Berechnungen korrekt sind.

Der Typ any schaltet nützliche Prüfungen für einen Wert aus. Er kann eine Fehlermeldung unterdrücken, während der ursprüngliche Fehler bestehen bleibt. Das Korrigieren einer falschen Annahme oder das Hinzufügen einer tatsächlichen Datenprüfung liefert der Typprüfung bessere Informationen.

Führe TypeScript in überschaubaren Schritten ein

Eine JavaScript-Datei kann mit // @ts-check beginnen und JSDoc wie /** @param {number} width */ verwenden, um in unterstützenden Editoren Prüfungen zu erhalten, ohne zu einer .ts-Datei zu werden. Ein Projekt kann später Dateien einzeln umbenennen. Bibliotheken können .d.ts-Typdefinitionen bereitstellen; Definitionen der Community werden häufig unter @types/... verteilt.

Größere, langlebige Projekte erhalten klarere Schnittstellen, sichereres Refactoring und bessere Vervollständigung im Editor. Bei einem kleinen Skript rechtfertigt der Nutzen möglicherweise noch keinen weiteren Buildschritt und keine neue Syntax. Tests bleiben in beiden Fällen nützlich: Eine korrekt typisierte Flächenfunktion kann trotzdem eine falsche Zahl berechnen.

Eine Bibliothek stellt Code bereit, den dein Programm aufruft. Ein Framework bietet eine Anwendungsstruktur und ruft deinen Code zu den richtigen Zeitpunkten auf. Diese Änderung der Steuerung hilft, größere Oberflächen zu koordinieren, beruht aber weiterhin auf JavaScript, Modulen und einer Projektwerkzeugkette.

Gliedere eine Oberfläche in Komponenten

React, Vue, Svelte und Angular gliedern Benutzeroberflächen mit Komponenten: wiederverwendbaren Teilen wie einer Navigationsleiste oder einem Aufgabeneintrag. Eine Komponente verbindet Markup und Verhalten, oft mit Stilen. Wenn sich ihr Zustand ändert, koordiniert das System für die Benutzeroberfläche die betreffenden Seitenaktualisierungen.

Meta-Frameworks wie Next.js, Nuxt, SvelteKit und Astro ergänzen eine umfangreichere Einrichtung, darunter Routing, Rendern auf dem Server und Buildunterstützung. Ihr genauer Funktionsumfang unterscheidet sich. Kenntnisse über JavaScript-Funktionen, Ereignisse, asynchronen Code und Modulgrenzen helfen beim Erlernen jedes dieser Frameworks.

Eine Seite mit wenigen unabhängigen interaktiven Funktionen kann mit einfachem JavaScript übersichtlich sein. Ein Framework wird nützlich, wenn viele Ansichten sich ändernde Daten gemeinsam nutzen müssen. Wähle es für diesen Bedarf, statt anzunehmen, dass jede Seite die größte Werkzeugkette benötigt.

Verfolge das Zusammenspiel der Werkzeuge

Framework-Pakete werden über npm installiert und als Module importiert. Buildwerkzeuge transformieren Syntax wie JSX oder Framework-spezifische Dateien. TypeScript kann Schnittstellen zwischen Teilen prüfen. Linter-Prüfung, Formatierung und Tests behalten unabhängig von der Wahl der Benutzeroberfläche ihre unterschiedlichen Aufgaben.

Starte ein einfaches Projekt und füge die vom Team verwendeten Werkzeuge hinzu:

npm create vite@latest shape-lab
cd shape-lab
npm install
npm install --save-dev eslint @eslint/js globals prettier vitest

Eine Vite-Vorlage stellt Entwicklungs- und Buildwerkzeuge bereit. Die Installation zusätzlicher Pakete konfiguriert sie nicht: Füge die ESLint-Konfiguration hinzu, erstelle Tests und richte Editor-Erweiterungen für Linter-Prüfung und Formatierung beim Speichern ein. Ein Feld für Skripte kann diese Aufgaben bereitstellen:

{
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint .",
  "format": "prettier . --write",
  "test": "vitest run"
}

Diese Einträge gehören in "scripts" in package.json. Führe während der Bearbeitung npm run dev aus; der Editor kann bei Dateiänderungen prüfen und formatieren. Führe vor dem Weitergeben der Arbeit npm test aus. Führe vor der Veröffentlichung npm run build und npm run preview aus. Der gebaute Ordner dist einer statischen Website kann anschließend zu einem geeigneten statischen Hoster hochgeladen werden.

Finde die Datei, die eine Aufgabe steuert

Beginne bei einem unbekannten Projekt mit package.json: Die Skripte zeigen, wie das Projekt ausgeführt wird, und die Abhängigkeitslisten zeigen, welche Werkzeuge diese Skripte benötigen. Generierte Ordner können neu erstellt werden; Einstellungen und Quellcode erklären, wie das geht.

Lerne neue Werkzeuge einzeln kennen, damit ein Fehler noch eine erkennbare Ursache hat. Nutze die offizielle Dokumentation für die installierte Version, wenn Befehle oder Standardeinstellungen abweichen, denn Veröffentlichungen von Werkzeugen und Frameworks ändern sich häufiger als die JavaScript-Kernsyntax.