Website-Suche

reactjs - Exportiere Prop-Typen als TypeScript-Typen in veröffentlichtem JavaScript-React-Komponenten


Ich habe eine in JavaScript geschriebene React-Komponente, die in einem npm-Repository veröffentlicht wurde. Diese Komponente verwendet die Bibliothek prop-types, um zur Laufzeit die Typprüfung durchzuführen.

Einige der Verbraucher dieser Komponente verwenden TypeScript und möchten Typdefinitionen für die Komponente und ihre Props. Ich bin bereit, eine index.d.ts-Datei zu meinem Projekt mit Typdeklarationen hinzuzufügen, aber da die Komponente bereits die akzeptierten Typen für die Props mit prop-types deklariert, möchte ich diese wiederverwenden und nicht Typen in zwei verschiedenen Quelldateien pflegen müssen.

Ich weiß, dass @types/prop-types einen Hilfstyp, InferProps, hinzufügt, der ein propTypes-Objekt in einen verwendbaren TypeScript-Typ umwandeln kann. Aber wenn ich versuche, das in meiner index.d.ts-Datei zu verwenden, wird das importierte propTypes-Objekt als any typisiert!

src/MeinKomponent.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;

Ist es möglich, JavaScript-Code in eine TypeScript-Definitionsdatei zu importieren? Was übersehe ich?