feat(types): improved typescript support for ArrayHelpers (#3788)

* improved typescript support for ArrayHelpers

* change default type to unknown[]

Co-authored-by: Alperen Turkoz <[email protected]>

* chore: add changeset

---------

Co-authored-by: Alexander Magana <[email protected]>
Co-authored-by: Alperen Turkoz <[email protected]>
Co-authored-by: Jared Palmer <[email protected]>

.changeset/kind-camels-wait.md

@@ -0,0 +1,5 @@
+---
+'formik': minor
+---
+
+Added typescript generics to `ArrayHelpers` interface and its methods so that users who use TypeScript can set the type for their arrays and have type safety on array utils. I have also gone ahead and made supplying a type for the generic optional for the sake of backwards compatibility so any existing TS code that does not give a type for the FieldArray will continue to work as they always have.

packages/formik/src/FieldArray.tsx

@@ -30,11 +30,11 @@ export type FieldArrayConfig = {
   /** Override FieldArray's default shouldComponentUpdate */
   shouldUpdate?: (nextProps: {}, props: {}) => boolean;
 } & SharedRenderProps<FieldArrayRenderProps>;
-export interface ArrayHelpers {
+export interface ArrayHelpers<T = unknown[]> {
   /** Imperatively add a value to the end of an array */
-  push: (obj: any) => void;
+  push: (obj: T) => void;
   /** Curried fn to add a value to the end of an array */
-  handlePush: (obj: any) => () => void;
+  handlePush: (obj: T) => () => void;
   /** Imperatively swap two values in an array */
   swap: (indexA: number, indexB: number) => void;
   /** Curried fn to swap two values in an array */
@@ -44,17 +44,17 @@ export interface ArrayHelpers {
   /** Imperatively move an element in an array to another index */
   handleMove: (from: number, to: number) => () => void;
   /** Imperatively insert an element at a given index into the array */
-  insert: (index: number, value: any) => void;
+  insert: (index: number, value: T) => void;
   /** Curried fn to insert an element at a given index into the array */
-  handleInsert: (index: number, value: any) => () => void;
+  handleInsert: (index: number, value: T) => () => void;
   /** Imperatively replace a value at an index of an array  */
-  replace: (index: number, value: any) => void;
+  replace: (index: number, value: T) => void;
   /** Curried fn to replace an element at a given index into the array */
-  handleReplace: (index: number, value: any) => () => void;
+  handleReplace: (index: number, value: T) => () => void;
   /** Imperatively add an element to the beginning of an array and return its length */
-  unshift: (value: any) => number;
+  unshift: (value: T) => number;
   /** Curried fn to add an element to the beginning of an array */
-  handleUnshift: (value: any) => () => void;
+  handleUnshift: (value: T) => () => void;
   /** Curried fn to remove an element at an index of an array */
   handleRemove: (index: number) => () => void;
   /** Curried fn to remove a value from the end of the array */
@@ -68,16 +68,16 @@ export interface ArrayHelpers {
 /**
  * Some array helpers!
  */
-export const move = (array: any[], from: number, to: number) => {
+export const move = <T,>(array: T[], from: number, to: number) => {
   const copy = copyArrayLike(array);
   const value = copy[from];
   copy.splice(from, 1);
   copy.splice(to, 0, value);
   return copy;
 };
 
-export const swap = (
-  arrayLike: ArrayLike<any>,
+export const swap = <T,>(
+  arrayLike: ArrayLike<T>,
   indexA: number,
   indexB: number
 ) => {
@@ -88,20 +88,20 @@ export const swap = (
   return copy;
 };
 
-export const insert = (
-  arrayLike: ArrayLike<any>,
+export const insert = <T,>(
+  arrayLike: ArrayLike<T>,
   index: number,
-  value: any
+  value: T
 ) => {
   const copy = copyArrayLike(arrayLike);
   copy.splice(index, 0, value);
   return copy;
 };
 
-export const replace = (
-  arrayLike: ArrayLike<any>,
+export const replace = <T,>(
+  arrayLike: ArrayLike<T>,
   index: number,
-  value: any
+  value: T
 ) => {
   const copy = copyArrayLike(arrayLike);
   copy[index] = value;