How to get or access the properties and methods of figcaption HTML element tag without errors in TypeScript?
Tags: typescript
Published: 2021-11-15 00:00:00

---
  title: How to get or access the properties and methods of figcaption HTML element tag without errors in TypeScript?
  published: true
  tags: TypeScript
  date: Mon Nov 15 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-or-access-properties-methods-figcaption-html-element-tag-without-errors-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-41aac0205f2058d7636ded5114b518ed.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-or-access-properties-methods-figcaption-html-element-tag-without-errors-typescript)
  
To get or access the properties and methods of the `figcaption` HTML element tag without having errors or red squiggly lines in TypeScript, you have to assert the type for the `figcaption` HTML element tag using the `HTMLElement` interface in TypeScript.

The errors or warnings are shown by the TypeScript compiler since the compiler doesn't know more information on the `figcaption` HTML element tag ahead of time. But we know that we are referencing the `figcaption` HTML tag and thus we can tell the compiler to use the `HTMLElement` interface which contains the declarations for properties and methods.

### TL;DR

```ts
// get reference to the first 'figcaption'
// HTML element tag in the document
// with type assertion using the HTMLElement interface
const figcaptionTag = document.querySelector("figcaption") as HTMLElement;

// no errors or red squiggly lines will be
// shown while accessing properties or methods
// since we have asserted the type
// for the 'figcaption' HTML element tag 😍
const id = figcaptionTag.id;
```

To understand it better let's say we are selecting the first `figcaption` HTML element tag using the `document.querySelector()` method like this,

```ts
// get reference to the first 'figcaption'
// HTML element tag in the document
const figcaptionTag = document.querySelector("figcaption");
```

Now let's try to get the value of a property called `id` which is used in the `figcaption` HTML element tag as an attribute.

It can be done like this,

![error while accessing the id property in the figcaption HTML element tag](https://melvingeorge.me/_next/static/images/figcaptiontag-id-error-504ce70f886d7f986035d63037d29cb7.png)

As you can see that the TypeScript compiler is showing a red squiggly line below the `figcaptionTag` object. If you hover over the `figcaptionTag` you can see an error saying `Object is possibly 'null'`. This is because TypeScript is not sure whether the `figcaptionTag` object will have properties and methods ahead of time.

Now to avoid this error we can assert the type for the `figcaption` HTML element tag using the `HTMLElement` interface in TypeScript.

To do Type assertion we can use the `as` keyword after the `document.querySelector("figcaption")` method followed by writing the interface name `HTMLElement`.

It can be done like this,

```ts
// get reference to the first 'figcaption'
// HTML element tag in the document
// with type assertion using the HTMLElement interface
const figcaptionTag = document.querySelector("figcaption") as HTMLElement;

// no errors or red squiggly lines will be
// shown while accessing properties or methods
// since we have asserted the type
// for the 'figcaption' HTML element tag 😍
const id = figcaptionTag.id;
```

Now if hover over the `id` property in the `figcaptionTag` object TypeScript shows more information about the property itself which is again cool and increases developer productivity and clarity while coding.

![more information about the id property in the figcaption HTML element tag](https://melvingeorge.me/_next/static/images/more-info-id-property-figcaption-tag-f7062b9f9a66d90008465ff01e8ebca1.png)

See the above code live in [codesandbox](https://codesandbox.io/s/get-or-access-properties-methods-figcaption-html-element-tag-without-errors-typescript-nv0xf?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---