打字稿和上下文，类型不可分配

Question

您好，我正在学习 typescript，但遇到 Type 错误，这是组件 catcontext.tsx：

import { createContext } from "react";

interface structCat {
    id: number,
    idParent: number,
    description: string    
};

const CatContext = createContext<structCat | null>(null);

export default CatContext;

还有这个 globalstate.tsx：

import CatContext from './CatContext';
import CatReducers from './CatReducers';
import { useReducer } from 'react';
import Data from '../../../Data/Data.json';

const initialState = {
    cats: Data,
}

function GlobalState(props: any){

    const [ state, dispatch ] = useReducer(CatReducers, initialState);


const AddCat = (cat: any) => {
    dispatch({
        type: ADD_CAT,
        payload: cat
    });
}
    return(
        <CatContext.Provider
            value={{
                cats: state.cats,
                AddCat
            }}

        >
            {props.children}
        </CatContext.Provider>
    )

}

export default GlobalState;

这是错误：

Type '{ cats: any; AddCat: (cat: any) => void; }' is not assignable to type 'structCat'.
  Object literal may only specify known properties, and 'cats' does not exist in type 'structCat'.  TS2322

Data.json 结构是这样的：

[
    {
        "id": 1,
        "idParent": null,
        "description": "main"
    },
    {
        "id": 2,
        "idParent": 1,
        "description": "name 1"
    }
]

所以，我正在尝试使用上下文 api 和 typescript 创建项目，所以类型上下文应该是类型 struct Data.json，我不确定这种方式是否正确，但我的想法是创建一个结构类型我可以添加、编辑、删除、搜索和列出数据。

Answer 1

{ cats: any; AddCat: (cat: any) => void; } 不等于 { id: number, idParent: number, description: string }

补充说明：

• cat 应该是类型 - structCat
• cats 应该是类型 - structCat 数组
• 默认上下文不应该为空，如果它可以避免或不是真正的有效值。
• AddCat 应该是 addCat - 最好只将 react 组件名称的第一个字母大写

interface ICatContext {
 cats: structCat[];
 addCat: (cat: structCat) => void;
}

createContext<ICatContext>({
 cats: [],
 addCat: (_)=>{}
})