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?