Pass FormValues type to Decorator (final-form#661)

* Pass FormValues type to Decorator

* Update after automatic review

Author: sedx

typescript/ReactFinalForm.test.tsx

@@ -1,5 +1,7 @@
 /* tslint:disable: no-shadowed-variable */
-import { Mutator } from 'final-form';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import { Decorator, Mutator } from 'final-form';
 import * as React from 'react';
 import { Field, Form } from 'react-final-form';
 
@@ -131,15 +133,20 @@ function mutated() {
   );
 }
 
-const typedOnSubmit = (values: { firstName: string }) => {
+interface UserForm {
+  firstName: string;
+  lastName: string;
+}
+
+const typedOnSubmit = (values: UserForm) => {
   // tslint:disable-next-line no-console
   console.log(values);
 };
 
 // with typed form data and field
 function withTypedFormData() {
   return (
-    <Form<{ firstName: string }> onSubmit={typedOnSubmit}>
+    <Form<UserForm> onSubmit={typedOnSubmit}>
       {({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
           <div>
@@ -157,3 +164,25 @@ function withTypedFormData() {
     </Form>
   );
 }
+
+const decorator: Decorator<UserForm> = form => {
+  return form.subscribe(({ values: { firstName } }) => firstName, {
+    values: true
+  });
+};
+
+// with typed decorator
+function withTypedDecorator() {
+  return <Form<UserForm> decorators={[decorator]} onSubmit={typedOnSubmit} />;
+}
+
+// with wrong typed decorator
+function withWrongTypedDecorator() {
+  return (
+    <Form<Omit<UserForm, 'firstName'>>
+      // $ExpectError
+      decorators={[decorator]}
+      onSubmit={noop}
+    />
+  );
+}

typescript/index.d.ts

@@ -67,7 +67,7 @@ export interface FormProps<FormValues = AnyObject>
   extends Config<FormValues>,
     RenderableProps<FormRenderProps<FormValues>> {
   subscription?: FormSubscription;
-  decorators?: Decorator[];
+  decorators?: Array<Decorator<FormValues>>;
   form?: FormApi<FormValues>;
   initialValuesEqual?: (a?: AnyObject, b?: AnyObject) => boolean;
 }