How to get or access the properties and methods of figcaption HTML element tag without errors in TypeScript?

November 15, 2021 - 3 min read

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

// 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,

// 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,

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,

// 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.

See the above code live in codesandbox.

That's all 😃!

Feel free to share if you found this useful 😃.