Wie kann ich meine Javascript in Typescript übersetzen?
Ich würde mich über Hilfe freuen… Es hat sich kurz vor meiner Abgabe alles gelöscht. Ich wäre so Dankbar
4 Antworten
Probier sonst Mal KI, die könnte noch am ehesten eine sinnvolle Variante daraus zaubern. Vor allem wenn's nur eine Datei ist.
Bei TS geht's ja eher drum das Programm zu beschreiben mit Datentypen, sodass ein Mensch diese verstehen kann, aber auch der Compiler versteht was dort passieren soll.
Ein tool wird wahrscheinlich nur so grob irgendwelche Typen dran klatschen, sofern es die aus den Funktionen herleiten kann. Aber das wird wahrscheinlich nur lala funktionieren.
KI hingegen wird das Programm analysieren, ABER du musst und solltest das gegenprüfen. Selbst ein programmierer könnte zu falschen entschlüssen kommen
Du kannst sie nicht zurück kompilieren, da die Informationen die du brauchst verloren gegangen sind. Alle Informationen aus TS werden am Ende entfernt, da diese nur für den Programmierer (und den compiler) relevant sind. Der Code funktioniert exakt gleich, aber die Informationen sind nicht mehr vorhanden.
Das ist wie C code, den du in 0 und 1 übersetzt. Tools können ein wenig die grobe Struktur wieder herleiten, aber alles menschliche ist nicht mehr vorhanden. Du brauchst ja in den 0 und 1 bspw. Nicht die Funktionsnamen. Daher werden die wegradiert.
Das ist ähnlich beim schritt von TS zu JS. Da wird alles was TS bietet entfernt
Wenn du Studentin bist, kannst du dir github pro besorgen. Mit github pro bekommst du Zugriff auf github copilot, eine KI, die du direkt in der IDE (bspw. VSCode) einsetzen kannst.
Ansonsten Chatgpt, perplexity..
Könnten sie sich meinen ts Code unten anschauen lg
Kann ich mal durch meine KI werfen, ja. Bitte aber in pastebin schmeißen und den Link mir schicken
https://www.perplexity.ai/search/ich-habe-mir-folgende-prompt-a-JaIO061hTzKYcgcHGIwGyQ
Da hast du eine Variante wie man den Code umschreiben kann. Wie gesagt. TS kann man eher als Extension von Javascript sehen.
Was ich außerdem empfehlen kann ist, dass du versucht den Code etwas anders zu schreiben. Nehme an dass du im 1. Semester bist, daher ist das normal, dass der Code so aussieht, aber alles in Globale Variablen zu schreiben ist nicht gerade die beste Variante.
Versuch lieber mit Rückgabe werten zu arbeiten, "Datencontainer" wie Objekte zu nutzen um den Programmfluss etwas sauberer zu gestalten.
Als Beispiel: die EditInfo Funktion greift die Globalen Variablen auf. Lieber ein Objekt reingeben und ein Objekt rausgeben. Ohne rausgeben wäre auch noch ggf okay, aber nicht immer sehr sauber.
Am aller wichtigsten sind Namen. Was macht editInfo? Es editiert info, aber welche Info? Dass du Chrome benutzt oder etwas vom Formular?
Danke für die Hilfe. Ich kenn ,ich leider wirklich gar nicht damit aus und weiss nicht was sie genau meinen. Ich habe mir versucht befindet Aufgabe Hilfe durch YouTube Video zu holen (was ich da stehen hab) 😅😅😅 Hab auch nur noch bis morgen früh Zeit mit der Abgabe..
Eine prompt die Funktionieren könnte:
Der folgende Code ist in Javascript geschrieben. Die typescript version von der Datei ist mir abhanden gekommen. Versuche den Code zu analysieren und logische Schlüsse aus dem Ablauf zu ziehen, um die richtigen Datentypen herzuleiten. Dabei sollst du das Programm am Ende in ein valides Typescript Programm umwandeln, welches trotzdem noch verständlich für Menschen ist. Halte dabei die normalen programmierregeln ein. Wiederhole dich nicht ständig, setze Namen ein, die Sinn ergeben.
Falls eine Stelle unklar sein sollte, frag vorher nach mehr Informationen, als dass du den code falsch interpretierst.
<Code>
Oder folgende Variante, die mir Claude 3.5 sonnet optimiert hat:
Analysiere den folgenden JavaScript-Code und erstelle eine TypeScript-Version mit folgenden Anforderungen:
1. Leite die Typen basierend auf der Programmlogik und den Verwendungsmustern ab
2. Verwende aussagekräftige Interfacenamen und Typdefinitionen
3. Implementiere strikte Typsicherheit unter Berücksichtigung möglicher undefined/null Werte
4. Füge JSDoc-Kommentare für komplexe Funktionen hinzu
5. Beachte TypeScript Best Practices und Clean Code Prinzipien
Bitte frag nach, falls:
- Variablen mehrere mögliche Typen haben könnten
- Die Intention einer Funktion unklar ist
- Externe Abhängigkeiten nicht eindeutig sind
- Edge Cases nicht ausreichend definiert sind
JavaScript Code:
<Code hier einfügen>
Die typescript version von der Datei ist mir abhanden gekommen.
Solche Informationen kann man komplett streichen, da sie keine Relevanz haben. Einfach nur anweisen, was mit dem vorhanden Code gemacht werden soll. Dann schon eher die eigentliche Aufgabe konkretisieren.
Falls eine Stelle unklar sein sollte, frag vorher nach mehr Informationen, als dass du den code falsch interpretierst.
Würde ich am Anfang auch weglassen und erst einmal schauen und gegen prüfen, wie gut oder schlecht dass erste Ergebnis geworden ist. Danach kann man immer noch nacharbeiten (mit KI oder per Hand). Je nachdem, was dabei herauskommt.
Mit github pro bekommst du Zugriff auf github copilot, (...)
Das Geld kann und sollte man sich sparen. Einerseits gibt es Copilot jetzt begrenzt kostenlos und wenn man Geld ausgibt, eher in Richtung OpenRouter. Da sind wären die 10 € bei weitem besser angelegt (u.a. GPT, Qwen und dutzend weitere).
LG medmonk
Ich fahre oft gut damit, zu erklären was die Ausgangslage ist, damit das LLM sich best möglich auf mich einstellen kann, ansonsten kommt es gelegentlich dazu, dass das Modell sich seinen eigenen Weg sucht.
Daher nenne ich oft was die Ausgangslage ist und was ich haben will.
Ich erwähne gerne, dass die KI auch nachfragen soll, sofern etwas unklar ist, da meiner Erfahrung nach dann schnell mal falsche Schlüsse gezogen werden und die Ausgabe dann nicht wie gewollt ist. Scheint so trainiert worden zu sein, dass nachfragen eher nebensächlich ist und er lieber immer einen Output generiert.
Perplexity hat früher mal direkte nachfragen gestellt, nachdem es die Ausgangslage analysiert hat (Pro Suche). Das kam mir aber in letzter Zeit nicht mehr vor.
Meine Erfahrung basiert vor allem auf den Claude Modellen wie Opus und sonnet, GPT halluziniert mir oft zuviel im Vergleich
Github pro bekommt man als Student kostenlos, daher auch kein weggeworfenes Geld. Github pro bietet einem auch Zugang zu vielen weiteren Tools wie z.b. Gitkraken.
Wenn der TypeScript code in JavaScript code transpiliert wurde kann man da recht wenig machen. Man kan zwar probieren den uhrsprünglichen typescript code wieder daraus zu bekommen aber bei TypeScript eigenen features die in Effizienten, aber schwer Verständlichen JavaScript code übersetzt werden wird es schwierig.
Das würde ich sagen wenn man es selber per 'hand' versucht.
Nach einer kurzen Google suche bin ich auf converter gestoßen ich weiß, aber nicht inwiefern, die was taugen. Du kannst diese vllt. mal ausprobieren.
Für die Zukunft würde ich dir raten Git mit einer Remote repository zu verwenden, damit alles in der Cloud gesichert ist.
Hallo, danke für die Antwort. Die Js wurde direkt geschrieben. Ich brauche leider nur die Übersetzung von Js in Ts. Gibt es vielleicht eine schnelle alternative? Ich muss es nämlich übermorgen früh abgeben..
Ansich ist formell jeder JavaScript code auch gültiger TypeScript code
Ich benötige leider nur einen Ts.. Ich habe unten meinen Code reinkopiert vielleicht könnten sie auch mal drüber schauen LG
Suiram1 hat Recht. Nenn die Datei einfach .TS und du hast eine valide Typescript Datei. Nur macht das Recht wenig Sinn und wird wahrscheinlich bei der Abgabe auch nicht viel helfen
Normalerweise geschieht es genau umgekehrt, in dem du in TypeScript entwickelst und dein Projekt später zur Laufzeit in JavaScript transpilierst. Für den umgekehrten Weg gibt es Tools wie ts-migrate, wie gut oder schlecht selber ausprobieren musst.
Wie es funktioniert, der beiliegenden Readme.md entnehmen kannst. Lade das Repo herunter, schau unter Packages nach und lies die Readme, die dazu gehört.
Ganz genau das Problem hab ich, die Ts ist weg und brauche sie…
Hallo, danke für den Link, könnte ich ihnen , wenn Sie Zeit hätten mal was zukommen lassen
TYPESCRIPT
var form = document.getElementById("myForm"),
imgInput = document.querySelector(".img"),
file = document.getElementById("imgInput"),
Vornamw = document.getElementById("Vorname "),
Nachname = document.getElementById("Nachname"),
Email = document.getElementById("email"),
Passwort = document.getElementById("passwort "),
submitBtn = document.querySelector(".submit"),
userInfo = document.getElementById("data"),
modal = document.getElementById("userForm"),
modalTitle = document.querySelector("#userForm .modal-title"),
newUserBtn = document.querySelector(".newUser")
let getData = localStorage.getItem('userProfile') ? JSON.parse(localStorage.getItem('userProfile')) : []
let isEdit = false, editId
showInfo()
newUserBtn.addEventListener('click', ()=> {
submitBtn.innerText = 'Submit',
modalTitle.innerText = "Fill the Form"
isEdit = false
imgInput.src = "./image/Profile Icon.webp"
form.reset()
})
file.onchange = function(){
if(file.files[0].size < 1000000){ // 1MB = 1000000
var fileReader = new FileReader();
fileReader.onload = function(e){
imgUrl = e.target.result
imgInput.src = imgUrl
}
fileReader.readAsDataURL(file.files[0])
}
else{
alert("This file is too large!")
}
}
Nächster Teil:
function showInfo(){
document.querySelectorAll('.employeeDetails').forEach(info => info.remove())
getData.forEach((element, index) => {
let createElement = `<tr class="employeeDetails">
<td>${index+1}</td>
<td><img src="${element.picture}" alt="" width="50" height="50"></td>
<td>${element.employeeVorname}</td>
<td>${element.employeeNachname}</td>
<td>${element.employeeEmail}</td>
<td>${element.employeePasswort}</td>
<td>
<button class="btn btn-success" onclick="readInfo('${element.picture}', '${element.employeeName}', '${element.employeeNachname}', '${element.employeeEmail}', '${element.employeePasswort}', '$" data-bs-toggle="modal" data-bs-target="#readData"><i class="bi bi-eye"></i></button>
<button class="btn btn-primary" onclick="editInfo(${index}, '${element.picture}', '${element.employeeName}', '${element.employeeNachname}', '${element.employeeEmail}', '${element.employeePASSWORT}', '$" data-bs-toggle="modal" data-bs-target="#userForm"><i class="bi bi-pencil-square"></i></button>
<button class="btn btn-danger" onclick="deleteInfo(${index})"><i class="bi bi-trash"></i></button>
</td>
</tr>`
userInfo.innerHTML += createElement
})
}
showInfo()
function readInfo(pic, name, age, city, email, phone, post, sDate){
document.querySelector('.showImg').src = pic,
document.querySelector('#showName').value = name,
document.querySelector("#showNachname").value = Nachname,
document.querySelector("#showEmail").value = email,
document.querySelector("#showPasswort").value = passwort,
}
function editInfo(index, pic, name, Nachname, Email, Passwort){
isEdit = true
editId = index
imgInput.src = pic
userName.value = name
Nachname.value = nachname
email.value = Email,
Passwort .value = Passwort ,
submitBtn.innerText = "Update"
modalTitle.innerText = "Update The Form"
}
function deleteInfo(index){
if(confirm("Are you sure want to delete?")){
getData.splice(index, 1)
localStorage.setItem("userProfile", JSON.stringify(getData))
showInfo()
}
}
form.addEventListener('submit', (e)=> {
e.preventDefault()
const information = {
picture: imgInput.src == undefined ? "./image/Profile Icon.webp" : imgInput.src,
employeeName: userName.value,
employeeNachname : nachname.value,
employeeEmail: email.value,
employeePasswort : Passwort .value,
}
if(!isEdit){
getData.push(information)
}
else{
isEdit = false
getData[editId] = information
}
localStorage.setItem('userProfile', JSON.stringify(getData))
submitBtn.innerText = "Submit"
modalTitle.innerHTML = "Fill The Form"
showInfo()
form.reset()
imgInput.src = "./image/Profile Icon.webp"
// modal.style.display = "none"
// document.querySelector(".modal-backdrop").remove()
})
Könnten Sie mir vielleicht sagen wo genau ich für meine Ts Fehler habe. Das wäre so lieb
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--Bootstrap 5 icons CDN-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<title>CRUD Operations</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="p-3">
<div class="row">
<div class="col-12">
<button class="btn btn-primary newUser" data-bs-toggle="modal" data-bs-target="#userForm">New User <i class="bi bi-people"></i></button>
</div>
</div>
<div class="row">
<div class="col-12">
<table class="table table-striped table-hover mt-3 text-center table-bordered">
<thead>
<tr>
<th>Vorname</th>
<th>Nachname</th>
<th>Passwort</th>
<th>Email</th>
</tr>
</thead>
<tbody id="data"></tbody>
</table>
</div>
</div>
</section>
<!--Modal Form-->
<div class="modal fade" id="userForm">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Fill the Form</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="#" id="myForm">
<div class="card imgholder">
<label for="imgInput" class="upload">
<input type="file" name="" id="imgInput">
<i class="bi bi-plus-circle-dotted"></i>
</label>
<img src="./image/Profile Icon.webp" alt="" width="200" height="200" class="img">
</div>
<div class="inputField">
<div>
<label for="name">Vorname:</label>
<input type="text" name="" id="name" required>
</div>
<div>
<label for="Nachname">Nachnem:</label>
<input type="text" name="" id="name" required>
</div>
<div>
<label for="email">email:</label>
<input type="text" name="" id="email" required>
</div>
<div>
<label for="passwort">passwort:</label>
<input type="passwort" name="" id="passwort" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" form="myForm" class="btn btn-primary submit">Submit</button>
</div>
</div>
</div>
</div>
<!--Read Data Modal-->
<div class="modal fade" id="readData">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Profile</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="#" id="myForm">
<div class="card imgholder">
<img src="./image/Profile Icon.webp" alt="" width="200" height="200" class="showImg">
</div>
<div class="inputField">
<div>
<label for="name">Vorname:</label>
<input type="text" name="" id="name" required>
</div>
<div>
<label for="Nachname">Nachnem:</label>
<input type="text" name="" id="name" required>
</div>
<div>
<label for="email">email:</label>
<input type="text" name="" id="email" required>
</div>
<div>
<label for="passwort">passwort:</label>
<input type="passwort" name="" id="passwort" required>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
Wenn der Code als JS funktioniert hast du schon mal keine Fehler.
Um 'sinnvoller' TS code zu sein müsstee zu eigentlich nur bei allen variablen, Parametern, usw. den Typ angeben. Halt so viele TypeScript Features verwenden.
Beim überfliegen ist mir außerdem eine Stellebaufgefallen wo du einen String mit undefined vergleichst und ==. Benutzt. Das würde auch true zurückgeben wenn der String Den Wert "undefined" hat. Um auch den genauen Typ zu vergleichen musst du === benutzen.
Dürfte ich Sie fragen, ob Sie drüber schauen könnten noch? Ich wollte nur sichergehen. da ich es morgen früh abgeben muss LG
Danke. Leider eine ich es erst gerade in der Uni und hab nicht viel Ahnung davon. Wenn ich die Datei einfach als .ts nenne wie kann ich es nachträglich für den Browser als js komplimieren