typescript - jsx.intrinsicelements 不存在 2339 使用自定义元素时

Question

我用 lit 2.0 创建了一个自定义元素（使用打字稿）

import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

export class VVButton extends LitElement {

  render() {
    return html`
      <button style="background-color: red;"><slot></slot></button>
    `;
  }
}

customElements.define('vv-button', VVButton);

我已经上传到私有 npm 包。代码是在 html 文件上编译和测试的，一切都很好。

我尝试在也使用 Typescript 的现有项目中导入包，请参见下面的文件：

import '@vv-web-components/button-tmp';

const ProjectsActions = (): JSX.Element => {
    const options: IconOption[] = [
        { id: 'find', ariaLabel: 'Find', icon: <Magnify /> },
        { id: 'sort', ariaLabel: 'Sort', icon: <ArrowDown /> },
    ];

    return (
        <Flex marginY={'auto'} direction={'row'}>
            <Options iconOptions={options} />
            <NewProjectDialog buttonText={'Create new project'} />
            <vv-button>click here</vv-button>
        </Flex>
    );
};

export default ProjectsActions;

问题是我在使用<vv-button>click here</vv-button> The import '@vv-web-components/button-tmp'is the npm package (private package) 时遇到了错误。

错误是

Property 'vv-button' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

我该如何解决？

---

编辑/进度更新：我接受了@aleksxor 的建议，并在网站代码上添加了全局声明（不在包中），这不行 - 我不想在我的代码上添加解决方法（包代码可以）看到这是现在的样子：

import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';
   
export class VVButton extends LitElement {

  render() {
    return html`
      <button style="background-color: red; width: 50px; height: 30px;"></button>
    `;
  }
}

在我的网站代码中：

import '@vv-web-components/button-tmp'

declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace JSX {
        interface IntrinsicElements extends HTMLElement {
            // eslint-disable-next-line max-len
            'vv-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLInputElement>, HTMLInputElement>; 
        }
    }
}

const ProjectsActions = (): JSX.Element => {
    const options: IconOption[] = [
        { id: 'find', ariaLabel: 'Find', icon: <Magnify /> },
        { id: 'sort', ariaLabel: 'Sort', icon: <ArrowDown /> },
    ];

    return (
        <Flex marginY={'auto'} direction={'row'}>
            <Options iconOptions={options} />
            <NewProjectDialog buttonText={'Create new project'} />
            <vv-button>Button Text</vv-button>
        </Flex>
    );
};

export default ProjectsActions;

这部分有效，“按钮文本”不显示在按钮中！正如我上面所说，我不能在我的网站代码中添加这个声明..有没有办法在包代码中添加它？

标签： typescriptjsxlit-element