After learning and using TypeScript in some project for a while, here are my thoughts on TypeScript.
1. A Super set of JavaScript
Typescript uses the same syntax as JavaScript with nifty additional features.
Typescript is just like JavaScript but has a strict syntactic structure with stringent datatype rules.
2. Type safety
The type system in TypeScript, the set of rules on how to assign data types or types for short to variables, objects and other elements of my code is very stringent. Though JavaScript has type safety but TypeScript is stronger.
3. Code Hinting
My favourite part of typescript is its ability to present hints while I code. When combined with powerful code editors like VS Code or WebStorm, the contextual code suggestions helped me reduce errors and increased my typing speed
4. Error message
Available separately the linter when enabled in the editor, can detect errors of syntactic, type and even contextual nature. It presents the errors by underlining the error part with red squiggly lines as I type. This makes error correction easier and faster.
5. Versatility
What makes typescript versatile is its wide variety of configuration options. I can enable and disable different options to cater to my project’s needs.
One of the settings I used a lot is the target option. It flipped between commonJS module system and the es5 module system while learning.
Conclusion
As a beginner, all these strict rules felt time-consuming since it took less time to write the same in JS. Over time, I realized the usefulness of TS and started using its features as I learnt them. I’ve decided to use typescript in my next side project instead of JavaScript.

My thoughts on TypeScript

The virtual DOM is used to optimize updates to the user interface (UI) of a web application. It works by creating a lightweight in-memory representation of the UI, called the virtual DOM, and using this virtual representation to compute the minimum number of changes that need to be made to the real DOM in order to reflect updates to the UI.
Here's how it works:


When a user interacts with the web application and causes the UI to change, the virtual DOM creates a new virtual tree to represent the updated UI.


It then compares this new virtual tree to the previous virtual tree, and computes the minimum number of changes that need to be made to the real DOM to reflect the updates.


These changes are then made to the real DOM in a single batch, which is much more efficient than making individual changes to the DOM for each update.


Using the virtual DOM can significantly improve the performance of a web application, especially for applications with complex UI layouts or large amounts of data that need to be displayed. It allows developers to update the UI efficiently, without having to worry about the performance impact of manipulating the real DOM directly.
Here is an example of how the virtual DOM can be used to optimize updates to a simple UI element, a div element with the text "Hello, World!":
let root = document.getElementById("root");

function render() {
  root.innerHTML = "Hello, World!";
}

render();
Every time the render function is called, the inner HTML of the root element is completely replaced with the new text. This can be inefficient if the render function is called frequently, as the browser will need to re-create the entire DOM tree for the root element every time.
To optimize this with the virtual DOM, we can create a virtual tree representation of the root element, and use this virtual tree to compute the minimum number of changes needed to update the real DOM:
let root = document.getElementById("root");

let virtualRoot = {
  tagName: "div",
  children: [
    {
      tagName: "text",
      text: "Hello, World!",
    },
  ],
};

function render() {
  let newVirtualRoot = {
    tagName: "div",
    children: [
      {
        tagName: "text",
        text: "Hello, World!",
      },
    ],
  };

  let patches = diff(virtualRoot, newVirtualRoot);
  virtualRoot = newVirtualRoot;
  patch(root, patches);
}

render();
In this example, the diff function compares the old virtual tree (virtualRoot) to the new virtual tree (newVirtualRoot), and returns a list of patches representing the minimum number of changes needed to update the real DOM. The patch function then applies these patches to the real DOM, updating it to reflect the new virtual tree.
This approach allows the render function to update the UI efficiently, without having to re-create the entire DOM tree every time. It also makes it easier for the developer to update the UI, as they can work with the virtual tree rather than directly manipulating the real DOM.

What is Virtual DOM for?

We have 4 diffrent options to clone object in javascript
1.  Use the spead operator
In JavaScript, you can use the three dots (…) operator to spread the properties of an object to where one or more key-value pair is expected.
For example:
const data = { name: "Alice", age: 26 }
const dataCopy = { ...data }

data.age = 1000

console.log(data)
console.log(dataCopy)
Output:
{
  age: 1000,
  name: "Alice"
}
{
  age: 26,
  name: "Alice"
}
2. Call the Object.assign() function
const data = { name: "Alice", age: 26 }
const dataCopy = Object.assign({}, data)
data.age = 1000
console.log(data)
console.log(dataCopy)
Output:
{
  age: 1000,
  name: "Alice"
}
{
  age: 26,
  name: "Alice"
}
3. Use JSON parsing
const data = { name: "Alice", age: 26 }
const dataCopy = JSON.parse(JSON.stringify(data))
data.age = 1000
console.log(data)
console.log(dataCopy)
Output:
{
  age: 1000,
  name: "Alice"
}
{
  age: 26,
  name: "Alice"
}
4. Use the structuredClone() function
const data = { name: "Alice", age: 26 }
const dataCopy = structuredClone(data)
data.age = 1000
console.log(data)
console.log(dataCopy)
Output:
{
  age: 1000,
  name: "Alice"
}
{
  age: 26,
  name: "Alice"
}

How would you clone an object in JavaScript?

This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
Learn More
To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.

Blog

My thoughts on TypeScript

More articles

My thoughts on TypeScript

What is Virtual DOM for?

How would you clone an object in JavaScript?

Started NextJS