TypeScript Hindi Tutorial #10 Use TypeScript with HTML input fields

How to use TS for Input fields?



Input.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html Fields with TypeScript</title>
<script src="output/inputs.js"></script>
</head>
<body>
<input type="text" id="username" placeholder="enter user name">
<br>
<br>
<input type="text" id="email" placeholder="enter user email">
<br>
<br>
<input type="text" id="age" placeholder="enter user age">
<br>
<br>
<button onclick="getInfo()" >Get Info</button>
</body>
</html>


input.js

function getInfo(){
const nameInput= document.getElementById('username') as HTMLInputElement
const name:string=nameInput.value
const emailInput= document.getElementById('email') as HTMLInputElement
const email:string=emailInput.value
const ageInput= document.getElementById('age') as HTMLInputElement
const age:string=ageInput.value
console.log(name,email,age);
}