Streamfield: export generic StreamfieldComponent<T> type

app/soapbox/components/ui/streamfield/streamfield.tsx

@@ -12,6 +12,12 @@ const messages = defineMessages({
   remove: { id: 'streamfield.remove', defaultMessage: 'Remove' },
 });
 
+/** Type of the inner Streamfield input component. */
+export type StreamfieldComponent<T> = React.ComponentType<{
+  value: T,
+  onChange: (value: T) => void,
+}>;
+
 interface IStreamfield {
   /** Array of values for the streamfield. */
   values: any[],
@@ -26,7 +32,7 @@ interface IStreamfield {
   /** Callback when values are changed. */
   onChange: (values: any[]) => void,
   /** Input to render for each value. */
-  component: React.ComponentType<{ onChange: (value: any) => void, value: any }>,
+  component: StreamfieldComponent<any>,
   /** Maximum number of allowed inputs. */
   maxItems?: number,
 }

app/soapbox/features/edit_profile/index.tsx

@@ -12,7 +12,7 @@ import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize_image';
 
 import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack } from '../../components/ui';
-import Streamfield from '../../components/ui/streamfield/streamfield';
+import Streamfield, { StreamfieldComponent } from '../../components/ui/streamfield/streamfield';
 
 import ProfilePreview from './components/profile-preview';
 
@@ -147,12 +147,7 @@ const accountToCredentials = (account: Account): AccountCredentials => {
   };
 };
 
-interface IProfileField {
+const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({ value, onChange }) => {
-  value: AccountCredentialsField,
-  onChange: (field: AccountCredentialsField) => void,
-}
-
-const ProfileField: React.FC<IProfileField> = ({ value, onChange }) => {
   const intl = useIntl();
 
   const handleChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {