TypeScript能否为指定对象数组添加类trait方法且不修改Array原型？

实现方案 #

第一步：定义类型

通过交叉类型让自定义方法和数组原生能力共存：

type WithListManagement<T> = T[] & {
  // 新增元素，返回新数组
  withAdd: (item: T) => WithListManagement<T>
  // 删除指定索引元素，返回新数组
  withRemove: (index: number) => WithListManagement<T>
  // 更新指定索引元素，返回新数组
  withUpdate: (index: number, updated: Partial<T>) => WithListManagement<T>
}

第二步：实现工厂函数

不修改Array原型，只给指定数组附加方法：

function createManagedList<T>(initial: T[] = []): WithListManagement<T> {
  // 复制初始数组，避免修改原输入
  const list = initial.slice() as WithListManagement<T>

  list.withAdd = function(item: T) {
    return createManagedList([...this, item])
  }

  list.withRemove = function(index: number) {
    return createManagedList([...this.slice(0, index), ...this.slice(index + 1)])
  }

  list.withUpdate = function(index: number, updated: Partial<T>) {
    return createManagedList([
      ...this.slice(0, index),
      {...this[index], ...updated},
      ...this.slice(index + 1)
    ])
  }

  return list
}

第三步：使用示例

完全符合你预期的调用方式：

// 自定义类型示例
type CD = { c: number, d: string }
// 初始化带管理方法的数组
let state = createManagedList<CD>([])

function onStateChange(newState: WithListManagement<CD>) {
  console.log(newState)
  state = newState
}

// 调用自定义方法
function add(blank: CD) {
  onStateChange(state.withAdd(blank))
}

function remove(index: number) {
  onStateChange(state.withRemove(index))
}

function update(index: number, updated: Partial<CD>) {
  onStateChange(state.withUpdate(index, updated))
}

// 原生数组能力完全保留
console.log(state.length)
console.log(state.map(item => item.d))
// JSON序列化和普通数组完全一致，函数属性会被自动忽略
console.log(JSON.stringify(state))

方案特性 #

• 无全局污染：只有通过createManagedList创建的数组才会带自定义方法，不会影响全局Array原型
• 类型安全：泛型自动适配任意自定义对象类型，更新时的Partial<T>也会做类型校验
• 完全兼容原生数组行为：length、map、filter等原生方法，以及JSON.stringify都和普通数组使用效果一致
• 不可变操作：所有方法都返回新数组副本，不会修改原数组，符合状态更新的最佳实践

内容的提问来源于stack exchange，提问作者Archimedes Trajano