样式化组件上的 Typescript 和 defaultProps

Question

我有以下样式组件：

import styled from "styled-components"
import { rem } from 'polished';
import theme from '../../theme';

type ButtonType = {
    intent?: keyof typeof theme.button;
};

const Button = styled.button<ButtonType>`
  border: ${({ intent }) => rem(theme.button[intent]["border-width"])} ${({ intent }) => theme.button[intent]["border-style"]} ${({ intent }) => theme.button[intent]["border-color"]};
  color: ${({ intent }) => theme.button[intent].color};
`;

Button.defaultProps = {
    intent: 'default',
};

export default Button;

主题所在：

const intent = {
    default: '#000000',
    error: '#FF0000',
    warning: '#FF7900',
};

const theme = {
    button: {
        default: {
            'border-color': intent.default,
            'border-style': intent.default,
            'border-width': 2,
            color: intent.default,
        },
        error: {
            'border-color': intent.error,
            'border-style': intent.error,
            'border-width': 2,
            color: intent.error,
        },
        warning: {
            'border-color': intent.warning,
            'border-style': intent.warning,
            'border-width': 2,
            color: intent.warning,
        }
    }
};

export default theme;

我收到以下 Typescript 错误：

Type 'undefined' cannot be used as an index type.

不确定为什么假设 intent 在 defaultProps 中定义时从未定义过 - 我怎样才能让 TypeScript 识别它？

Answer 1

根据您对 ButtonType 的类型定义，intent 可能是 undefined。打字稿编译器检测到并给你上述错误。

制作 intent non-optional 应该可以解决问题：

type ButtonType = {
    intent: keyof typeof theme.button;
};

Answer 2

TypeScript 不会接受您通过 Button.defaultProps 定义的任何内容，因此它不会“知道”它具有默认值。相反，您可能必须直接在组件定义中设置默认值：

const Button = styled.button<ButtonType>`
  border: ${({ intent = 'default' }) => rem(theme.button[intent]["border-width"])} ${({ intent = 'default' }) => theme.button[intent]["border-style"]} ${({ intent = 'default' }) => theme.button[intent]["border-color"]};
  color: ${({ intent = 'default' }) => theme.button[intent].color};
`;

样式化组件上的 Typescript 和 defaultProps

Typescript and defaultProps on a styled component

typescript

styled-components