React中如何为setState指定特定只读类型并解决类型错误？

问题 #

在组件中尝试使用以下useState定义：

const [paramList, setParamList] = useState<Parameters<any>[] | undefined>();

其中Parameters类型定义为：

type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

但调用setParamList(renderState.parameters)时出现类型错误：

setParamList(renderState.parameters);

错误提示：

(parameter) renderState: RenderState
Argument of type 'ReadonlyMap<string, any> | undefined' is not assignable to parameter of type 'SetStateAction<unknown[][] | undefined>'.
  Type 'ReadonlyMap<string, any>' is not assignable to type 'SetStateAction<unknown[][] | undefined>'.
    Type 'ReadonlyMap<string, any>' is missing the following properties from type 'unknown[][]': length, pop, push, concat, and 24 more.ts(2345)

需要解决类型不匹配问题，实现为setState指定特定只读类型的需求。

解决方法 #

1. 转换ReadonlyMap为目标数组类型 #

错误核心是renderState.parameters的类型（ReadonlyMap<string, any> | undefined）与paramList的类型（unknown[][] | undefined）完全不兼容，需先将ReadonlyMap转换为符合要求的数组结构：

• 如果ReadonlyMap的value本身就是函数参数数组（符合Parameters<T>结构），直接提取值数组：

  setParamList(renderState.parameters ? Array.from(renderState.parameters.values()) : undefined);
  

• 如果需要从键值对构造参数数组，根据实际结构转换，比如：

  // 将键值对转为[键, 值]形式的参数数组
  setParamList(renderState.parameters ? Array.from(renderState.parameters.entries()) : undefined);
  

2. 修正paramList的类型定义（若需求是存储ReadonlyMap） #

如果你的实际需求是让paramList存储ReadonlyMap<string, any>类型，直接修正useState的类型定义即可：

const [paramList, setParamList] = useState<ReadonlyMap<string, any> | undefined>();
// 此时调用setParamList(renderState.parameters)无类型错误

3. 为Parameters指定具体函数类型（替代any） #

原代码中Parameters<any>会退化为unknown[]，导致Parameters<any>[]变成unknown[][]，若知道目标函数的类型，明确指定可让类型更精准：

// 假设目标函数为(arg1: string, arg2: number) => void
type TargetFunc = (arg1: string, arg2: number) => void;
const [paramList, setParamList] = useState<Parameters<TargetFunc>[] | undefined>();

转换ReadonlyMap时确保值符合目标类型：

setParamList(renderState.parameters ? Array.from(renderState.parameters.values()) as Parameters<TargetFunc>[] : undefined);

4. 使用只读数组满足“特定只读类型”需求 #

如果需要数组是只读的，将类型定义为readonly Parameters<TargetFunc>[] | undefined，这样paramList无法直接调用push、pop等修改方法：

const [paramList, setParamList] = useState<readonly Parameters<TargetFunc>[] | undefined>();
// Array.from返回的普通数组可兼容只读数组类型
setParamList(renderState.parameters ? Array.from(renderState.parameters.values()) : undefined);

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