使用@lit/react为Lit Web Component React包装器添加属性遇类型错误

当你用@lit/react包装Lit Web Component时，TypeScript无法自动识别Lit组件的自定义属性，导致传入text这类属性时报错。以下是几种在React侧解决的方案，无需修改原Lit组件：

方案一：显式声明组件属性类型 #

手动定义包装组件的Props类型，并通过泛型传递给createComponent，明确告诉TypeScript组件支持的属性：

import { createComponent } from '@lit/react';
import React from 'react';
import { LitWebComponent } from '@my-scope/my-lit-library';

// 定义组件支持的所有自定义属性
interface MyElementComponentProps {
  text?: string;
  // 若有其他自定义属性，直接添加到这里
}

export const MyElementComponent = createComponent<
  MyElementComponentProps,
  LitWebComponent
>({
  tagName: 'lit-web-component',
  elementClass: LitWebComponent,
  react: React,
  events: {
    onHeaderButtonClick: 'header-button-click',
  },
});

方案二：复用Lit组件的固有属性类型 #

如果Lit组件的类已经包含了完整的属性定义，可以直接提取它的实例类型来复用，避免手动重复声明：

import { createComponent } from '@lit/react';
import React from 'react';
import { LitWebComponent } from '@my-scope/my-lit-library';

// 提取Lit组件的实例属性，同时合并React的Ref属性
type MyElementComponentProps = Partial<LitWebComponent> & React.RefAttributes<LitWebComponent>;

export const MyElementComponent = createComponent<
  MyElementComponentProps,
  LitWebComponent
>({
  tagName: 'lit-web-component',
  elementClass: LitWebComponent,
  react: React,
  events: {
    onHeaderButtonClick: 'header-button-click',
  },
});

方案三：扩展全局JSX类型（可选） #

如果项目中同时会直接使用原生的<lit-web-component>标签，还可以通过全局类型声明来让TypeScript识别该标签的属性：

// 在项目的类型定义文件中（比如src/types/lit-components.d.ts）
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'lit-web-component': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & { text?: string },
        HTMLElement
      > & {
        onHeaderButtonClick?: (event: CustomEvent) => void;
      };
    }
  }
}

export {};

注意事项 #

• 确保@lit/react依赖为最新版本，旧版本的类型推导可能存在缺陷；
• 若Lit组件的属性为非字符串类型（比如布尔、数字），需在Props类型中对应声明正确的类型，避免类型不匹配。

内容的提问来源于stack exchange，提问作者ineedtoknow