TS2322: Type string | boolean | ("ADMIN" | "STAFF" | "INSTRUCTOR")[] is not assignable to type never

[abdulazizkhatamov]

export interface PatchUsersPayload {
  id: string
  name?: string
  email?: string
  phone?: string
  roles?: Array<'ADMIN' | 'STAFF' | 'INSTRUCTOR'>
  status?: boolean
}

export async function patchUser(
  userData: PatchUsersPayload,
): Promise<UsersType> {
  const response = await axiosInstance.patch<UsersType>(
    `/users/${userData.id}`,
    userData,
  )
  return response.data
}


  const { mutate: mutatePatchUser, isPending } = useMutation({
    mutationFn: patchUser,
    onSuccess: (response) => {
      console.log(response)
    },
    onError: (error) => {
      const message = getAxiosErrorMessage(error)
      toast.error(message, {
        position: 'top-center',
      })
    },
  })


const form = useForm({
    defaultValues: {
      id: user.id,
      name: user.name,
      email: user.email,
      phone: user.phone ?? '',
      roles: user.roles,
      status: user.status,
    },
    validators: {
      onSubmit: patchUserSchema,
    },
    onSubmit: ({ value }) => {
      const updatedFields: PatchUsersPayload = { id: user.id }

      Object.keys(value).forEach((key) => {
        const k = key as keyof PatchUsersPayload
        if (value[k] !== user[k]) {
          updatedFields[k] = value[k]
        }
      })

      mutatePatchUser(updatedFields)
    },
  })

Error:

It is more likely because of roles and status fields, once I remove them, this type error is gone but what is wrong with my roles and status ? any hint to fix ?

[zisam-glitch]

This TypeScript error occurs because of how TypeScript evaluates dynamic property assignments when the key is a union type.

Here is a breakdown of why this happens, why removing roles and status made the error disappear, and how to fix it cleanly.

---

1. Why TS2322: Type ... is not assignable to type 'never' Happens

When you write:

const k = key as keyof PatchUsersPayload
updatedFields[k] = value[k]

1. The key k is a union:
   keyof PatchUsersPayload resolves to the union:

   'id' | 'name' | 'email' | 'phone' | 'roles' | 'status'

2. TypeScript enforces the intersection for property assignments:
   When assigning to an object using a union key (target[unionKey] = val), TypeScript cannot know at compile time which specific key k represents at runtime. To guarantee type safety across all possible branches, TypeScript requires the assigned value to be assignable to the intersection of all possible property types in PatchUsersPayload:

   string & (string | undefined) & (Array<'ADMIN' | 'STAFF' | 'INSTRUCTOR'> | undefined) & (boolean | undefined)

   Because string, Array, and boolean are mutually incompatible types with no overlap, their intersection evaluates to never.

3. The right-hand side is a union:
   value[k] evaluates to the union of all possible values:

   string | boolean | Array<'ADMIN' | 'STAFF' | 'INSTRUCTOR'> | undefined

   Assigning a union to never results in the error:

   TS2322: Type 'string | boolean | ("ADMIN" | "STAFF" | "INSTRUCTOR")[] | undefined' is not assignable to type 'never'.
   

---

2. Why Removing roles and status Made the Error Disappear

When you removed roles (array) and status (boolean):

• Every remaining property (id, name, email, phone) was either string or string | undefined.
• The intersection of all property types remained string | undefined.
• Since the right-hand side (string | undefined) was compatible with the intersection (string | undefined), TypeScript allowed the assignment without complaint.

---

3. A Hidden Bug with Array Comparison (roles)

In JavaScript, value[k] !== user[k] performs a referential equality check. Because roles is an array:

['ADMIN'] !== ['ADMIN'] // always true!

If you don't compare the contents of the array, roles will always be detected as changed and included in every patch request, even if the user didn't modify it.

---

4. Recommended Solutions

Solution A: Indexed Record Cast with Array Content Comparison (Direct & Clean)

Cast updatedFields to Record<string, unknown> for the dynamic assignment, and check array equality for roles:

onSubmit: ({ value }) => {
  const updatedFields: PatchUsersPayload = { id: user.id }

  ;(Object.keys(value) as Array<keyof PatchUsersPayload>).forEach((k) => {
    if (k === 'roles') {
      // Content comparison for array values
      const currentRoles = user.roles ?? []
      const nextRoles = value.roles ?? []
      const isRolesEqual =
        currentRoles.length === nextRoles.length &&
        currentRoles.every((r, i) => r === nextRoles[i])

      if (!isRolesEqual) {
        updatedFields.roles = value.roles
      }
    } else if (value[k] !== user[k]) {
      // Bypass the union-to-never index restriction
      ;(updatedFields as Record<string, unknown>)[k] = value[k]
    }
  })

  mutatePatchUser(updatedFields)
}

Solution B: Functional Approach with Object.entries & Object.fromEntries

If you prefer a functional, immutable approach:

onSubmit: ({ value }) => {
  const isRolesEqual = (
    a?: Array<'ADMIN' | 'STAFF' | 'INSTRUCTOR'>,
    b?: Array<'ADMIN' | 'STAFF' | 'INSTRUCTOR'>,
  ) =>
    a?.length === b?.length &&
    (a ?? []).every((role, index) => role === b?.[index])

  const dirtyEntries = Object.entries(value).filter(([k, val]) => {
    const key = k as keyof PatchUsersPayload
    if (key === 'roles') {
      return !isRolesEqual(value.roles, user.roles)
    }
    return val !== user[key]
  })

  const updatedFields: PatchUsersPayload = {
    id: user.id,
    ...Object.fromEntries(dirtyEntries),
  }

  mutatePatchUser(updatedFields)
}

Both options eliminate the TS2322 compiler error while preventing unmodified roles arrays from needlessly re-submitting.