javascript - Property 'content' does not exist on type 'HTMLElement' in Typescript - Stack Overf

admin管理员组

文章数量:1203458

I get error when I try to get the content of meta tag:

document.getElementById('mymetatag').content

in Javascript is works, but typescript say that

Property 'content' does not exist on type 'HTMLElement'

So how to extend the HTMLElement type interface to support content property?

I get error when I try to get the content of meta tag:

document.getElementById('mymetatag').content

in Javascript is works, but typescript say that

Property 'content' does not exist on type 'HTMLElement'

So how to extend the HTMLElement type interface to support content property?

• javascript
• typescript

Share Improve this question Follow edited Jun 18, 2020 at 13:20 julianstark999 3,61611 gold badge2929 silver badges4242 bronze badges asked Jun 18, 2020 at 13:18 Jon SudJon Sud 11.6k3131 gold badges102102 silver badges226226 bronze badges 3

• Can you try like (<HTMLInputElement>document.getElementById("mymetatag")).content ?? This works only if the element is input.. – Maniraj Murugan Commented Jun 18, 2020 at 13:22
• Property 'content' does not exist on type 'HTMLInputElement'. also I prefer to extend the interface – Jon Sud Commented Jun 18, 2020 at 13:23
• Can you also post the html code of the element where the id mymetatag is mentioned? – Maniraj Murugan Commented Jun 18, 2020 at 13:24

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 13

TypeScript doesn't know what kind of element has this specific ID. It cannot trust the element even exists to begin with!

You need to introduce another check in order to validate your assumption:

const element: HTMLElement | null = document.getElementById('mymetatag');

if (element instanceof HTMLMetaElement) {
  element.content;
}

Update

You can also use assertion signatures.

function assert(condition: boolean, message: string): asserts condition {
  if (!condition) {
    throw new Error(message);
  }
}

Then your solution becomes:

const element: HTMLElement | null = document.getElementById('mymetatag');

assert(element instanceof HTMLMetaElement, "A <meta> element of id 'mymetatag' needs to exist in the DOM.");

element.content; // string

Also, for <template id="source">, you can use HTMLTemplateElement

const source = document.querySelector('#source') as HTMLTemplateElement;
const sourceClone = source.content.cloneNode(true) as HTMLElement;

document.getElementById() returns an HTMLElement. But you know that your result is a meta tag, which is a type of HTMLMetaElement. Looking at the docs you can see that HTMLElement is the ancestor of HTMLMetaElement so you should downcast your element to this type. You can do this with two different syntaxes:

const metaElement = document.getElementById("mymetatag") as HTMLMetaElement;
// Or the second version:
//const metaElement = <HTMLMetaElement>document.getElementById("mymetatag");
const metaContent = metaElement.content;

See more about type assertions here.

Try following:

(<HTMLMetaElement> document.getElementById("mymetatag")).content;

Can use getAttribute method:

document.getElementById('mymetatag').getAttribute('content')

本文标签： javascriptProperty 39content39 does not exist on type 39HTMLElement39 in TypescriptStack Overflow