diff --git a/typescript/ReactFinalForm.test.tsx b/typescript/ReactFinalForm.test.tsx index 774e652b..afb64e14 100644 --- a/typescript/ReactFinalForm.test.tsx +++ b/typescript/ReactFinalForm.test.tsx @@ -130,3 +130,30 @@ function mutated() { ); } + +const typedOnSubmit = (values: { firstName: string }) => { + // tslint:disable-next-line no-console + console.log(values); +}; + +// with typed form data and field +function withTypedFormData() { + return ( + onSubmit={typedOnSubmit}> + {({ handleSubmit }) => ( +
+
+ + + name="firstName" + component="input" + type="text" + placeholder="First Name" + initialValue="" + /> +
+
+ )} + + ); +} diff --git a/typescript/index.d.ts b/typescript/index.d.ts index b0cce9e2..4af5445d 100644 --- a/typescript/index.d.ts +++ b/typescript/index.d.ts @@ -64,26 +64,26 @@ export interface FormProps initialValuesEqual?: (a?: object, b?: object) => boolean; } -export interface UseFieldConfig { +export interface UseFieldConfig { afterSubmit?: () => void; allowNull?: boolean; beforeSubmit?: () => void | boolean; - defaultValue?: any; - format?: (value: any, name: string) => any; + defaultValue?: FieldValue; + format?: (value: FieldValue, name: string) => any; formatOnBlur?: boolean; - initialValue?: any; + initialValue?: FieldValue; isEqual?: (a: any, b: any) => boolean; multiple?: boolean; - parse?: (value: any, name: string) => any; + parse?: (value: FieldValue, name: string) => FieldValue; subscription?: FieldSubscription; type?: string; validate?: FieldValidator; validateFields?: string[]; - value?: any; + value?: FieldValue; } -export interface FieldProps - extends UseFieldConfig, +export interface FieldProps + extends UseFieldConfig, RenderableProps> { name: string; [otherProp: string]: any; @@ -98,12 +98,18 @@ export interface FormSpyProps extends UseFormStateParams, RenderableProps> {} -export const Field: React.FC>; -export const Form: React.FC>; -export const FormSpy: React.FC>; -export function useField( +export const Field: ( + props: FieldProps +) => React.ReactElement; +export const Form: ( + props: FormProps +) => React.ReactElement; +export const FormSpy: ( + props: FormSpyProps +) => React.ReactElement; +export function useField( name: string, - config?: UseFieldConfig + config?: UseFieldConfig ): FieldRenderProps; export function useForm( componentName?: string