From 73de78d169f0bc25bd84dff0beaed3cc7a2cbb11 Mon Sep 17 00:00:00 2001
From: Evan Jacobs <570070+probablyup@users.noreply.github.com>
Date: Fri, 26 May 2023 15:35:56 -0400
Subject: [PATCH] feat(types): improved typescript support for ArrayHelpers
 (#3788)

* improved typescript support for ArrayHelpers

* change default type to unknown[]

Co-authored-by: Alperen Turkoz <alperentrkz@gmail.com>

* chore: add changeset

---------

Co-authored-by: Alexander Magana <alexander.jm28@gmail.com>
Co-authored-by: Alperen Turkoz <alperentrkz@gmail.com>
Co-authored-by: Jared Palmer <jared@jaredpalmer.com>
---
 .changeset/kind-camels-wait.md     |  5 +++++
 packages/formik/src/FieldArray.tsx | 36 +++++++++++++++---------------
 2 files changed, 23 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/kind-camels-wait.md

diff --git a/.changeset/kind-camels-wait.md b/.changeset/kind-camels-wait.md
new file mode 100644
index 000000000..d03f2ed7a
--- /dev/null
+++ b/.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.
diff --git a/packages/formik/src/FieldArray.tsx b/packages/formik/src/FieldArray.tsx
index 15c7edb57..6c303e13c 100644
--- a/packages/formik/src/FieldArray.tsx
+++ b/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,7 +68,7 @@ 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);
@@ -76,8 +76,8 @@ export const move = (array: any[], from: number, to: number) => {
   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;