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

Question

I am using React with react-bootstrap framework and I don't know how to use types from react-bootstrap in my component.

Example of my Button component:

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;

Using this code I get this issue:

Error:(14, 29) TS2322: Type 'string' is not assignable to type '"link" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | ... 4 more ... | undefined'.

So, how may I annotate variant attribute in my component without breaking external .d.ts?

Thanks!

Answer 1

You can define the type of your variant in relation to the variant in ReactButton :

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