Seit vielen Jahren ist TypeScript ein wesentlicher Bestandteil der JavaScript -Entwicklung. Es fügt ein Typ -System hinzu, das auf JavaScript basiert und die Lesbarkeit und Wartbarkeit des Codes verbessert. Die zusätzlichen Syntax- und Kompilierungsschritte von Typenkript können jedoch manchmal die Entwicklungsbelastung erhöhen. Glücklicherweise unterstützt das TypeScript -Team die Typ -Überprüfung des reinen JavaScript -Codes mit JSDOC unter Berücksichtigung der Sicherheitstypsicherheit und der Entwicklungseffizienz.

Projekteinstellungen

Um mit JSDOC überprüft zu werden, benötigen Sie Nodejs und NPM. Erstellen Sie ein neues Projekt und führen Sie npm init aus. In diesem Artikel wird VS -Code als Code -Editor verwendet. Typenkript installieren:

 npm i -d typecript

Erstellen Sie eine tsconfig.json -Datei und fügen Sie die folgende Konfiguration hinzu:

 {
  "Compileroptions": {{
    "Ziel": "Esnext",
    "Modul": "Esnext",
    "Modulereolution": "Knoten",
    "lib": ["Es2017", "Dom"],
    "Zulassungen": wahr,
    "Checkjs": Richtig,
    "noemit": wahr,
    "streng": falsch,
    "noimplicitichis": wahr,
    "Immer strikt": wahr,
    "EsmoduleInterop": True
  },
  "Include": ["Skript", "Test"],
  "ausschließen": ["node_modules"]
}

Die wichtigsten Konfigurationen sind allowJs und checkJs , die beide auf true eingestellt sind, sodass TypeScript den JavaScript -Code überprüfen kann. Wir haben auch das /script -Verzeichnis als Speicherort des Codes angegeben.

Einfaches Beispiel

Erstellen Sie eine index.js -Datei und schreiben Sie eine einfache Additionsfunktion:

 /**
 * Fügen Sie zwei Zahlen zusammen hinzu
 * @param {number} x
 * @param {number} y
 * @return {number}
 */
Funktion add (x, y) {
  Rückkehr xy;
}

Wir geben die Arten von Parametern an und geben Werte über JSDOC -Anmerkungen @param und @return zurück. Versuchen Sie, die Funktion mit dem Fehlertyp aufzurufen. VS Code fordert einen Fehler auf.

JSDOC -Anmerkungen entsprechen dem TypeScript -Code:

 /**
 * Fügen Sie zwei Zahlen zusammen hinzu
 */
Funktion add (x: nummer, y: number): number {
  Rückkehr xy;
}

JSDOC unterstützt eine Vielzahl von integrierten Typen wie string , object , Array und DOM-Typen wie HTMLElement , MutationRecord .

JSDOC ermöglicht auch das Hinzufügen von Typenbeschränkungen zu Objekten, wie z WeakMap :

 /** @type {schwach<object string> } */
const metadata = neuer schwach ();

const Object = {};
const otherObject = {};

metadata.set (Objekt, 42); // Ein Fehler wird angegeben, weil der Wert nicht die String -Metadaten ist (andereObject, 'Hallo Welt');</object>

Benutzerdefinierter Typ

Mit JSDOC können benutzerdefinierte Typen definiert werden, z. B. Person :

 /**
 * @Typedef Person
 * @Property {String} Name - Der Name der Person
 * @property {number} Alter - das Alter der Person
 * @property {String} [Hobby] - Ein optionales Hobby
 */

Verwenden Sie @typedef , um Typen zu definieren, verwenden Sie @property oder @prop um Eigenschaften zu definieren.

Benutzerdefinierte Typen verwenden:

 /** @type {Person}*/
const person = {name: 'John doe', Alter: 30, Hobby: 'Reading'};

Ein begrenzter Satz von Optionen kann mithilfe von Gewerkschaftstypen definiert werden:

 /**
 * @typedef {'cat' | 'Hund' | 'fish'} Haustier
 */

Generika

JSDOC unterstützt Generika wie identity :

 /**
 * @template t
 * @param {t} Ziel
 * @return {t}
 */
Funktionsidentität (Ziel) {
  Ziel zurückgeben;
}

Verwenden Sie @template , um generische Typen zu definieren.

Typumwandlung Typ

Manchmal ist eine Typkonvertierung erforderlich, z. B. die Verarbeitung von Ereignishörern:

 Document.GetElementById ('Eingabe'). AddEventListener ('Eingabe', Ereignis => {
  console.log (/** @type {htmlinputElement}*/(event.target) .Value);
});

Verwenden Sie /** @type {类型} */ für Typ Conversion.

Zusammenfassen

JSDOC bietet eine Möglichkeit, Typ -Überprüfungs- und -code -Eingabeaufforderungen zu erhalten, während der reine JavaScript -Code geschrieben wird. Dies ist nützlich für Projekte, die die Codequalität verbessern möchten, ohne zusätzliche Syntax- und Kompilierungsschritte einzuführen. Während der Typscript -Compiler leistungsfähig ist, bietet JSDOC eine flexible Alternative.

Das obige ist der detaillierte Inhalt von. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!