Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

I could fix it. The problem is the type of <code class="notranslate"

Conditional types to infer props error while destructuring props about duncanleung.com HOT 2 OPEN

asterikx commented on July 19, 2024

Conditional types to infer props error while destructuring props

from duncanleung.com.

Comments (2)

asterikx commented on July 19, 2024

I could fix it.

The problem is the type of ComponentType.

From React's typings:

type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;

interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
  new (props: P, context?: any): Component<P, S>;
  // ...
}

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
}

type PropsWithChildren<P> = P & { children?: ReactNode };

Thus ComponentClass does not have a children prop, while FunctionComponent does always.

If the children prop is needed, the as prop must be a function component or a class component, but then it needs to have a children prop.

Full code below:

type GetRenderComponentProps<T, P> = T extends React.ComponentType<React.PropsWithChildren<P>> | typeof Link
  ? React.ComponentProps<T>
  : T extends 'a'
  ? React.HTMLProps<T>
  : {};

type RenderComponent<P = {}> = React.ComponentType<React.PropsWithChildren<P>> | typeof Link | 'a';

type Props<E extends RenderComponent, P = {}> = {
  as?: E;
} & GetRenderComponentProps<E, P>;

const Button = <T extends RenderComponent>({ as, children, ...props }: Props<T>): ReturnType<React.FC<Props<T>>> => {
  return (
    <ChakraButton as={as} {...props}>
      {children}
    </ChakraButton>
  );
};

export default Button;

from duncanleung.com.

duncanleung commented on July 19, 2024

Hi @asterikx, thanks for the detailed write up!

I will investigate this. Thanks for the information!

from duncanleung.com.

Conditional types to infer props error while destructuring props about duncanleung.com HOT 2 OPEN

Comments (2)

Related Issues (2)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent