0Pricing
TypeScript Academy · Lektion

JSDoc-Typannotationen als Brücke

Ergänzen Sie JS-Dateien vor der Konvertierung mit JSDoc um Typen.

JSDoc-Typannotationen als Brücke ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. 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 4 Lektionen.

JSDoc als Brücke zu TypeScript

TypeScript kann JSDoc-Typannotationen in JavaScript-Dateien lesen, wenn checkJs: true aktiviert ist. So können Sie JS-Dateien Typen hinzufügen, ohne sie umzubenennen.

/** @type {string} */
let name = "Alice"; // TypeScript checks this as string

@param und @returns

Annotieren Sie Funktionsparameter und Rückgabetypen mithilfe von JSDoc-Tags.

/**
 * @param {string} name
 * @param {number} age
 * @returns {string}
 */
function greet(name, age) {
  return `${name} is ${age}`;
}

@typedef für Objekttypen

Verwenden Sie @typedef, um wiederverwendbare Typaliase in JSDoc zu definieren.

/**
 * @typedef {Object} User
 * @property {string} id
 * @property {string} name
 * @property {boolean} isActive
 */

/** @type {User} */
const user = { id: "1", name: "Alice", isActive: true };

@template für Generics

Verwenden Sie @template, um generische Funktionen in JSDoc zu schreiben.

/**
 * @template T
 * @param {T[]} arr
 * @returns {T | undefined}
 */
function first(arr) {
  return arr[0];
}
// TypeScript infers: first<T>(arr: T[]): T | undefined

Typen aus .ts-Dateien importieren

JSDoc unterstützt @type {import("./types").User}, um TypeScript-Typen in JS-Dateien zu importieren.

/** @type {import("./types").User} */
const admin = { id: "admin", name: "Admin", isActive: true };

@ts-check für dateiweise Prüfung

Fügen Sie // @ts-check am Anfang einer JS-Datei ein, um die TypeScript-Prüfung nur für diese Datei zu aktivieren, ohne checkJs: true global zu setzen.

// @ts-check
/** @type {number} */
const count = "oops"; // Error: string not assignable to number

@ts-ignore und @ts-expect-error

Unterdrücken Sie bestimmte JSDoc-Typfehler mit Inline-Direktiven, ohne die gesamte Datei zu deaktivieren.

// @ts-ignore
const x = badFunction(); // single error suppressed

// @ts-expect-error
const y = anotherBad(); // error expected here

JSDoc-Enums

Simulieren Sie TypeScript-Enums in JSDoc mit @enum.

/** @enum {string} */
const Direction = { Left: "left", Right: "right", Up: "up" };

Typassertionen in JSDoc

Verwenden Sie /** @type {SomeType} */ (expression) für JSDoc-Typassertionen, entsprechend TypeScripts as SomeType.

const el = /** @type {HTMLInputElement} */ (document.getElementById("input"));
el.value; // el: HTMLInputElement — typed

Wann Sie zu .ts wechseln sollten

JSDoc-Annotationen sind eine Brücke, kein Ziel. Sobald eine Datei vollständig annotiert und stabil ist, benennen Sie sie in .ts um und ersetzen Sie die JSDoc-Typkommentare durch die native TypeScript-Syntax.

// Rename: utils.js → utils.ts
// Replace JSDoc: /** @param {string} x */ → (x: string)

Zusammenfassung: JSDoc als Brücke

JSDoc-Typannotationen ermöglichen die TypeScript-Prüfung in JS-Dateien, ohne diese umzubenennen. Verwenden Sie @type, @param, @typedef und @template, um schrittweise Typsicherheit hinzuzufügen, bevor Sie zu nativem TypeScript wechseln.

Schnelltest

Welches JSDoc-Tag aktiviert die TypeScript-Prüfung in einer einzelnen Datei, ohne checkJs global zu aktivieren?

Das haben Sie gelernt

JSDoc-Typannotationen bilden eine Brücke zwischen JavaScript und TypeScript: Verwenden Sie @type, @param, @typedef und @template, um JS-Dateien Typen hinzuzufügen. Aktivieren Sie die dateiweise Prüfung mit // @ts-check und wechseln Sie anschließend zu nativem TypeScript, sobald Sie bereit sind.

Häufig gestellte Fragen

Ist die Lektion „JSDoc-Typannotationen als Brücke“ kostenlos?

Ja — der vollständige Text von „JSDoc-Typannotationen als Brücke“ 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 4 Lektionen.

Was lerne ich in „JSDoc-Typannotationen als Brücke“?

Ergänzen Sie JS-Dateien vor der Konvertierung mit JSDoc um Typen. 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 2 von 4.

Wie lange dauert die Lektion „JSDoc-Typannotationen als Brücke“?

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

  1. Die Migration beginnen: allowJs und checkJs
  2. JSDoc-Typannotationen als Brücke
  3. Strategie für die Konvertierung Datei für Datei
  4. Umgang mit nicht typisierten Drittanbieterbibliotheken
← Zurück zu TypeScript Academy