如何为含数组的自定义对象声明useState泛型类型？

错误原因分析 #

你之前的泛型声明存在两个关键问题：

• 多添加了外层的[]，错误将状态类型定义为对象数组，但实际需求是一个包含两个数组的单个对象
• 误用了未定义的类型ISortingTerm，sort数组的元素类型实际是你声明的ISortGridItem

正确的声明方式 #

方式1：内联泛型声明

直接在useState的尖括号中明确对象结构：

import { useState } from 'react';
import { IFilterTerm } from './your-file-path'; // 导入你的IFilterTerm接口

type ISortGridItem = {
    colId: string | undefined;
    sort: string | null | undefined;
}

const [initConfig, setInitConfig] = useState<{
  filter: IFilterTerm[];
  sort: ISortGridItem[];
}>({ filter: [], sort: [] });

方式2：提前定义状态接口（适合复杂场景，可读性更强）

先声明整个状态的完整类型，再传入useState泛型：

import { useState } from 'react';
import { IFilterTerm } from './your-file-path';

type ISortGridItem = {
    colId: string | undefined;
    sort: string | null | undefined;
}

// 定义状态的完整类型
interface IConfigState {
  filter: IFilterTerm[];
  sort: ISortGridItem[];
}

const [initConfig, setInitConfig] = useState<IConfigState>({ filter: [], sort: [] });

验证赋值逻辑 #

你的setInitConfig用法是正确的，只要泛型类型声明正确，就能正常完成赋值：

const persistentConfig = {
  filter: [ 
    { key: TIME, criteria: CriteriaType.DataRange, value:"currentBusinessDay"},
    { key: INCLUDE_SYNTHETIC_LEGS, criteria: CriteriaType.Equals, value:"false" },
    { key:"waterfall", criteria: CriteriaType.Equals, value:"true" } 
  ],
  sort: [
    {
      colId: "time",
      sort: "asc"
    }
  ]
};

setInitConfig({
  filter: [...persistentConfig.filter],
  sort: [...persistentConfig.sort]
});

错误代码对比 #

你之前的错误声明：

// 错误：外层多了[]，且类型名错误
const [initConfig, setInitConfig] = useState<{ filter: IFilterTerm[] , sort: ISortingTerm }[]>({filter:[], sort:[]});

这里的{ ... }[]表示该类型是对象数组，但你传入的初始值是单个对象，导致类型不匹配，触发报错。

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