reactjs - Eksporter prop-typer som TypeScript-typer i publisert JavaScript React-komponent


Jeg har en React-komponent skrevet i JavaScript og publisert til et npm-depot. Denne komponenten bruker prop-types-biblioteket for å gjøre typekontroll under kjøring.

Noen av brukerne av denne komponenten bruker TypeScript, og ønsker typedeklarasjoner for komponenten og dens props. Jeg er villig til å legge til en index.d.ts-fil i prosjektet mitt med typedeklarasjoner, men siden komponenten allerede deklarerer de aksepterte typene for props med prop-types, ønsker jeg å gjenbruke disse og slipper å vedlikeholde typer i to forskjellige kildefiler.

Jeg vet at @types/prop-types legger til en nyttig type, InferProps, som kan konvertere et propTypes-objekt til en brukbar TypeScript-type. Men når jeg prøver å bruke det i min index.d.ts-fil, blir det importerte propTypes-objektet typet som any!

src/MyComponent.js

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent ({color, quantity}) => <p>Color was {color}, quantity: {quantity}</p>;

MyComponent.propTypes = {
  color: PropTypes.string,
  quantity: PropTypes.number
};

export default MyComponent;

@types/index.d.ts

import React from 'react';
import PropTypes from 'prop-types';
import MyComponent from '../src';


declare const MyComponentType: React.FC<
  PropTypes.InferProps<
    typeof MyComponent.propTypes
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ this always seems to resolve to `any`
  >
>;

export default MyComponentType;

Er det mulig å importere JavaScript-kode i en TypeScript-deklarasjonsfil? Hva går jeg glipp av?