How to Assert a Type of an HTMLElement in TypeScript ?
Last Updated :
22 Dec, 2023
In this article, we are going to learn the different ways of asserting the type of an HTMLElement in TypeScript. The type assertion is used to type the simple variables to JavaScript objects by defining the HTML element name.
There are many ways of performing this task as listed below:
Typing using the colon syntax
This is the general way of typing the variables in TypeScript that can also be used to assert the HTMLElement as well in TypeScript.
Syntax:
const var_name: type = value;
Example: The below example will show you how the colons can be used to assert HTMLElement in TypeScript.
Javascript
const appDiv: HTMLElement =
document.getElementById('app');
appDiv.innerHTML =
`<h1>
${typeof appDiv}
</h1>`;
|
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<div id="app"></div>
</body>
</html>
|
Output:
Object
Using <> to assert typecast
In this approach, we will assert the type by specifying it inside the angular brackets (<>) just before the document selection of the element.
Syntax:
const var_name = <HTMLType> document.getElementById(ID');
Example: The below example will explain how you can assert HTMLElement using the angular brackets syntax.
Javascript
const appDiv =
<HTMLDivElement>document.
getElementById('app');
appDiv.innerHTML =
`<h1>
${typeof appDiv}
</h1>`;
|
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<div id="app"></div>
</body>
</html>
|
Output:
Object
Using item() method with asserting type
In this approach, we will select the typecasting element using the tagname and the item() method and then type it using as typingProperty.
Syntax:
const var_name = document.getElementsByTagName('tag_name').item(0) as assertionType
Example: The below example will show the use of the item() method to assert type.
Javascript
const appDiv =
document.getElementsByTagName('div').
item(0) as HTMLDivElement;
appDiv.innerHTML =
`<h1>
${typeof appDiv}
</h1>`;
|
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<div id="app"></div>
</body>
</html>
|
Output:
Object
Using the any type with asserting type
This approach will use the <any> type after the specified asserting type and define booth of them before accessing the element from DOM.
Syntax:
const var_name = (<assertingType> <any> document.getElementsByTagName('tag_name'))[0];
Example: The below example will show how to assert type with the help of the any type.
Javascript
const appDiv =
(<HTMLDivElement><any>document.
getElementsByTagName('div'))[0];
appDiv.innerHTML =
`<h1>
${typeof appDiv}
</h1>`;
|
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<div id="app"></div>
</body>
</html>
|
Output:
Object
Share your thoughts in the comments
Please Login to comment...