如何從外部.d.ts文件擴展TS注釋？

Question

我正在將React與react-bootstrap框架一起使用，我不知道如何在組件中使用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的情況下在組件中注釋變量屬性？

謝謝！

Answer 1

您可以相對於ReactButton的variant定義variant的類型：

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