Блог

Главная - Вопросы по программированию - Если я установлю «вариант» оприональным, я получу «Тип» неопределенный «не может использоваться в качестве типа индекса».

Если я установлю «вариант» оприональным, я получу «Тип» неопределенный «не может использоваться в качестве типа индекса».

#typescript #react-native

Вопрос:

В проекте typescript react-native это компонент, который я установил:

     type Variants = "body" | "label" | "caption" | "error" | "hint";
    
    interface TextProps {
      theme?: DefaultTheme;
      // variant?: Omit<keyof Variants, undefined>;
      variant?: Variants;
    }
    
    export const Text = styled.Text<TextProps>`
      ${({ theme }) => defaultTextStyles(theme)}
      // HERE IS THE ISSUE "variants[variant](theme)"
      ${({ variant, theme }) => variants[variant](theme)}
    `;
    
    Text.defaultProps = {
      variant: "body",
    };

Если я установлю variant?: Variants необязательный параметр, я получу эту ошибку от ${({ variant, theme }) => variants[variant](theme) . Поскольку «вариант» необязателен, он может быть неопределенным, поэтому неопределенный не может использоваться в качестве индекса. Но я также установил

    Text.defaultProps = {
      variant: "body",
    };

вариантом по умолчанию должно быть «тело», но это не срабатывает. Я пробовал их, но ничего не вышло

 
    Text.defaultProps = {
      variant: "body",
    } as Partial<TextProps>;

 
 Text.defaultProps = {
  variant: "body",
} as Pick<TextProps, "variant">;

Комментарии:

1. Я не так часто использую стилизованный компонент, но я думаю, что вы можете решить проблему, установив значение по умолчанию следующим ${({ variant, theme }) => variants[variant ?? "body"](theme)} образом .

Метки: ,