[Solved] Easily solve error TS2339: Property XXX does not exist on type

Are you an Angular Developer or Angular frontend Designer and facing this issue? Worry not in this blog you will find the complete guide on ” error TS2339: Property XXX does not exist on type “.

This is one of the common issues faced by beginners in typescript we can also in javascript too. In this article, we will talk about what is the reason for “error TS2339: Property XXX does not exist on type” and also various ways to solve this issue

What is Angular Js?

Angular Js is a frontend framework used to design websites. It easily got recognition just in few years after it launched. It was developed by Google and Individuals through open-source contributions. Angular Js is an open-source framework and it was/is managed by the community. It was one of the most popular javascript frameworks and now it’s replaced by React JS. But the sad news Angular Js is now retired.

Even though it has been retired but still a lot of companies use it since it has a very good community and documentation.

Why do we get Property XXX does not exist on type?

The simplest way to describe is you are trying to access an element that does not belong, like accessing an element in an array that does not exist.

Let’s take an example…

this.scene.manager.scenes.forEach((i) => {
  if(i.refresh){
    i.refresh();
  }
});

Here you are traversing through each element by using forEach function.

The error is in “i.refresh” of the if condition because here you trying to access the element rather than checking whether it belongs or not.

This can be easily solved just by changing the condition to something “refresh” in i this condition will return True or False which signifies whether it exists or not.

The Final Code will look something like this…

Solution 1: Using Type Assertion

this.scene.manager.scenes.forEach((i) => {
  if ('refresh' in i) {
    (i as any).refresh();
  }
});

This is called Type Assertion in TypeScript. It’s one of the most widely used concepts in programming in conditional logic.

What is Type Assertion in TypeScript?

In Layman’s terms, Type Assertion is a technique used to tell the type of variables to the Compiler. There are multiple advantages of type assertion one is to tell the compiler not to infer the type of variables.

How do Type Assertions?
Type assertion can be easily done by using <> or as operator

Also Read:

Solution 2: Using the Inbuilt Method

As I mentioned above the error TS2339: Property XXX does not exist on type is due to accessing an unidentified object in an array that is not available, it can easily be solved by checking first whether an element is available in the array/dictionary or not and then try accessing it.

This can be easily achieved by just replacing i.refresh with i[“refresh”]

the final code will look something like this

this.scene.manager.scenes.forEach((i) => {
  if(i["refresh"]){
    i["refresh"]();
  }
});

so here writing i[“refresh”] in if statement solves since if the i[“refresh”] returns any error or anything then the content of if block won’t run.

Conclusion:

Here we saw two methods to handle the error TS2339: Property XXX does not exist on type . My personal suggestion will be to use Solution 1: Type Assertion since it is something that should be common practice for all coders, if you develop the habit of using type Assertion it will be beneficial for you and your code. It’s not very difficult and easy to understand.

If you still facing any issues please let them know in the comment section…