Improved types

.eslintrc.json

@@ -62,7 +62,6 @@
     "@typescript-eslint/require-await": "off",
     "@typescript-eslint/restrict-plus-operands": "off",
     "@typescript-eslint/restrict-template-expressions": "off",
-    "@typescript-eslint/unbound-method": "off",
     "import/default": "off",
     "jsx-a11y/alt-text": "off",
     "jsx-a11y/anchor-is-valid": "off",

packages/uniforms-antd/__tests__/DateField.tsx

@@ -66,7 +66,7 @@ test('<DateField> - renders an input with correct readOnly state', () => {
   );
 
   expect(wrapper.find(DatePicker)).toHaveLength(1);
-  // @ts-ignore
+  // @ts-expect-error
   expect(wrapper.find(DatePicker).prop('onChange')(now)).toBeFalsy();
   expect(onChange).not.toHaveBeenCalled();
 });
@@ -119,7 +119,7 @@ test('<DateField> - renders a input which correctly reacts on change', () => {
   );
 
   expect(wrapper.find(DatePicker)).toHaveLength(1);
-  // @ts-ignore
+  // @ts-expect-error
   expect(wrapper.find(DatePicker).prop('onChange')(now)).toBeFalsy();
   expect(onChange).toHaveBeenLastCalledWith('x', now.toDate());
 });
@@ -134,7 +134,7 @@ test('<DateField> - renders a input which correctly reacts on change (empty)', (
   );
 
   expect(wrapper.find(DatePicker)).toHaveLength(1);
-  // @ts-ignore
+  // @ts-expect-error
   expect(wrapper.find(DatePicker).prop('onChange')(undefined)).toBeFalsy();
   expect(onChange).toHaveBeenLastCalledWith('x', undefined);
 });

packages/uniforms-antd/__tests__/RadioField.tsx

@@ -40,7 +40,7 @@ test('<RadioField> - renders a set of checkboxes with correct readOnly state', (
 
   expect(wrapper.find(Radio.Group)).toHaveLength(1);
   expect(
-    // @ts-ignore
+    // @ts-expect-error
     wrapper.find(Radio.Group).prop('onChange')({ target: { value: 'b' } }),
   ).toBeFalsy();
   expect(onChange).not.toHaveBeenCalled();
@@ -153,7 +153,7 @@ test('<RadioField> - renders a set of checkboxes which correctly reacts on chang
 
   expect(wrapper.find(Radio.Group)).toHaveLength(1);
   expect(
-    // @ts-ignore
+    // @ts-expect-error
     wrapper.find(Radio.Group).prop('onChange')({ target: { value: 'b' } }),
   ).toBeFalsy();
   expect(onChange).toHaveBeenLastCalledWith('x', 'b');
@@ -173,7 +173,7 @@ test('<RadioField> - renders a set of checkboxes which correctly reacts on chang
 
   expect(wrapper.find(Radio.Group)).toHaveLength(1);
   expect(
-    // @ts-ignore
+    // @ts-expect-error
     wrapper.find(Radio.Group).prop('onChange')({ target: { value: 'a' } }),
   ).toBeFalsy();
   expect(onChange).toHaveBeenLastCalledWith('x', 'a');

packages/uniforms-antd/__tests__/SelectField.tsx

@@ -79,7 +79,7 @@ test('<SelectField> - renders a select with correct name', () => {
 });
 
 test('<SelectField> - renders a select with correct options', () => {
-  // @ts-ignore Is open a valid prop?
+  // @ts-expect-error Is open a valid prop?
   const element = <SelectField name="x" open />;
   const wrapper = mount(
     element,
@@ -88,19 +88,19 @@ test('<SelectField> - renders a select with correct options', () => {
 
   expect(wrapper.find(Select)).toHaveLength(1);
   expect(wrapper.find(Select).prop('children')).toHaveLength(2);
-  // @ts-ignore Check children type.
+  // @ts-expect-error Check children type.
   expect(wrapper.find(Select).prop('children')[0].props.value).toBe('a');
-  // @ts-ignore Check children type.
+  // @ts-expect-error Check children type.
   expect(wrapper.find(Select).prop('children')[0].props.children).toBe('a');
-  // @ts-ignore Check children type.
+  // @ts-expect-error Check children type.
   expect(wrapper.find(Select).prop('children')[1].props.value).toBe('b');
-  // @ts-ignore Check children type.
+  // @ts-expect-error Check children type.
   expect(wrapper.find(Select).prop('children')[1].props.children).toBe('b');
 });
 
 test('<SelectField> - renders a select with correct options (transform)', () => {
   const element = (
-    // @ts-ignore Is open a valid prop?
+    // @ts-expect-error Is open a valid prop?
     <SelectField name="x" open transform={x => x.toUpperCase()} />
   );
   const wrapper = mount(
@@ -110,13 +110,13 @@ test('<SelectField> - renders a select with correct options (transform)', () =>
 
   expect(wrapper.find(Select)).toHaveLength(1);
   expect(wrapper.find(Select).prop('children')).toHaveLength(2);
-  // @ts-ignore Check children type.
+  // @ts-expect-error Check children type.
   expect(wrapper.find(Select).prop('children')[0].props.value).toBe('a');
-  // @ts-ignore Check children type.
+  // @ts-expect-error Check children type.
   expect(wrapper.find(Select).prop('children')[0].props.children).toBe('A');
-  // @ts-ignore Check children type.
+  // @ts-expect-error Check children type.
   expect(wrapper.find(Select).prop('children')[1].props.value).toBe('b');
-  // @ts-ignore Check children type.
+  // @ts-expect-error Check children type.
   expect(wrapper.find(Select).prop('children')[1].props.children).toBe('B');
 });
 

packages/uniforms-antd/__tests__/wrapField.tsx

@@ -9,7 +9,7 @@ test('<wrapField> - renders wrapper with label', () => {
   const element = wrapField({ label: 'Label' }, <div />);
   const wrapper = mount(element);
 
-  // @ts-ignore Correct label type.
+  // @ts-expect-error Correct label type.
   expect(wrapper.find(Form.Item).prop('label').props.children[0]).toBe('Label');
 });
 

packages/uniforms-antd/src/DateField.tsx

@@ -31,7 +31,7 @@ function Date({
         }
       }}
       placeholder={props.placeholder}
-      // @ts-ignore: `DatePicker` is an intersection.
+      // @ts-expect-error: `DatePicker` is an intersection.
       ref={props.inputRef}
       showTime={showTime}
       style={style}

packages/uniforms-antd/src/RadioField.tsx

@@ -7,7 +7,7 @@ import wrapField from './wrapField';
 export type RadioFieldProps = FieldProps<
   string,
   RadioProps,
-  { allowedValues?: string[]; transform?(value: string): string }
+  { allowedValues?: string[]; transform?: (value: string) => string }
 >;
 
 const radioStyle = { display: 'block' };

packages/uniforms-antd/src/SelectField.tsx

@@ -11,39 +11,43 @@ import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 import wrapField from './wrapField';
 
 type CheckboxesProps = FieldProps<
-  CheckboxValueType,
+  SelectFieldValue,
   CheckboxGroupProps | RadioGroupProps,
   {
     allowedValues?: CheckboxValueType[];
     checkboxes: true;
-    disableItem?(value: CheckboxValueType): boolean;
+    disableItem?: (value: CheckboxValueType) => boolean;
     inputRef?: Ref<typeof CheckboxGroup | typeof RadioGroup>;
     required?: boolean;
-    transform?(value: CheckboxValueType): string;
+    transform?: (value: CheckboxValueType) => string;
   }
 >;
 
 type SelectProps = FieldProps<
-  string | (string | undefined)[],
+  SelectFieldValue,
   SelectAntDProps<string | string[]>,
   {
     allowedValues?: string[];
     checkboxes?: false;
-    disableItem?(value: CheckboxValueType): boolean;
+    disableItem?: (value: CheckboxValueType) => boolean;
     inputRef?: Ref<typeof SelectAntD>;
     required?: boolean;
-    transform?(value: string): string;
+    transform?: (value: string) => string;
   }
 >;
 
+// This type is needed for the `SelectFieldProps` union to be a proper subtype
+// of `Partial<GuaranteedProps<Value>>` - otherwise `connectField` goes wild.
+type SelectFieldValue = CheckboxValueType | (string | undefined)[];
+
 export type SelectFieldProps = CheckboxesProps | SelectProps;
 
 function Select(props: SelectFieldProps) {
   const Group = props.fieldType === Array ? CheckboxGroup : RadioGroup;
   return wrapField(
     props,
     props.checkboxes ? (
-      // @ts-ignore: Incorrect `value` type.
+      // @ts-expect-error: Incorrect `value` type.
       <Group
         disabled={props.disabled}
         name={props.name}
@@ -77,7 +81,7 @@ function Select(props: SelectFieldProps) {
           }
         }}
         placeholder={props.placeholder}
-        // @ts-ignore: Incorrect `inputRef` type.
+        // @ts-expect-error: Incorrect `inputRef` type.
         ref={props.inputRef}
         value={
           props.fieldType === Array

packages/uniforms-bootstrap3/src/RadioField.tsx

@@ -17,7 +17,7 @@ export type RadioFieldProps = HTMLFieldProps<
     allowedValues?: string[];
     inline?: boolean;
     inputClassName?: string;
-    transform?(value: string): string;
+    transform?: (value: string) => string;
   }
 >;
 

packages/uniforms-bootstrap3/src/SelectField.tsx

@@ -21,7 +21,7 @@ export type SelectFieldProps = HTMLFieldProps<
     inline?: boolean;
     inputClassName?: string;
     inputRef?: Ref<HTMLSelectElement>;
-    transform?(value: string): string;
+    transform?: (value: string) => string;
   }
 >;
 

packages/uniforms-bootstrap4/src/RadioField.tsx

@@ -17,7 +17,7 @@ export type RadioFieldProps = HTMLFieldProps<
     allowedValues?: string[];
     inline?: boolean;
     inputClassName?: string;
-    transform?(value: string): string;
+    transform?: (value: string) => string;
   }
 >;
 

packages/uniforms-bootstrap4/src/SelectField.tsx

@@ -21,7 +21,7 @@ export type SelectFieldProps = HTMLFieldProps<
     inline?: boolean;
     inputClassName?: string;
     inputRef?: Ref<HTMLSelectElement>;
-    transform?(value: string): string;
+    transform?: (value: string) => string;
   }
 >;
 

packages/uniforms-bootstrap4/src/gridClassName.ts

@@ -44,7 +44,7 @@ export default function gridClassName(
     return (
       (Object.keys(grid) as GridSize[])
         .sort(compareSizeClass)
-        // @ts-ignore Weird type refinement problem.
+        // @ts-expect-error Weird type refinement problem.
         .map(size => gridClassNamePart(size, grid[size], side))
         .join(' ')
     );

packages/uniforms-bridge-graphql/src/GraphQLBridge.ts

@@ -31,9 +31,9 @@ export default class GraphQLBridge extends Bridge {
     super();
 
     // Memoize for performance and referential equality.
-    this.getField = memoize(this.getField);
-    this.getSubfields = memoize(this.getSubfields);
-    this.getType = memoize(this.getType);
+    this.getField = memoize(this.getField.bind(this));
+    this.getSubfields = memoize(this.getSubfields.bind(this));
+    this.getType = memoize(this.getType.bind(this));
   }
 
   getError(name: string, error: any) {

packages/uniforms-bridge-json-schema/src/JSONSchemaBridge.ts

@@ -81,9 +81,9 @@ export default class JSONSchemaBridge extends Bridge {
     this.schema = distinctSchema(schema);
 
     // Memoize for performance and referential equality.
-    this.getField = memoize(this.getField);
-    this.getSubfields = memoize(this.getSubfields);
-    this.getType = memoize(this.getType);
+    this.getField = memoize(this.getField.bind(this));
+    this.getSubfields = memoize(this.getSubfields.bind(this));
+    this.getType = memoize(this.getType.bind(this));
   }
 
   getError(name: string, error: any) {

packages/uniforms-bridge-simple-schema-2/src/SimpleSchema2Bridge.ts

@@ -9,9 +9,9 @@ export default class SimpleSchema2Bridge extends Bridge {
     super();
 
     // Memoize for performance and referential equality.
-    this.getField = memoize(this.getField);
-    this.getSubfields = memoize(this.getSubfields);
-    this.getType = memoize(this.getType);
+    this.getField = memoize(this.getField.bind(this));
+    this.getSubfields = memoize(this.getSubfields.bind(this));
+    this.getType = memoize(this.getType.bind(this));
   }
 
   getError(name: string, error: any) {
@@ -21,7 +21,7 @@ export default class SimpleSchema2Bridge extends Bridge {
 
   getErrorMessage(name: string, error: any) {
     const scopedError = this.getError(name, error);
-    // @ts-ignore: `messageForError` has incorrect typing.
+    // @ts-expect-error: `messageForError` has incorrect typing.
     return !scopedError ? '' : this.schema.messageForError(scopedError);
   }
 
@@ -30,7 +30,7 @@ export default class SimpleSchema2Bridge extends Bridge {
       if (Array.isArray(error.details)) {
         // FIXME: Correct type for `error`.
         return (error.details as any[]).map(error =>
-          // @ts-ignore: `messageForError` has incorrect typing.
+          // @ts-expect-error: `messageForError` has incorrect typing.
           this.schema.messageForError(error),
         );
       }
@@ -146,7 +146,7 @@ export default class SimpleSchema2Bridge extends Bridge {
   }
 
   getSubfields(name?: string) {
-    // @ts-ignore: Typing for `_makeGeneric` is missing.
+    // @ts-expect-error: Typing for `_makeGeneric` is missing.
     return this.schema.objectKeys(SimpleSchema._makeGeneric(name));
   }
 

packages/uniforms-bridge-simple-schema/__tests__/SimpleSchemaBridge.ts

@@ -10,7 +10,7 @@ describe('SimpleSchemaBridge', () => {
       // Simulate SimpleSchema.
       name = name.replace(/\d+/g, '$');
 
-      // @ts-ignore: Dynamic `name`.
+      // @ts-expect-error: Dynamic `name`.
       const field = {
         a: { type: Object, label: name },
         'a.b': { type: Object, label: name },

packages/uniforms-bridge-simple-schema/src/SimpleSchemaBridge.ts

@@ -10,9 +10,9 @@ export default class SimpleSchemaBridge extends Bridge {
     super();
 
     // Memoize for performance and referential equality.
-    this.getField = memoize(this.getField);
-    this.getSubfields = memoize(this.getSubfields);
-    this.getType = memoize(this.getType);
+    this.getField = memoize(this.getField.bind(this));
+    this.getSubfields = memoize(this.getSubfields.bind(this));
+    this.getType = memoize(this.getType.bind(this));
   }
 
   getError(name: string, error: any) {

packages/uniforms-material/__tests__/DateField.tsx

@@ -97,7 +97,7 @@ test('<DateField> - renders a Input which correctly reacts on change', () => {
     createContext({ x: { type: Date } }, { onChange }),
   );
 
-  // @ts-ignore Provide a valid EventTarget.
+  // @ts-expect-error Provide a valid EventTarget.
   wrapper.find(Input).props().onChange!({ target: { valueAsNumber: now } });
   expect(onChange).toHaveBeenLastCalledWith('x', now);
 });
@@ -112,7 +112,7 @@ test('<DateField> - renders a Input which correctly reacts on change (empty)', (
   );
 
   wrapper.find(Input).props().onChange!({
-    // @ts-ignore Provide a valid EventTarget.
+    // @ts-expect-error Provide a valid EventTarget.
     target: { valueAsNumber: undefined },
   });
   expect(onChange).toHaveBeenLastCalledWith('x', undefined);
@@ -128,7 +128,7 @@ test('<DateField> - renders a Input which correctly reacts on change (overflow)'
     createContext({ x: { type: Date } }, { onChange }),
   );
 
-  // @ts-ignore Provide a valid EventTarget.
+  // @ts-expect-error Provide a valid EventTarget.
   wrapper.find(Input).props().onChange!({ target: { valueAsNumber: now } });
   expect(onChange).not.toHaveBeenCalled();
 });

packages/uniforms-material/__tests__/LongTextField.tsx

@@ -97,7 +97,7 @@ test('<LongTextField> - renders a TextField which correctly reacts on change', (
   );
 
   expect(wrapper.find(TextField)).toHaveLength(1);
-  // @ts-ignore Provide a valid EventTarget.
+  // @ts-expect-error Provide a valid EventTarget.
   wrapper.find(TextField).props().onChange!({ target: { value: 'y' } });
   expect(onChange).toHaveBeenLastCalledWith('x', 'y');
 });
@@ -112,7 +112,7 @@ test('<LongTextField> - renders a TextField which correctly reacts on change (em
   );
 
   expect(wrapper.find(TextField)).toHaveLength(1);
-  // @ts-ignore Provide a valid EventTarget.
+  // @ts-expect-error Provide a valid EventTarget.
   wrapper.find(TextField).props().onChange!({ target: { value: '' } });
   expect(onChange).toHaveBeenLastCalledWith('x', '');
 });
@@ -127,7 +127,7 @@ test('<LongTextField> - renders a TextField which correctly reacts on change (sa
   );
 
   expect(wrapper.find(TextField)).toHaveLength(1);
-  // @ts-ignore Provide a valid EventTarget.
+  // @ts-expect-error Provide a valid EventTarget.
   wrapper.find(TextField).props().onChange!({ target: { value: 'y' } });
   expect(onChange).toHaveBeenLastCalledWith('x', 'y');
 });