对gluestack 的打字稿支持

Question

Github 链接 我将主要组件（由库安装）包装到另一个组件（我的自定义组件）中。所以，在那之后，我意识到我的组件上不再有类型安全了...... 话虽如此，我想知道是否像 NativeBase 那样提供类型安全支持。有一些接口可以方便一些，还是需要我自己实现？

import { ReactNode } from 'react';
import { Button as GlueStackButton, ButtonProps as GlueStackButtonProps } from '../../../components/core/Button'; // CORE COMPONENTS HERE

type ButtonProps = GlueStackButtonProps & {
  action?: 'default' | 'primary' | 'secondary' | 'tertiary', // If I dont map it here...
  variant?: 'solid' | 'outline' | 'link',
  isLoadingText?: string,
  IconLeft?: ReactNode,
  IconRight?: ReactNode
};

export default function Button({ children, action, variant, IconLeft, IconRight, isDisabled, isLoading, isLoadingText, ...props }: ButtonProps) {
  const disabled = isDisabled || isLoading;
  return (
    {/** 
      ... and put in a declarative way on the component, when I call for this component in my screens, I'm start to be alerted that this property 'action', for example, doesn't exists. In the same way, 'variant', 'children'...
    */}
    <GlueStackButton action={action} variant={variant} isDisabled={disabled} {...props}>
      {isLoading ? (
        <>
          <GlueStackButton.Spinner />
          {isLoadingText && <GlueStackButton.Text>{isLoadingText}</GlueStackButton.Text>}
        </>
      ) : (
        <>
          {IconLeft && IconLeft}
          <GlueStackButton.Text>{children as ReactNode}</GlueStackButton.Text>
          {IconRight && IconRight}
        </>
      )}
    </GlueStackButton>
  )
}

Answer 1

今天最好的方法可能是使用 React 中的 ComponentProps。

示例：

import { ComponentProps } from 'react';
import { Text, Pressable } from '@gluestack-ui/themed';

interface CustomButtonProps extends ComponentProps<typeof Pressable> {
    name: string;
}

export function Group({ name, ...rest }: CustomButtonProps) {
    return (
        <Pressable mr="$3" w="$16" {...rest}>
            <Text
                color="$gray200"
                textTransform="uppercase"
                fontSize="$xs"
                fontWeight="$bold"
            >
                {name}
            </Text>
        </Pressable>
    );
}