DEV Community: snangunurikrishna

Part 1 of 3 TypeScript Tricks I wish I knew when I started learning TypeScript

snangunurikrishna — Sun, 25 Jun 2023 18:57:40 +0000

Trick 1:

I noticed the message 'unexpected any' when using eslint with TypeScript. It made me wonder why 'any' is considered bad. How should I declare a variable that can hold any possible value? Let's examine an example.

const someArray: Array<any> = [];

// add some values
someArray.push(1);
someArray.push("Hello");
someArray.push({ age: 42 });
someArray.push(null);

We're constructing an array capable of containing all possible types. Although it may not be the most optimal code, let's proceed with it. We're including a number, a string, and an object. Now, let's examine the following code and check its outcome.

const someArray: Array<any> = [];

// ... adding the values
someArray.forEach(entry => {
  console.log(entry.age);
})

This code is considered valid TypeScript and compiles successfully. However, it will encounter a runtime failure. The reason being, when we iterate over an entry that is nullor undefined, and subsequently attempt to access the .age property, it will result in an error being thrown, as exemplified by the following message:

Uncaught TypeError: Cannot read properties of null.

I think this is some kind of false security because you expect things to just work. After all the TS compiler told you the code is fine.

But we can fix this! And the change is actually super simple. Instead of typing the array as Arraywe can just use Array if we now use the same code but with that change it will look like this.

const someArray: Array<unknown> = [];

// ... adding the values

someArray.forEach(entry => {
  console.log(entry.age);
})

and this code will not compile! Instead, TypeScript shows the following error when we try to access entry.age

using unknown enforces us to check the type (or explicitly casting the value) before we do something with a value with is unknown. Let's look at an example:

// ... other code

type Human = { name: string, age: number };

someArray.forEach(entry => {
  // if it's an object, we know it's a Human
  if(typeof entry === 'object'){
    console.log((entry as Human).age);
  }
})

In this case we checked whether the value is an object and then access the .age property. And because this is such a abstract topic, here is a little wrap-up:

any is basically saying the TypeScript compiler to not check that bit of code. Avoid using any whenever you can! It's better to use unknown instead because it enforces you to check the type of the value before using it or else it won't compile!

For more interesting content visit below website

https://fullstackindepth.com/

How to conditionally adding a key-value pair in object

snangunurikrishna — Sun, 11 Jun 2023 18:39:40 +0000

When initializing a new object in JavaScript, you can efficiently add a key-value pair conditionally by utilizing the concise and expressive nature of the conditional operator.

✅ For more tips & tricks on javascript learn from below website
🎉🎉 https://fullstackindepth.com/ 🎉🎉

Different ways to check if an array includes a value in javascript 🤔🤔

snangunurikrishna — Mon, 27 Mar 2023 05:47:25 +0000

𝐉𝐚𝐯𝐚𝐬𝐜𝐫𝐢𝐩𝐭 ✍️ 𝐩𝐨𝐬𝐭 - 8 :

👉 There are several ways to check if an array includes a value in javascript. Here are some of the most common methods. 🤔🤔

💎 𝐢𝐧𝐝𝐞𝐱𝐎𝐟(): The indexOf() method returns the first index at which the given element can be found in the array. or -1 if not present.

💎𝐢𝐧𝐜𝐥𝐮𝐝𝐞𝐬(): The includes() method returns a boolean value which indicates whether the element is present in the array or not.

💎 𝐟𝐢𝐧𝐝(): The find() method will return the value of first element in the array that satisfies the provided condition. If no values satisfies the condition, undefined is returned.

💎𝐬𝐨𝐦𝐞():The some() method will test whether atleast one element in the array passes the condition. It returns a boolean value.

All these methods have their own advantages & disadvantages.
💡 The best method to choose will depend on the specific use case.

Hope this helps ✅ Do Like 👍

Follow us on Linkedin:
https://www.linkedin.com/in/sai-krishna-nangunuri-bba504180

Follow us on Fb page:
https://www.facebook.com/profile.php?id=100064154822848

Follow us ⚡ for more:
Tips💡+ Guides📜 + Resources 💎 related to Web Development 🧑‍💻

How to remove a specific item from an array in javascript ?

snangunurikrishna — Sat, 25 Mar 2023 18:39:58 +0000

𝐉𝐚𝐯𝐚𝐬𝐜𝐫𝐢𝐩𝐭 ✍️ 𝐩𝐨𝐬𝐭 - 6 :

👉 There are several ways to remove a specific item from the array in JavaScript. Here are few ways:

Hope this helps ✅ Do Like 👍

Follow us on Linkedin:
https://www.linkedin.com/in/sai-krishna-nangunuri-bba504180
Follow us on Fb page:
https://www.facebook.com/profile.php?id=100064154822848

Part 1: Javascript Basics you MUST know as a developer

snangunurikrishna — Mon, 12 Apr 2021 08:11:50 +0000

https://youtu.be/3Z1f_tX4eJ8