自定义Web组件库的JSX类型错误修复方案求助

Alright, let's tackle this problem head-on. The core issue here is that TypeScript's default JSX type checking treats your component's class instance type as required props, but you want all props to be optional in JSX—just like your createElement function already handles with Partial<Props>.

Step 1: Understand the Root Cause #

Your Component<Props> type ties props directly to the class instance type (since new(): Props and init(props: Props) use the class itself as the Props type). By default, TypeScript assumes all class properties (even those with default values like someProp = 0) are required in JSX props unless marked with ?. Since you can't use ? per your constraints, we need to override the global JSX type rules.

Step 2: Override Global JSX Type Definitions #

Create a global type file (e.g., global.d.ts) in your project, and add the following code to tell TypeScript to treat props for your custom components as optional:

// Import your Component type from your library (adjust the path as needed)
import type { Component } from "./your-component-library";

declare global {
  namespace JSX {
    // Extract the Props type from your Component interface
    type ComponentProps<C extends Component<any>> = C extends Component<infer P> ? P : never;

    // Override props resolution for custom Components:
    // Make all props optional, plus include standard JSX attributes like `key`
    interface ElementAttributes<C extends Component<any>>
      extends Partial<ComponentProps<C>>, IntrinsicAttributes {}

    // Ensure TypeScript recognizes your Component type as a valid JSX element type
    type ElementType = Component<any> | string | ((props: any) => Element);
  }
}

Step 3: Verify the Fix #

With this type definition in place, when you write <MyComponent/>, TypeScript will resolve the props as Partial<MyComponent>—meaning all @prop() fields (like someProp) are optional, even though they're defined without ? in the class. This aligns perfectly with your createElement function's behavior, and the "property missing" compile error should disappear.

Why This Works #

• We use conditional types (infer P) to extract the Props type from your Component<Props> interface dynamically.
• Partial<ComponentProps<C>> converts all required class properties to optional ones specifically for JSX props.
• Extending IntrinsicAttributes keeps support for standard JSX attributes like key.

Additional Notes #

• Ensure your tsconfig.json includes the global type file (via the include array or typeRoots setting).
• This setup works alongside function components and native HTML elements, since we kept those in the ElementType definition.

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