React Native中扩展Array原型引发TS类型错误的修复求助

错误根源在于你全局扩展了Array<T>原型添加toggleItem方法后，与React Native的StyleProp<ViewStyle>期望的数组类型不兼容：

• React Native的StyleProp<ViewStyle>接受的数组类型是RecursiveArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle>>（支持嵌套的递归数组类型）
• 你给所有Array<T>添加了toggleItem方法，但RecursiveArray的类型定义并未包含该方法，导致TypeScript判定带有toggleItem的ViewStyle[]与期望的类型不匹配。

方案一：改用工具函数（推荐） #

避免全局修改数组原型，将toggleItem封装为独立工具函数，从根源上避免类型冲突：

// utils/arrayUtils.ts
type PredicateCallback<T> = (value: T, index: number, obj: T[]) => boolean;

export function toggleItem<T>(
  array: T[],
  element: T,
  predicate: PredicateCallback<T> | T = element,
  thisArg?: any
): T[] {
  const newArray = [...array];
  let index = -1;
  
  if (typeof predicate === typeof element) {
    index = newArray.indexOf(predicate as T);
  } else {
    index = newArray.findIndex(predicate as PredicateCallback<T>, thisArg);
  }

  if (index > -1) {
    newArray.splice(index, 1);
  } else {
    newArray.push(element);
  }
  
  return newArray;
}

使用方式：

// App.ts
import { toggleItem } from './utils/arrayUtils';

// 示例：切换样式数组中的元素
const currentStyles = [styles.base];
const updatedStyles = toggleItem(currentStyles, styles.active);

方案二：兼容RecursiveArray类型（不推荐） #

如果坚持要扩展数组原型，需要给RecursiveArray也添加对应的类型声明：

/* eslint-disable no-extend-native */
export {};

type PredicateCallback<T> = (value: T, index: number, obj: T[]) => boolean;

declare global {
  interface Array<T> {
    toggleItem(
      element: T,
      predicate?: PredicateCallback<T> | T,
      thisArg?: any,
    ): T[];
  }

  // 给递归数组类型添加toggleItem方法声明
  interface RecursiveArray<T> extends Array<T | RecursiveArray<T>> {
    toggleItem(
      element: T | RecursiveArray<T>,
      predicate?: PredicateCallback<T | RecursiveArray<T>> | (T | RecursiveArray<T>),
      thisArg?: any,
    ): RecursiveArray<T>;
  }
}

Array.prototype.toggleItem = function (element, predicate = element, thisArg) {
  let newArray = [...this];
  let index = -1;
  
  if (typeof predicate === typeof element) {
    index = newArray.indexOf(predicate);
  } else {
    index = newArray.findIndex(predicate, thisArg);
  }

  if (index > -1) {
    newArray.splice(index, 1);
  } else {
    newArray.push(element);
  }
  
  return newArray;
};

注意：全局修改原型容易引发未知的类型冲突和兼容性问题，因此更推荐方案一。

内容的提问来源于stack exchange，提问作者Pawan Kumar Kushwaha