уничтожить атрибут из объекта в машинописи - PullRequest
Новая
       42

уничтожить атрибут из объекта в машинописи

0 голосов
/ 06 марта 2019

В моем приложении реагирования с машинописью я использую semantic-ui-react для пользовательского интерфейса.это snabdobx показывает использование Menu.Item в javascript, но я хочу использовать его в машинописи и запутался. 

<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

Ответы [ 2 ]

2 голосов
/ 06 марта 2019

печатание как это означает ({ name }), что аргумент name имеет тип any, поэтому он не выдаст ошибку.

для передачи строки, например, "messages" в handleItemClick, вы должны сделать что-то вродеthis: 

 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 уже набрана @types lib в StrictMenuItemProps интерфейсе.Чтобы получить 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 type

Example

0 голосов
/ 06 марта 2019

так что, кажется, не имеет значения, что само имя имеет тип string весь объект имеет тип MenuItemProps

поэтому следующее решило проблему 

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