Question

我在React-bootstrap框架中使用React，并且我不知道如何在组件中使用react-bootstrap中的类型。

我的Button组件示例：

import React, {Component} from 'react';
import {Button as ReactButton} from 'react-bootstrap';

interface ButtonProps {
    title: string;
    icon: JSX.Element;
    variant: string;
}

class Button extends Component<ButtonProps> {
    render() {
        const {variant, title, icon} = this.props;

        return <ReactButton variant={variant}>
            {icon}
            {title}
        </ReactButton>;
    }
}

export default Button;

使用此代码，我会遇到以下问题：

错误：（14，29）TS2322：类型'string'不能分配给类型'“ link” | “主要” | “中学” | “成功” | “危险” | “警告” | “信息” | “黑暗” | “光” | “概述主要” | “大纲中学” | “概述成功” | “概述危险” | ... 4更多... |未定义”。

那么，如何在不破坏外部.d.ts的情况下在组件中注释 variant 属性？

谢谢！

Answer 1

您可以相对于variant中的variant来定义ReactButton的类型：

interface ButtonProps {
    title: string;
    icon: JSX.Element;
    variant: ReactButton['props']['variant'];
}

如何从外部.d.ts文件扩展TS注释？

1 个答案: