如何在Shopify Restyle中类型安全地向子组件传递Variant值？

问题根源 #

你遇到的类型不兼容错误，本质是手动解构并回传variant时，TypeScript无法正确推断其类型，加上variant可能存在undefined的情况，和useRestyle期望的必填类型冲突。

正确的类型安全实现方式 #

1. 基于Restyle自动推导Props类型

首先确保主题、restyle函数定义正确，然后用RestyleProps自动生成符合要求的基础props类型，再扩展自定义属性：

import { createTheme, createRestyleFunction, useRestyle, RestyleProps } from '@shopify/restyle';

// 定义主题及类型
const theme = createTheme({
  colors: {
    primary: '#007AFF',
    secondary: '#5AC8FA',
  },
  variants: {
    button: {
      primary: { backgroundColor: 'primary' },
      secondary: { backgroundColor: 'secondary' },
    },
  },
});
type Theme = typeof theme;

// 创建按钮的variant restyle函数
const buttonVariant = createRestyleFunction({
  property: 'variant',
  themeKey: 'button',
});
const restyleFunctions = [buttonVariant];

// 定义Button组件的Props：自动推导restyle属性 + 自定义属性
type ButtonProps = RestyleProps<Theme, typeof restyleFunctions> & {
  onPress: () => void;
  label: string;
  buttonType?: string;
};

2. 组件内无需手动处理variant

解构时把自定义属性（onPress/label/buttonType）单独取出，剩余的rest直接传给useRestyle，TypeScript会自动识别rest包含正确类型的variant：

const Button = ({ onPress, label, buttonType, ...rest }: ButtonProps) => {
  const restyleProps = useRestyle(restyleFunctions, rest);
  
  return (
    <TouchableOpacity onPress={onPress} style={restyleProps.style}>
      <Text>{label}</Text>
    </TouchableOpacity>
  );
};

3. 若需单独处理variant的情况

如果必须单独获取variant做逻辑处理，需要确保其类型和restyle函数期望的一致，可选时提供默认值避免undefined：

const Button = ({ onPress, label, buttonType, variant = 'primary', ...rest }: ButtonProps) => {
  // 明确variant的非undefined类型，再合并回rest
  const restyleProps = useRestyle(restyleFunctions, { variant, ...rest });
  
  // 这里可以用variant做自定义逻辑，比如根据类型修改label样式
  const textColor = variant === 'primary' ? 'white' : 'black';
  
  return (
    <TouchableOpacity onPress={onPress} style={restyleProps.style}>
      <Text style={{ color: textColor }}>{label}</Text>
    </TouchableOpacity>
  );
};

关键注意事项 #

• 不要手动定义variant的类型，而是依赖RestyleProps从主题和restyle函数自动推导，避免类型不匹配。
• 如果variant是必填项，在ButtonProps里不要加可选标记（?），确保调用组件时必须传入有效值。

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