在 Preact 和 typescript 中使用 web 组件 [英] Using web-components within Preact and typescript

问题描述

我正在使用 custom-elements 又名 web-Preact 中的组件.问题是 Typescript 抱怨 JSX.IntrinsicElements 中没有定义元素 - 在这种情况下是 check-box 元素:

<复选框选中={this.prefersDarkTheme} ref={this.svgOptions.darkTheme}/><p>深色主题</p>

错误信息(省略路径):

MyComponent.tsx 中的错误[tsl] MyComponent.tsx(50,29) 中的错误TS2339:类型JSX.IntrinsicElements"上不存在属性复选框".

我遇到了以下可能的解决方案，但不幸的是无法正常工作:

1. https://stackoverflow.com/a/57449556/7664765 - 这是一个没有真正实现的答案问题，但它涵盖了我的问题

我尝试将以下内容添加到我的 typings.d.ts 文件中:

import * as Preact from 'preact';声明全局{命名空间 JSX {接口内在元素{复选框":任何；//'any' 仅用于测试目的}}}

我的 IDE 将导入部分和 IntrinsicElements 变灰，这意味着它没有被使用 (?!) 并且无论如何它都没有工作.我仍然收到相同的错误消息.

2. https://stackoverflow.com/a/55424778/7664765 - 也是为了反应，我'我试图将它转换"为 preact，我得到了与 1 相同的结果.

我什至发现了一个 file 由 google 在 squoosh 项目中维护，他们在其中执行以下操作以polyfill"支持:

<块引用>

在与组件相同的文件夹中，有一个 missing-types.d.ts 文件，内容如下，与我的设置基本相同，但有一个 index.ts文件而不是 check-bock.ts 并且他们使用的是旧的 TS 版本 v3.5.3:

声明命名空间 JSX {接口内在元素{'范围输入':HTMLAttributes;}}

我假设他们的构建没有失败，那么它是如何工作的以及我如何正确定义自定义元素以在 preact/react 组件中使用它们?

我目前正在使用 typescript@v3.8.3 和 preact@10.3.4.

解决方案

这里是正确使用的属性，否则你会在例如传入 key 时出现错误.

声明全局 {命名空间 JSX {接口内在元素{'xx-element1': React.DetailedHTMLProps, HTMLElement>;//普通网页组件'xx-element2': React.DetailedHTMLProps, HTMLInputElement>;//从输入扩展的 Web 组件}}}

I'm using custom-elements aka web-components within Preact. The problem is that Typescript complains about elements not being defined in JSX.IntrinsicElements - in this case a check-box element:

<div className={styles.option}>
    <check-box checked={this.prefersDarkTheme} ref={this.svgOptions.darkTheme}/>
    <p>Dark theme</p>
</div>

Error message (path omitted):

ERROR in MyComponent.tsx
[tsl] ERROR in MyComponent.tsx(50,29)
      TS2339: Property 'check-box' does not exist on type 'JSX.IntrinsicElements'.

I came across the following, unfortunately not working, possible solutions:

1. https://stackoverflow.com/a/57449556/7664765 - It's an answer not really realted to the question but it covered my problem

I've tried adding the following to my typings.d.ts file:

import * as Preact from 'preact';

declare global {
    namespace JSX {
        interface IntrinsicElements {
            'check-box': any; // The 'any' just for testing purposes
        }
    }
}

My IDE grayed out the import part and IntrinsicElements which means it's not used (?!) and it didn't worked anyway. I'm still getting the same error message.

2. https://stackoverflow.com/a/55424778/7664765 - Also for react, I've tried to "convert" it to preact and I got the same results as for 1.

I've even found a file maintained by google in the squoosh project where they did the following to "polyfill" the support:

In the same folder as the component a missing-types.d.ts file with the following content, basically the same setup I have but with a index.ts file instead of check-bock.ts and they're using an older TS version v3.5.3:

declare namespace JSX {
  interface IntrinsicElements {
    'range-input': HTMLAttributes;
  }
}

I'm assuming their build didn't fail so how does it work and how do I properly define custom-elements to use them within preact / react components?

I'm currently using typescript@v3.8.3 and preact@10.3.4.

解决方案

Here are the correct attributes to use, otherwise you will get an error when passing key in for example.

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'xx-element1': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; // Normal web component
      'xx-element2': React.DetailedHTMLProps<React.HTMLAttributes<HTMLInputElement>, HTMLInputElement>; // Web component extended from input
    }
  }
}

这篇关于在 Preact 和 typescript 中使用 web 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！