Ist das ein genauer Typescript Code?

interface User {
    id: number;
    firstName: string;
    lastName: string;
    email: string;
    password: string;
}

let users: User[] = [];
let currentUserId: number | null = null;

const userForm = document.getElementById('userForm') as HTMLFormElement;
const firstNameInput = document.getElementById('firstName') as HTMLInputElement;
const lastNameInput = document.getElementById('lastName') as HTMLInputElement;
const emailInput = document.getElementById('email') as HTMLInputElement;
const passwordInput = document.getElementById('password') as HTMLInputElement;
const userTableBody = document.getElementById('userTableBody') as HTMLTableSectionElement;

userForm.addEventListener('submit', (event) => {
    event.preventDefault();
    if (currentUserId === null) {
        addUser();
    } else {
        updateUser();
    }
    userForm.reset();
    currentUserId = null;
});

function addUser() {
    const newUser: User = {
        id: Date.now(),
        firstName: firstNameInput.value,
        lastName: lastNameInput.value,
        email: emailInput.value,
        password: passwordInput.value,
    };
    users.push(newUser);
    renderUserTable();
}

function updateUser() {
    const user = users.find((u) => u.id === currentUserId);
    if (user) {
        user.firstName = firstNameInput.value;
        user.lastName = lastNameInput.value;
        user.email = emailInput.value;
        user.password = passwordInput.value;
        renderUserTable();
    }
}

function deleteUser(id: number) {
    users = users.filter((user) => user.id !== id);
    renderUserTable();
}

function editUser(id: number) {
    const user = users.find((u) => u.id === id);
    if (user) {
        currentUserId = id;
        firstNameInput.value = user.firstName;
        lastNameInput.value = user.lastName;
        emailInput.value = user.email;
        passwordInput.value = user.password;
    }
}

function renderUserTable() {
    userTableBody.innerHTML = '';
    users.forEach((user) => {
        const row = document.createElement('tr');
        row.innerHTML = `
      <td>${user.firstName}</td>
      <td>${user.lastName}</td>
      <td>${user.email}</td>
      <td>
        <button onclick="editUser(${user.id})">Bearbeiten</button>
        <button onclick="deleteUser(${user.id})">Löschen</button>
      </td>
    `;
        userTableBody.appendChild(row);
    });
}

Bitte es soll nichts von Js haben, sondern wirklich die Typescript Merkmale beeinhalten

Answer 1

[regex9]

• Bei der Variable event könntest du noch eine genaue Typangabe anheften. Optional könnte man das ebenfalls bei Variablen wie row, user oder u noch in Erwägung ziehen - das wäre dann allerdings eher eine Stilfrage. Entweder man zieht die expliziten Typspezifizierungen rigoros durch oder man nutzt Typinterferenz an den Stellen aus, wo sich der Typ beim Lesen noch leicht zuordnen lässt.
• Für die Funktionen könntest du noch einen konkreten Rückgabetyp (in deinem Fall stets void) vorgeben.
• Es wäre eigentlich besser, wenn die Variable u einen aussagekräftigeren Namen erhalten würde.

Comments

[studentin04]

Danke, ist es denn, aber ein korrekter Typescript Code, wenn die Aufgabe lautet: erstelle eine crud in Typescript?