React TS类型错误：State属性与定义类型不匹配求助

问题根源 #

你定义的Shoes类型中，brand字段的类型是单个Brand对象，gender字段是单个Gender对象，但你在初始化filterState时，给这两个字段传的是数组（多个Brand/Gender对象的集合），类型完全不匹配，所以TypeScript抛出了错误。

修正方案 #

把Shoes类型里的brand和gender改成数组类型即可：

type Brand = {
    brand:string;
    checked:boolean;
}
type Gender = {
    gender: "Male" | "Female" | "Kids";
    checked:boolean;
}
// 修改这里，将brand和gender定义为数组类型
type Shoes = {
    brand: Brand[];
    gender: Gender[];
}

然后你的useState初始化代码就可以正常运行，无需修改初始化的对象结构：

const [filterState,setFilterState] = useState<Shoes>({
    brand:[
        { brand:'New Balance', checked: false },
        { brand:'Nike', checked: false },
        { brand:'Addiddas', checked: false },
        { brand:'Puma', checked: false },
        { brand:'Converse', checked: false },
        { brand:'Under Armour', checked: false },
    ],
    gender:[
        { gender:'Male', checked:false },
        { gender:'Female', checked:false },
        { gender:'Kids', checked:false },
    ],
});

补充说明 #

错误提示里的'{ brand: string; checked: false; }[]' is missing the following properties from type 'Brand': brand, checked，本质是TypeScript期望的是一个Brand对象（自带brand和checked属性），但你传入的是数组——数组本身没有这两个属性，因此触发报错。改成数组类型后，TypeScript就能识别这两个字段是多个对象的集合，和你初始化的结构完全匹配。

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