Ts2339 Property Style Does Not Exist On Type Element

Have you encountered the TypeScript error "TS2339 Property 'style' does not exist on type 'Element'" while trying to style elements in your code? Don't worry, you're not alone in facing this issue! This common error message can be a bit confusing at first, but we're here to clarify what it means and how you can resolve it.

### Understanding the Error
When TypeScript displays the "TS2339 Property 'style' does not exist on type 'Element'" error, it's essentially telling you that you're trying to access the `style` property on an `Element` type, which TypeScript doesn't recognize as having that property by default. This issue often occurs when you are trying to manipulate the style of an HTML element directly in your code.

### How to Fix It
To fix this error, you need to let TypeScript know that the element you are working with indeed has a `style` property for CSS styling. There are a couple of ways to achieve this, depending on your specific code structure:

#### 1. Type Assertion
You can use type assertion in TypeScript to explicitly tell the compiler the type of an object. In the case of our error, you can assert the type of your element to `HTMLElement` as it includes the `style` property. Here's an example:

const myElement = document.getElementById("myElement") as HTMLElement;
myElement.style.color = "red";

By asserting the type to `HTMLElement`, you inform TypeScript that the element has a `style` property, allowing you to manipulate its CSS properties without triggering the error.

#### 2. Type Casting
Another approach is to use type casting in TypeScript. This involves using the `as` keyword to cast the `Element` type to a more specific type that includes the `style` property. Here's how you can apply type casting:

const myElement = document.getElementById("myElement") as HTMLElement;
myElement.style.fontSize = "16px";

By explicitly casting `Element` to `HTMLElement`, you can access and modify the `style` property without encountering the TS2339 error.

#### 3. Checking Element Type
If you're not certain that the element returned by `getElementById` is always an `HTMLElement`, you can perform a runtime check to ensure it before accessing the `style` property. Here's an example:

const myElement = document.getElementById("myElement");
if (myElement instanceof HTMLElement) {
  myElement.style.display = "none";
}

This conditional check prevents potential runtime errors by only styling the element if TypeScript recognizes it as an `HTMLElement`.

### Conclusion
Dealing with TypeScript errors like "TS2339 Property 'style' does not exist on type 'Element'" may seem daunting at first, but with the right strategies such as type assertion, type casting, or type checking, you can effectively address these issues and continue styling your elements hassle-free. Remember to always consider the type hierarchy in TypeScript and ensure you're working with the correct types when manipulating properties in your code.