Starthilfe mit TypeScript - Importhilfe und Komplilierung ohne Fehlermeldung zum Laufen kriegen

  • Seid gegrüßt!

    Die bisher in JavaScript geschriebenen Module möchte in in TypeScript umschreiben. Dazu habe ich mich nach der Anleitung in der Dokumentation orientiert. Allerdings werden in meiner IDE (PhpStorm) aktuell in meinen TypeScript Dateien nicht die WSC-Module für den Import vorgeschlagen, sobald ich z.B. Ajax oder Language im Quelltext eingebe. Zusätzlich kommt es, obwohl erfolgreich js-Dateien erzeugt werden, beim Komplilieren zur folgenden Fehlermeldung:

    Leider bin ich bisher nicht auf die Fehlerquellen beider Probleme gestoßen und benötige deswegen eure Hilfe.

    Hier noch einige Informationen, wie ich bei der Einrichtung der TS-Umgebung vorgegangen bin:

    Mein Plugin basiert noch (wird nicht so bleiben, keine Sorge!) auf WSC 5.4, weswegen ich package.json unter dependencies.@woltlab/wcf den 5.4 Branch eingetragen habe

    Die tsconfig.json, die ich in dem selben Verzeichnis wie die vorherige json-Datei abgelegt habe, habe ich 1:1 von der 5.4-Version übernommen. Ebenso habe ich im selben Verzeichnis dementsprechend einen Ordner namens ts angelegt, wo sich künftig die ts-Dateien befinden sollen.

    Anschließend habe via npm install die Module, die in package.json eingetragen wurden, installiert. Als ich dann als Test versucht habe, mein erstes TS-Modul zu schreiben, bin ich auf die Anfangs erwähnte Probleme gestoßen.

    Könnt ihr auf Basis meiner Informationen bereits die Fehlerquelle feststellen? Falls noch mehr Informationen benötigt werden sollten, dann sagt mir einfach bescheid!

  • Hallo,

    aktualisiere mal die Versionen in deiner package.json mindestens auf die entsprechenden Versionen der package.json von WoltLab/WCF in 5.4:

    WCF/package.json at d5f4adcbce58b38dbc5563e0668747bbd762848b · WoltLab/WCF
    WoltLab Suite Core (previously WoltLab Community Framework) - WoltLab/WCF
    github.com

    Die in der Doku genannten Versionen sind ziemlich alt und verstehen den Code vom Core vermutlich nicht.

  • Hallo,

    am einfachsten können wir dir helfen wenn du den Code zeigst, der Probleme macht.

    Als Testanlauf habe ich mir zuerst die Example.ts von der Doku geschnappt und versucht damit zu schauen, ob alles richtig eingerichtet wurde. Ich habe versucht, mir bekannte Module wie Ajax , Language (wenn ich den Import am Anfang vom Beispiel entferne) und Ui/Notification via Autocomplete bzw der Importhilfe zu verwenden, doch die Module wurden mir nicht vorgeschlagen. Nur wenn ich z.B.

    Code
    import * as Ajax from "WoltLabSuite/Core/Ajax";

    händisch eintrage, wird mir das Modul samt Funktionen wie api oder apiOnce vorgeschlagen. Liegt hier ein Verständnisproblem meinerseits vor oder sollte das Modul nicht automatisch vorgeschlagen und via Import eingebunden werden, wenn ich in einer Funktion Ajax eingebe?

    Tim Düsterhus

    Ich habe die Versionen in der package.json soweit angepasst und die Module aktualisieren lassen. Hier die angepasste Datei:

    Leider ist exakt die gleiche Fehlermeldung nach wie vor vorhanden, auch wenn ich den node_modules Order und die package-lock.json entferne und die Module nochmal neu installieren lasse.

    Falls es weiterhelfen sollte, hier die Verzeichnisstruktur, wo ich die Einrichtung von TypeScript testen wollte:

    • files
      • js
        • Example.js (wird trotz der Fehlermeldung erzeugt)
    • node_modules (von der IDE als library root markiert)
      • viele Ordner zu den installierten Modulen
    • ts
      • Example.ts
    • .eslintignore
    • .eslintrc.js
    • .gitattributes
    • .prettierrc
    • package.json
    • package-lock.json
    • tsconfig.json

    Vielleicht habe dort irgendwo Mist gebaut?

  • Hallo,

    Ich habe die Versionen in der package.json soweit angepasst und die Module aktualisieren lassen. Hier die angepasste Datei:

    Ich habe es jetzt selbst einmal getestet. Der Caret-Versions-Constraint erlaubt jede „Minor-Version“ entsprechend hat sich durch die Änderung der package.json effektiv nichts geändert und du hattest in beiden Fällen vermutlich TypeScript 4.9 und TypeScript 4.9 meldet für das Konstrukt einen Fehler. Die Korrektur für den Fehler findet sich in WoltLab Suite 5.5, konkret in diesem Commit:

    Du hast folgende Lösungen:

    • Aktualisieren auf WoltLab Suite 5.5 oder besser WoltLab Suite 6.0.
    • Pinnen von TypeScript auf Version 4.7 (beispielsweise über ein Tilde-Constraint "typescript": "~4.7.4).
    • Ignorieren vom Fehler, er hat keinen Einfluss auf das Ergebnis. Die Fehlermeldung tritt, wie an den Pfaden sichtbar, nicht in deinem Code auf.

    Grundsätzlich kann ich die Aktualisierung auf WoltLab Suite 6.0 empfehlen, da du dann die Möglichkeit hast, die Typen über das WoltLab/d.ts-Repository zu beziehen. Da bekommst du dann wirklich nur die Typisierung und nicht auch den eigentlichen Code. Entsprechend bekommst du dann auch keine Fehler im „Upstream-Code“ gemeldet.

  • Grundsätzlich kann ich die Aktualisierung auf WoltLab Suite 6.0 empfehlen

    Das ist letztendlich mein Ziel. Ich hatte nur die Hoffnung, dass ich bereits in 5.4 (problemlos) mit der Umstellung auf TS anfangen kann, damit ich in der Portierung auf 5.5 und 6.0 "nur" noch die Neuerungen bezüglich TS berücksichtigen muss. Danke für deine Hilfe und für die Lösungsvorschläge :):thumbup:

  • Hallo,

    damit ich in der Portierung auf 5.5 und 6.0 "nur" noch die Neuerungen bezüglich TS berücksichtigen muss

    wenn du mich fragst, dann ist das wenig sinnvoll. JavaScript, das in WoltLab Suite 5.4 einwandfrei funktioniert, wird mit an Sicherheit grenzender Wahrscheinlichkeit auch mindestens ein WoltLab Suite 5.5 und in vielen Fällen auch in WoltLab Suite 6.0 noch laufen, sodass eine Umstellung nicht unbedingt erforderlich ist.

    Durch eine Umstellung auf Basis von WoltLab Suite 5.4 entgehen dir aber die Verbesserungen, die in WoltLab Suite 5.5 bzw. 6.0 erfolgt sind und dir das Leben deutlich erleichtern. Die beiden Versionen enthalten allerhand DX-Verbesserungen, insbesondere im Bereich TypeScript. Beispielsweise in Form der neuen Dialog-API von WoltLab Suite 6.0: Dialogs - WoltLab Suite Documentation

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!