Startseite / Artikel / Die stillen Erfolge von TypeScript 6 und die JavaScript-Gewohnheiten erfahrener Entwickler

TypeScript JavaScript React Node.js Best Practices

Die stillen Erfolge von TypeScript 6 und die JavaScript-Gewohnheiten erfahrener Entwickler

Entdecken Sie die übersehene Funktionen von TypeScript 6 wie die explizite Ressourcenverwaltung und const-Typparameter sowie die JavaScript-Idiome, auf die erfahrene Ingenieure täglich zurückgreifen.

1228 Wörter

Modernes JavaScript und TypeScript entwickeln sich weiterhin auf Weise, die weit über die in den Schlagzeilen erwähnten Funktionen und Einträge im Changelog hinausgehen. Im Moment sind zwei Aspekte besonders wichtig: die weniger beachteten, weniger publizierten Ergänzungen in TypeScript 6 sowie die üblichen JavaScript-Idiome, die Pull Requests auf Senior-Niveau von rein funktionalen Codebeispielen unterscheiden. Beides dreht sich letztlich um dieselbe Disziplin – die Werkzeuge gut genug zu kennen, um das richtige statt des vertrauten zu wählen. Dieser Artikel geht beiden Themen nach, beginnt mit den in TypeScript 6 unauffällig eingeführten Änderungen und weitet sich anschließend auf die JavaScript-Muster aus, zu denen erfahrene Entwickler standardmäßig greifen.

Leise Verbesserungen in TypeScript 6, die man übernehmen sollte

Die meisten Berichte über TypeScript 6 beschränken sich darauf, dass Strict Mode und ES2025 nun Standard sind. Das ist tatsächlich eine Veränderung, doch sie überschattet eine Reihe kleinerer Ergänzungen, die stillschweigend langjährige Workarounds beseitigen. Wenn man nur die Schlagzeilen zu tsconfig-default liest, verpasst man den nützlicheren Teil dieser Version.

Aufräumarbeiten, an die man sich nicht erinnern muss

Eine häufige Ursache für Fehler ist es, eine Datenbankverbindung zu schließen oder einen Listener zu entfernen zu vergessen. TypeScript 6 begegnet diesem Problem durch explizite Ressourcenverwaltung, wodurch man einen Wert markieren kann, der automatisch aufgeräumt wird, sobald er den Scope verlässt.

function readUserSession() {
  using session = openSession(); // auto-disposed at scope end
  const user = session.getUser();
  return user.name;
} // session.dispose() called automatically here

Dadurch entfällt die Notwendigkeit für try/finally-Blöcke, deren einzige Aufgabe die Gewährleistung der Aufräumarbeiten war. Die Syntaxerweiterung ist gering, doch die Verbesserung der Zuverlässigkeit ist erheblich, insbesondere bei Dateien, Sockets oder offenen Verbindungen.

Literale Typen ohne überalliges Verwenden von `as const`

Zuvor bedeutete das Beibehalten von Literaltypen in einer generischen Funktion, as const im gesamten Code zu verwenden. TypeScript 6 führt konstante Typparameter ein, die die Inferenz von Literaltypen automatisch beibehalten.

function createConfig<const T extends Record<string, unknown>>(config: T) {
  return config;
}

const config = createConfig({
  env: "production",
  features: ["auth", "billing"],
});
// config.env is "production", not string
// config.features is readonly ["auth", "billing"], not string[]

Wenn Sie typisierte API-Client erstellen oder Redux-Aktionsschöpfer schreiben, reduziert dies einen großen Teil des as const-Boilerplates, den Sie sonst benötigt hätten.

Korrektes Eingrenzen innerhalb von `switch (true)`

Noch eine willkommene Verbesserung: Diskriminierte Unionen können nun innerhalb einer switch (true)-Anweisung korrekt eingegrenzt werden, was früher dazu führte, dass man zu verschachtelten if/else-Ketten zurückkehren musste, damit der Compiler die Typen verstand.

function area(shape: Shape): number {
  switch (true) {
    case shape.kind === "circle":
      return Math.PI * shape.radius ** 2; // narrowed to Circle
    case shape.kind === "rectangle":
      return shape.width * shape.height; // narrowed to Rectangle
  }
}

Durch diese Änderung müssen Sie switch nicht mehr aufgeben, nur um die Typenkonzentrierung beizubehalten.

Temporal erhält erstklassige Typen

TypeScript 6 bietet außerdem eingebettete Typen für die Temporal-API, sodass Sie nicht länger mit Date und seinen Zeitzone-Problemen durch manuelle Typbehauptungen kämpfen müssen.

const meetingStart = Temporal.Instant.from("2026-04-06T10:00:00Z");
const localTime = meetingStart.toZonedDateTimeISO("America/Toronto");

Subpath-Importe, die tatsächlich funktionieren

Auch ein kleinerer, aber dennoch ärgerlicher Problempunkt wurde behoben: Interne Subpath-Importe werden nun ordnungsgemäß abgewickelt, ohne dass eine lange Kette von relativen Pfadsegmenten erforderlich ist.

import { User } from "#/models/user.js";
// instead of ../../../models/user.js 🙃

Daniel Rosenwasser, der Produktmanager von TypeScript, hat TS6 als bewussten Übergang zur kommenden TypeScript 7 beschrieben, die auf Go basiert – was darauf hindeutet, dass es sich nicht um experimentelle Nebenfunktionen handelt, sondern um Funktionen, die beibehalten werden sollen. Wenn Ihr Team mit einer vollständigen JavaScript-, React- oder Next.js-Codebasis arbeitet, sollte die Einführung dieser Gewohnheiten jetzt dazu führen, dass es bei der Einführung von TypeScript 7 weniger Überraschungen gibt. Insgesamt geht es bei TypeScript 6 nicht nur um neue Compiler-Einstellungen; es bietet auch eine sauberere Ressourcenverwaltung, verbesserte Typinferenz sowie weniger manuelle Workarounds. Der Einsatz von using und const als Typparameter in Ihrem nächsten Pull Request könnte Sie dazu bringen, sich zu fragen, wie Sie ohne sie zurechtgekommen sind.

Gewohnheiten im JavaScript, die erfahrene Entwickler von den anderen unterscheiden

Die Kenntnis der neueren Funktionen von TypeScript ist nur die eine Seite der Medaille. Die andere Seite betrifft die tägliche Erstellung von JavaScript-Code. Wenn ein Pull Request eines erfahrenen Entwicklers klarer formuliert ist als die der anderen, liegt das selten an Cleverness – sondern daran, dass er konsequente Gewohnheiten ohne Zögern anwendet.

Optionales Verknüpfen und Nullwertkonsolidierung

Anstelle von Verknüpfungen wie user && user.profile && user.profile.name setzt erfahrener Code auf optionales Verknüpfen in Kombination mit Nullwertkonsolidierung.

const displayName = user?.profile?.name ?? 'Guest';

Es ist prägnant, schützt vor fehlenden Werten und bricht nicht zusammen, wenn der umliegende Code überarbeitet wird.

Dekonstruktion mit Standardwerten

Die Dekonstruktion von Eigenschaften, API-Antworten und Funktionsexponenten – mit sinnvollen Standardwerten – ist auf diesem Niveau zur zweiten Natur geworden.

function createUser({ name, role = 'member', isActive = true }) {
  return { name, role, isActive };
}

Dadurch wird die erwartete Struktur der Daten direkt in der Funktionssignatur dokumentiert.

Async/Await anstelle von verschachtelten Promises

Das Verknüpfen mit .then().then().catch() funktioniert zwar weiterhin, skaliert aber bei komplexerer Logik nicht gut. Vergleichen Sie das mit einer async/await-Version:

async function fetchOrders(userId) {
  try {
    const res = await fetch(`/api/orders/${userId}`);
    if (!res.ok) throw new Error('Failed to fetch orders');
    return await res.json();
  } catch (err) {
    console.error('Order fetch failed:', err);
    throw err;
  }
}

Das Ergebnis wird von oben nach unten gelesen, was das Debuggen und Testen erleichtert.

Array-Methoden statt manueller Schleifen

Die Verwendung von map, filter, reduce und find ersetzt die meisten handgeschriebenen for-Schleifen.

const activeAdmins = users
  .filter((u) => u.isActive && u.role === 'admin')
  .map((u) => u.email);

Dadurch gibt es weniger veränderliche Variablen und weniger Fehler durch falsche Indizes.

Hilfs-Typen anstelle doppelter Schnittstellen

Anstatt nahezu identische Schnittstellen neu zu definieren, setzen erfahrene TypeScript-Entwickler auf Hilfstypen wie Partial, Pick und Omit.

type UserFormInput = Pick<User, 'name' | 'email'> & Partial<Pick<User, 'phone'>>;

Dadurch bleibt eine einzige Quelle der Wahrheit erhalten, sodass Änderungen am Schema an weniger Stellen vorgenommen werden müssen.

Hooks und Komposition in React

Kundenspezifische Hooks, die Logik extrahieren und kapseln, kommen in ausgereiften React-Codebasen ständig vor.

function useDebouncedValue(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

Ein solcher Hook ermöglicht es, die zugrunde liegende Logik unabhängig von einer bestimmten Komponente erneut zu verwenden und zu testen.

Gestrukturierte Zustandsverwaltung

Bei der Zustandsverwaltung bevorzugen viele erfahrene Teams Redux Toolkit Slices gegenüber handgeschriebenen Reduzern, die aus switch-Anweisungen bestehen, da RTK den Boilerplate verringert und durch Immer kostenlos Immutabilität bietet.

Wie Douglas Crockford berühmt bemerkte, besteht JavaScript aus „den guten und den schlechten Teilen“ – dieselbe Flexibilität, die die Sprache mächtig macht, führt auch zu Verwirrung. Zu wissen, auf welche Teile man sich stützen kann, unterscheidet erfahrene Entwickler von denen, die noch nach ihrem Weg suchen.

Eine kurze Anzahl von Prinzipien verbindet all das miteinander: Priorität der Lesbarkeit vor Cleverness, Überlassen des Dokumentationsaufwands dem Typensystem von TypeScript anstelle von Kommentaren sowie Aufbau von Funktionalitäten aus kleinen, zusammengesetzten Funktionen statt großen, monolithischen Funktionsblöcken.