Typescript React类型的类型参数不可分配给类型的参数答案

【问题标题】：Typescript React type argument of type not assignable to parameter of typeTypescript React类型的类型参数不可分配给类型的参数
【发布时间】：2019-09-11 14:13:11
【问题描述】：

我刚刚开始在 React 应用程序中使用 Typescript。我正在尝试使用组件中的挂钩来实现简单的切换功能。我已经这样定义了 useState：

const [menuList, setOpen] = React.useState<Array<keyof IOppmeldingModel>>([]);

以及从menuList 中删除或添加的函数：

function handleToggle(id:keyof IOppmeldingModel) {
        const menu = checkIfOpen(id);
        const updatedMenuList = menu ? menuList.concat(id) : menuList.filter(menuId => menuId !== id);
        setOpen(updatedMenuList);
    }

当我尝试像这样使用此功能时：

 <Button
     ref={anchorRef}
     aria-controls="menu-list-grow"
     aria-haspopup="true"
     onClick={handleToggle(row.id)}
     variant="contained"
     size="small"
   >Velg
 </Button>

我得到错误：

“数字”类型的参数不能分配给“id”类型的参数 | "gjennomfortDato" | "gyldigTil" | "oppmeldtDatoTid" | “经典” | "opmeldtAv" | “菜单”。

IOppmeldingModel 的界面如下所示：

interface IOppmeldingModel {
    id: number,
    gjennomfortDato: string,
    gyldigTil: string,
    oppmeldtDatoTid: string,
    klasse: string,
    oppmeldtAv: string,
    menu: string,
}

为什么我在发送number 时收到此错误，而IOppmeldingModel 可以将数字作为id 属性的类型？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

你可以用keyof代替

type OppmeldingType = string | number;

function handleToggle(id: OppmeldingType) {
    const menu = checkIfOpen(id);
    const updatedMenuList = menu ? menuList.concat(id) : menuList.filter(menuId => menuId !== id);
    setOpen(updatedMenuList);
}

还要小心只在点击时调用您的切换方法（而不是立即）

onClick={() => handleToggle(row.id)}

【讨论】：