样式化组件上的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;

我收到以下打字错误：

类型“未定义”不能用作索引类型。

不知道为什么假设意图是未定义的，如果它是在defaultProps中定义的-我如何让TypeScript识别这一点？

Answer 1

TypeScript不会接受您通过< code>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};
`;

Answer 2

根据您对ButtonType的类型定义，意图可能是未定义的。类型脚本编译器检测到这一点并为您提供所述错误。

将意图设为非可选应解决此问题：

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