Question

在我的带有打字稿的react应用程序中，我将semantic-ui-react用于UI。此snabdobx显示了JavaScript中Menu.Item的用法，但我想在打字稿中使用它，并感到困惑。

<Menu.Item  name="home"  active={activeItem === 'home'}
      onClick={this.handleItemClick}>

public handleItemClick = (
    e: React.MouseEvent<HTMLAnchorElement>,
    {name} // Here I ahve problem with typings to destruct the name
  ) => {
    this.setState({ activeItem: name });
  };

MenuItem.d.ts中的类型是

export interface MenuItemProps extends StrictMenuItemProps {[key: string]: any}

export interface StrictMenuItemProps {
  /*many other values */
  /** Internal name of the MenuItem. */
  name?: string

  onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: MenuItemProps) => void
}

此处{name}:{name:string}不起作用。并获取整个数据，我无法使用data.name

Answer 1

这样键入意味着({ name })的参数name是any类型，因此不会引发错误。

传递字符串，例如向handleItemClick发送“消息”，您应该执行以下操作：

 handleItemClick = (name: string) => () => this.setState({ activeItem: name })
...
<Menu.Item
    name='messages'
    active={activeItem === 'messages'}
    onClick={this.handleItemClick('message')}
/>

从TS错误消息中可以看到，Menu.click回调的第二个参数是MouseEvent而不是{name: string}

btw：为了更加安全，您可以打开strictFunctionTypes文件中compilerOptions中的tsconfig.json标志

----编辑-----

我想我明白你的意思。请忘记上一部分：

Menu.Item.onClick已由StrictMenuItemProps界面中的@types lib键入。要获取onClick类型，您可以使用StrictMenuItemProps['onClick']等于onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: MenuItemProps) => void的语法，但是您可以在没有复制代码形式lib的情况下使用它。

因此，您可以用public handleItemClick来键入(arg1: Type1, arg2: Type2): Result { ...，而不是public handleItemClick: StrictMenuItemProps['onClick'] = (e, {name}) => setState。

TS会将函数的参数类型与参数匹配，因此e和name将不是any类型

Example

Answer 2

所以它本身的名称为string类型似乎不重要，整个对象的类型为MenuItemProps

因此，以下内容解决了该问题

  public handleItemClick = (
    e: React.MouseEvent<HTMLAnchorElement>,
    { name }: MenuItemProps
  ) => {
    this.setState({ activeItem: name! });
  };

从打字稿中的对象破坏属性

2 个答案: