如何添加自定义HTML标签TSX

Question

While trying to render a custom HTML tag <my-element> in JSX an error displayed Property does not exist on type 'JSX.IntrinsicElements'

I've found some examples of how to do that using

declare global {
  interface IntrinsicElements {
    "my-element": any
  }
}

but this produced another error:

ES2015 module syntax is preferred over custom TypeScript modules and namespaces @typescript-eslint/no-namespace

Answer 1

I've found the useful link to Typescript guide which helped me a lot:

The main idea is to create a new file with extension d.ts (eg myModule.d.ts) which should contain the following

export as namespace JSX;

export interface IntrinsicElements {
  "my-element": any;
}