What is TypeScript and why is it preferred over JavaScript

Question

With the help of proper code can you tell me What is TypeScript, and why is it preferred over JavaScript?

Answer 1

What is TypeScript?

TypeScript is a superset of JavaScript that compiles to plain JavaScript. It provides static typing, allowing developers to define variable types, function signatures, and interfaces in order to catch errors early in the development process.

Why should you use TypeScript over JavaScript?

Static Typing: You can declare the type of variables, the parameter of a function and also the return type that avoids errors during development, therefore reducing runtime errors as well as having robust code.

Better Tooling: This makes it easier for your IDE to do stuff such as auto-completion, navigation, and refactor which make your development smoother, less error-prone and bug-resistant.

More readability and maintainability: Adding types and interfaces to your codebase in TypeScript makes things easier to understand and even maintain when working on very large projects.

Faster debugging: The type system of TypeScript helps catch mistakes early, which saves quite a bit of time at the debug stage and eradicates time spent on run-time problems.

Supports modern JavaScript features: TypeScript supports features from the latest JavaScript versions, even before they are fully supported by all browsers or JavaScript engines.

Answer 2

You can utilize the built-in HTML5 form validation attributes, such as required, pattern, min, max, type, etc., along with React's controlled form components to manage form data and handle validation.

Code:

import React, { useState } from 'react';

function MyForm() {

  const [formData, setFormData] = useState({

    email: '',

    password: '',

    age: ''

  });

  const handleChange = (e) => {

    const { name, value } = e.target;

    setFormData((prevData) => ({

      ...prevData,

      [name]: value

    }));

  };

  const handleSubmit = (e) => {

    e.preventDefault();

    const form = e.target;

    // HTML5 form validation

    if (form.checkValidity()) {

      console.log('Form submitted successfully');

      // Process form data

    } else {

      console.log('Form validation failed');

      form.reportValidity();

    }

  };

  return (

    <form onSubmit={handleSubmit} noValidate>

      <div>

        <label htmlFor="email">Enter your Email:</label>

        <input

          type="email"

          id="email"

          name="email"

          value={formData.email}

          onChange={handleChange}

          required

        />

      </div>

      <div>

        <label htmlFor="password">Enter correct Password:</label>

        <input

          type="password"

          id="password"

          name="password"

          value={formData.password}

          onChange={handleChange}

          required

          minLength="6"

        />

      </div>

      <div>

        <label htmlFor="age">Enter your Age:</label>

        <input

          type="number"

          id="age"

          name="age"

          value={formData.age}

          onChange={handleChange}

          required

          min="18"

          max="100"

        />

      </div>

      <button type="submit">Done</button>

    </form>

  );

}

export default MyForm;