使用打字稿时获取类型的属性不存在错误

Question

我是TypeScript的新手，并试图了解如何将我的React Hooks代码转换为类型。 目前，我收到以下错误：

Property 'openMenu' does not exist on type '{ children?: ReactNode; }'
Property 'toggle' does not exist on type '{ children?: ReactNode; }'
Property 'slidein' does not exist on type '{ children?: ReactNode; }'

这是我的代码：

const Menu: FunctionComponent = ({ openMenu, toggle, slidein }) => {
return (
<>
<div className={`menu ${toggle}`} onClick={openMenu}>
<div className="bar1"></div>
<div className="bar2"></div>
<div className="bar3"></div>
</div>
<div className={`expand ${slidein}`}>
<ul>
<li>
<Link to="/" onClick={openMenu}>
List
</Link>
</li>
<li>
<Link to="/add-user" onClick={openMenu}>
Add User
</Link>
</li>
<li>Add Climb</li>
</ul>
</div>
</>
);
};
export default Menu;

道具是从父 App.js 文件发送的，这通常没问题，但 TypeScript 似乎不喜欢这样。 我尝试在每个道具旁边添加一个类型，但这也不能解决问题。

包.json

...
"source-map-loader": "^0.2.4",
"ts-loader": "^6.1.2",
"typescript": "^3.6.3",
...

Answer 1

FunctionComponent采用泛型类型参数P，它代表组件中使用的 props 类型Menu。如果未指定P，则{}类型用作默认值。此公共对象类型不指定任何属性类型，因此编译器将不知道openMenu、toggle和slidein。

您需要指定如下Menu：

// this is just an example. Replace it with your concrete props type
type MenuProps = {
openMenu(): void;
toggle: boolean;
slidein: string;
};
const Menu: FunctionComponent<MenuProps> = ({ openMenu, toggle, slidein }) => {...}

Answer 2

您需要在函数签名中显式定义 prop 类型，如下所示：

export const Menu = 
({ openMenu, toggle, slidein }: { 
openMenu: () => void;
toggle: boolean;
slidein: boolean;
}) => {
// rest of your code
}
export default Menu;

更好的是，定义 props 的类型并将该类型定义传递到函数中：

type PropTypes = {
openMenu: () => void;
toggle: boolean;
slideIn: boolean;    
}

并将其传递给函数：

const Menu: FunctionComponent<PropTypes> = ({ openMenu, toggle, slideIn 
}) => {
...
}

祝您编码愉快！ ☺️