关于Gluestack UI的TypeScript类型安全支持的技术问询

我把Gluestack UI库的主组件封装成自定义组件后，发现组件不再具备类型安全性。想了解Gluestack是否像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', // 如果不在这里定义...
  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 (
    {/* 
      ...而是在组件里以声明方式使用的话，在页面中调用这个组件时，会收到提示说'action'这个属性不存在。同理，'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>
  )
}

1. Gluestack UI本身的类型支持 #

Gluestack UI完全支持TypeScript类型安全，核心组件暴露的Props类型（比如你用的GlueStackButtonProps）本身就是强类型的。你遇到的问题是封装时的类型处理不当导致的，并非库本身不支持类型安全。

2. 修复当前封装的类型问题 #

你代码里的核心问题是重复定义了GlueStackButtonProps已有的action和variant属性，导致TS类型推断异常。修正方案如下：

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

// 只扩展原生Props中没有的属性，对已有属性可以缩小类型范围
type ButtonProps = Omit<GlueStackButtonProps, 'action' | 'variant'> & {
  action?: 'default' | 'primary' | 'secondary' | 'tertiary',
  variant?: 'solid' | 'outline' | 'link',
  isLoadingText?: string,
  IconLeft?: ReactNode,
  IconRight?: ReactNode
};

export default function Button({ 
  children, 
  action = 'default',
  variant = 'solid',
  IconLeft, 
  IconRight, 
  isDisabled = false, 
  isLoading = false, 
  isLoadingText, 
  ...props 
}: ButtonProps) {
  const disabled = isDisabled || isLoading;
  return (
    <GlueStackButton 
      action={action} 
      variant={variant} 
      isDisabled={disabled} 
      {...props}
    >
      {isLoading ? (
        <>
          <GlueStackButton.Spinner />
          {isLoadingText && <GlueStackButton.Text>{isLoadingText}</GlueStackButton.Text>}
        </>
      ) : (
        <>
          {IconLeft && IconLeft}
          <GlueStackButton.Text>{children}</GlueStackButton.Text>
          {IconRight && IconRight}
        </>
      )}
    </GlueStackButton>
  )
}

3. 利用Gluestack内置类型简化开发 #

Gluestack提供了可复用的内置类型，无需自行重复定义枚举值：

import { Button as GlueStackButton } from '../../../components/core/Button';
import { ButtonVariants, ButtonActions } from '@gluestack-ui/themed';

// 直接复用官方定义的类型约束
type GlueStackButtonProps = React.ComponentProps<typeof GlueStackButton>;
type ButtonProps = Omit<GlueStackButtonProps, 'action' | 'variant'> & {
  action?: ButtonActions,
  variant?: ButtonVariants,
  isLoadingText?: string,
  IconLeft?: ReactNode,
  IconRight?: ReactNode
};

4. 无需自行开发类型系统 #

和NativeBase一样，Gluestack的核心组件都内置了完整的TypeScript类型支持，你只需要正确复用或扩展这些类型即可，不需要从零开发类型系统。

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