Setup TS tests

.prettierrc

@@ -1,3 +1,17 @@
-semi: false
-singleQuote: true
-trailingComma: none
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "overrides": [
+    {
+      "files": [".prettierrc"],
+      "options": { "parser": "json" }
+    },
+    {
+      "files": ["*.ts*"],
+      "options": {
+        "semi": true
+      }
+    }
+  ]
+}

package-scripts.js

@@ -52,7 +52,7 @@ module.exports = {
       andTest: series.nps('build', 'test.size')
     },
     copyTypes: series(
-      npsUtils.copy('src/*.js.flow src/*.d.ts dist'),
+      npsUtils.copy('src/*.js.flow dist'),
       npsUtils.copy(
         'dist/index.js.flow dist --rename="react-final-form.cjs.js.flow"'
       ),
@@ -73,8 +73,10 @@ module.exports = {
       script: 'flow check'
     },
     typescript: {
-      description: 'typescript check the entire project',
-      script: 'tsc'
+      default: {
+        description: 'typescript',
+        script: 'dtslint --onlyTestTsNext ./typescript'
+      }
     },
     validate: {
       description:

package.json

@@ -5,10 +5,11 @@
   "main": "dist/react-final-form.cjs.js",
   "jsnext:main": "dist/react-final-form.es.js",
   "module": "dist/react-final-form.es.js",
-  "typings": "dist/index.d.ts",
+  "typings": "typescript/index.d.ts",
   "files": [
     "dist",
-    "scripts"
+    "scripts",
+    "typescript"
   ],
   "scripts": {
     "start": "nps",
@@ -50,6 +51,7 @@
     "babel-jest": "^23.6.0",
     "bundlesize": "^0.17.0",
     "doctoc": "^1.3.0",
+    "dtslint": "^0.4.2",
     "eslint": "^5.6.1",
     "eslint-config-react-app": "^3.0.3",
     "eslint-plugin-babel": "^5.2.1",

typescript/index.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import {
+  FormApi,
+  Config,
+  Decorator,
+  FormState,
+  FormSubscription,
+  FieldSubscription
+} from 'final-form';
+
+export interface ReactContext {
+  reactFinalForm: FormApi;
+}
+
+export interface FieldRenderProps<T extends HTMLElement> {
+  input: {
+    name: string;
+    onBlur: (event?: React.FocusEvent<T>) => void;
+    onChange: (event: React.ChangeEvent<T>) => void;
+    onFocus: (event?: React.FocusEvent<T>) => void;
+    value: any;
+    checked?: boolean;
+  };
+  meta: Partial<{
+    // TODO: Make a diff of `FieldState` without all the functions
+    active: boolean;
+    data: object;
+    dirty: boolean;
+    dirtySinceLastSubmit: boolean;
+    error: any;
+    initial: any;
+    invalid: boolean;
+    pristine: boolean;
+    submitError: any;
+    submitFailed: boolean;
+    submitSucceeded: boolean;
+    submitting: boolean;
+    touched: boolean;
+    valid: boolean;
+    visited: boolean;
+  }>;
+}
+
+export interface SubsetFormApi {
+  batch: (fn: () => void) => void;
+  blur: (name: string) => void;
+  change: (name: string, value: any) => void;
+  focus: (name: string) => void;
+  initialize: (values: object) => void;
+  mutators: { [key: string]: (...args: any[]) => any };
+  reset: () => void;
+}
+
+export interface FormRenderProps extends FormState, SubsetFormApi {
+  batch: (fn: () => void) => void;
+  form: FormApi;
+  handleSubmit: (
+    event?: React.SyntheticEvent<HTMLFormElement>
+  ) => Promise<object | undefined> | undefined;
+}
+
+export interface FormSpyRenderProps extends FormState, SubsetFormApi {
+  form: FormApi;
+}
+
+export interface RenderableProps<T> {
+  children?: ((props: T) => React.ReactNode) | React.ReactNode;
+  component?: React.ComponentType<T> | string;
+  render?: (props: T) => React.ReactNode;
+}
+
+export interface FormProps extends Config, RenderableProps<FormRenderProps> {
+  subscription?: FormSubscription;
+  decorators?: Decorator[];
+  initialValuesEqual?: (a?: object, b?: object) => boolean;
+}
+
+export interface FieldProps<T extends HTMLElement>
+  extends RenderableProps<FieldRenderProps<T>> {
+  allowNull?: boolean;
+  format?: ((value: any, name: string) => any) | null;
+  formatOnBlur?: boolean;
+  parse?: ((value: any, name: string) => any) | null;
+  name: string;
+  isEqual?: (a: any, b: any) => boolean;
+  subscription?: FieldSubscription;
+  validate?: (value: any, allValues: object) => any;
+  value?: any;
+  [otherProp: string]: any;
+}
+
+export interface FormSpyProps extends RenderableProps<FormSpyRenderProps> {
+  onChange?: (formState: FormState) => void;
+  subscription?: FormSubscription;
+}
+
+export const Field: React.ComponentType<FieldProps<any>>;
+export const Form: React.ComponentType<FormProps>;
+export const FormSpy: React.ComponentType<FormSpyProps>;
+export const version: string;
+
+export function withReactFinalForm<T>(
+  component: React.ComponentType<T>
+): React.ComponentType<T & ReactContext>;

typescript/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Form } from 'react-final-form';
+
+const noop = () => {};
+// missing required props
+const C1 = () => {
+  // $ExpectError
+  return <Form />;
+};
+
+// provided required props
+const C2 = () => <Form onSubmit={noop} />;

typescript/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015", "dom"],
+    "jsx": "react",
+    "baseUrl": ".",
+    "noEmit": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "paths": {
+      "react-final-form": [".."]
+    }
+  },
+  "include": ["."]
+}