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?