Получение свойства типа не существует ошибка при использовании TypeScript - PullRequest
Новая
       11

Получение свойства типа не существует ошибка при использовании TypeScript

0 голосов
/ 30 сентября 2019

Я новичок в 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, похоже, не нравится. Я пытался добавить тип рядом с каждой реквизитом, но это тоже не решает проблему.

package.json 

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

Ответы [ 2 ]

1 голос
/ 30 сентября 2019

Вам нужно будет явно определить типы реквизита в сигнатуре функции, например, так: 

 export const Menu = 

({ openMenu, toggle, slidein }: { 
  openMenu: () => void;
  toggle: boolean;
  slidein: boolean;
}) => {

// rest of your code

}

export default Menu;

Еще лучше определить тип реквизита и передать определение этого типа в функцию: 

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

И передайте это в функцию: 

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

Удачного кодирования! ☺️

1 голос
/ 30 сентября 2019

FunctionComponent принимает параметр общего типа P, который обозначает тип вашего реквизита, используемый в компоненте 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 }) => {...}
...