HTML und Ts passen sie zueinander?

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, JavaScript
14.01.2025, 12:02
(...) ob die Ts zur Html passt und ob es korrekt ist (...)

Ob die Anwendung das tut, was sie soll, kannst du in einem Fiddle testen. Ich habe einmal eines für dich angelegt: https://jsfiddle.net/cnhqx2es/.

Markup- und Syntaxfehler, die direkt auffallen:

  • Bei einigen deiner Eingabefelder ist das name-Attribut invalid. Der Wert darf nicht leer sein.
  • Eine ID ist immer eindeutig bzw. darf nur einmal in einem Dokument vorkommen. Bei dir sehe ich die IDs name, passwort und email jeweils mehrmals.
  • Das for-Attribut von label-Elementen verweist immer auf eine existierende ID. Eine ID Nachname gibt es in deinem Dokument jedoch nicht.
  • Es gibt kein Eingabefeld vom Typ passwort. Ersetze den Wert gegen password.
  • Den div-Elementen mit der Klasse inputField fehlt stets der Endtag.
  • Leerzeichen in URLs sind nicht erlaubt. Entweder du änderst den Dateinamen deines Profilicons oder du maskierst das Leerzeichen mit %20.
  • In deinem Typescript-Code hast du vor der Funktionsdefinition von showInfo vier Bindestriche gesetzt, mit denen ein Compiler/Interpreter nicht viel anfangen kann. Im Fiddle habe ich diese Zeile bereits auskommentiert.
  • Das Komma in der letzten Zeile von readInfo ist verkehrt. Generell ist nicht klar, wieso du überhaupt ein Komma hinter die vorherigen Zeilen setzt. Es handelt sich doch um einzelne Anweisungen.

Auf logische Fehler in der Anwendung kannst du wie gesagt selbst testen.

(...) ist es eine Typescript? (...)

Rein auf die Syntax bezogen, wenn du den oben benannten Syntaxfehler behebst, ja. Jeder (valide) JavaScript-Code entspricht auch validem TypeScript-Code. TypeScript ist ein Superset zu JavaScript.

Wenn du allerdings tatsächlich TypeScript nutzen möchtest, erfüllt dein Code diese Anforderung nicht. Du nutzt in ihm doch keinerlei TypeScript-Funktionalität.
studentin04 
Beitragsersteller
 14.01.2025, 12:17

Hallo, okay, danke und wie genau mache ich war , wenn ich Typescript nutzen möchte ? Könnten Sie mir helfen

regex9  14.01.2025, 15:45
@studentin04

Vollständig TypeScript lernen und anwenden können? Nein.

Erste wesentliche Umformungen vornehmen (z.B. Typisierung der meisten Variablen und Funktionen)? Ja, definitiv.

studentin04 
Beitragsersteller
 14.01.2025, 18:01
@regex9

Okay.. danke für die Hilfe , kennen Sie vielleicht ein gutes YouTube Video zum Ts lernen und anwenden für CRUD

regex9  14.01.2025, 19:19
@studentin04

Nein, da habe ich keine Empfehlungen.

Für CRUD-Operationen reicht es zu wissen, wie man HTTP-Requests mit der fetch-Funktion abschicken kann.

fetch('target URL ...', {
  method: 'POST', // or GET, PUT, PATCH, DELETE
  body: JSON.stringify(someDataObject), // if necessary
})
.then((response: Response) => {
 /* do something ... */
})
.catch((error: Error) => console.error(error));

Welche HTTP-Methode benötigt wird, entscheidet die CRUD-Operation, die durchgeführt werden soll. Dieser Artikel erklärt es kurz und leicht verständlich.

Ob das body-Property und der then-Block benötigt wird, ist ebenso von der CRUD-Operation abhängig.

Wenn du die Serveranwendung entwickeln möchtest, die auf solche Anfragen reagieren soll, wäre ein Webframework (wie Express.js) zu empfehlen, welches das einfache Erstellen von Routen erlaubt. Die verfügbaren Typdefinitionen beinhaltet @types/express oder die d.ts-Datei im dazugehörigen Repository.

Sofern Node.js bereits installiert ist, kann man sich ein entsprechendes Setup ziemlich schnell anlegen. Folgend für Windows OS in der Eingabeaufforderung: 

> cd "c:\some\folder\where\project\can\be\created"
> mkdir my-example-project
> cd my-example-project
> npm init
> npm install express typescript ts-node @types/node @types/express --save-dev

In my-example-project legt man sich nun noch eine tsconfig.json-Datei an, die die Basiskonfiguration für den TS-Compiler vorgibt:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Dann brauchst du noch einen src-Ordner, in dem du die Startdatei (index.ts) erstellst.

import express, { Express, Request, Response } from "express";

const app: Express = express();
const port = process.env.PORT || 3000;

app.get("/", (request: Request, response: Response) => {
  response.send("Hello world!");
});

app.listen(port, () => {
  console.log(`[server]: Server is running at http://localhost:${port}`);
});

In die generierte package.json fügt man die Skriptbefehle ein:

"scripts": {
  "start": "ts-node src/index.ts",
  "build": "tsc",
  "serve": "node dist/index.js"
}

Das scripts-Property liegt im JSON auf der selben Ebene, wie bspw. das version-Property.

Anschließend kannst du den Server via Eingabeaufforderung starten:

npm start

und die Webanwendung im Browser via http://localhost:3000 aufrufen.

Wenn zudem statische Dateien integriert werden sollen, lies hier.