如何在TypeScript中对可变元组递归应用泛型函数？

你的核心问题源于React.Context<T>的逆变类型特性：Context<MyContext>无法赋值给Context<unknown>，因为Provider组件的value属性是逆变约束的——宽类型无法兼容窄类型的严格要求。之前用unknown统一约束元组元素的写法，既丢失了每个Context的具体类型，又触发了类型不兼容报错。

以下是两种可行的解决方案：

方案1：非递归遍历实现 #

直接让泛型参数表示整个元组类型，无需手动约束为Context<unknown>[]，让TypeScript自动推导每个元素的具体类型：

import React, { createContext } from 'react';

function contextFunction<T>(context: React.Context<T>): void {}

// 泛型T直接表示整个Context元组，自动推导每个元素的具体类型
function mapper<T extends readonly React.Context<any>[]>(...contexts: T): void {
  contexts.forEach(context => contextFunction(context));
}

调用时，TypeScript会自动识别元组中每个Context的具体类型（比如[Context<MyContext>]），contextFunction能完美匹配每个元素的类型，不会出现兼容性问题。

方案2：递归剥离元组实现 #

如果需要递归处理元组的每个元素，用递归泛型分别约束头部和剩余元组，避免使用unknown：

// 定义非空Context元组类型，确保递归有明确的终止条件
type NonEmptyContextTuple = [React.Context<any>, ...React.Context<any>[]];

function mapper2<T extends NonEmptyContextTuple>(...contexts: T): void {
  const [head, ...rest] = contexts;
  contextFunction(head);
  // 剩余元组非空时递归调用
  if (rest.length > 0) {
    mapper2(...rest as NonEmptyContextTuple);
  }
}

这种写法通过NonEmptyContextTuple确保递归只处理非空元组，剩余部分的类型会被自动推导，全程保留每个Context的具体类型。

报错原因补充 #

React.Context<T>的Provider组件要求value类型严格匹配T，而逆变特性决定了：如果A extends B，那么Context<B>可以赋值给Context<A>，但反过来不行。你之前用AllContexts extends React.Context<unknown>[]，相当于要求每个元素都是Context<unknown>，但Context<MyContext>的Provider只能接受MyContext类型的value，无法兼容Context<unknown>接受任意类型value的约束，因此触发报错。

测试验证 #

替换上述代码后，原测试案例可正常运行：

interface MyContext {
  x: number;
  y: string;
}

const exampleContext = createContext<MyContext>({ x: 42, y: 'hello' });

function example() {
  mapper(exampleContext); // 无报错
  mapper2(exampleContext, exampleContext, exampleContext); // 无报错
}

内容的提问来源于stack exchange，提问作者Alexander Kondratskiy