Блог

Я знаю, что этот вопрос задавался несколько раз, но я думаю, что моя проблема в другом. Я не собираюсь изучать , как реализовать a HOC , я уже сделал это (хотя еще не тестировал:)), моя проблема в его использовании.

Ниже приведен мой специальный

 const withBaseFunctionality =
<T extends BaseModel, P extends BaseProps<T>>(
WrappedComponent: FunctionComponent<P>
) =>
(props: P) => {
//States
const [page, setPage] = useState(1);

//Update props
const updatedProps = produce(props, (draftProps) => {
  draftProps.handlePageChange = handlePageChange;
  draftProps.fetchItems = fetchItems;
  draftProps.handleCreateItem = handleCreateItem;
  draftProps.handleUpdateItem = handleUpdateItem;
  draftProps.handleDeleteItem = handleDeleteItem;
});

//API
const fetchItems = useItems(props.subPath, page - 1);
//Handles all the create logic
const handleCreateItem = (item: T) => {};

//Handles all the update logic
const handleUpdateItem = (item: T) => {};

//Handles all the delete logic
const handleDeleteItem = (item: T) => {};

//Handles page changes
const handlePageChange = (page: number) => setPage(page);

return <WrappedComponent {...updatedProps} />;
};
 

экспорт по умолчанию с базовой функциональностью;

и как я пытаюсь его использовать

 interface TestModel extends BaseModel{
name: string;
acronym: string;   
}


interface TestProps extends BaseProps<TestModel>{


}


const TestPage: FunctionComponent<TestProps>  = ({}) => {


return<></>;

}

export default withBaseFunctionality(TestPage);
 

Я получаю ошибку ниже в этой строке export default withBaseFunctionality(TestPage);

 Argument of type 'FunctionComponent<TestProps>' is not assignable to parameter of type 
'FunctionComponent<BaseProps<BaseModel>>'.
Types of property 'propTypes' are incompatible.
Type 'WeakValidationMap<TestProps> | undefined' is not assignable to type 
'WeakValidationMap<BaseProps<BaseModel>> | undefined'.
  Type 'WeakValidationMap<TestProps>' is not assignable to type 
'WeakValidationMap<BaseProps<BaseModel>>'.
    Types of property 'handleCreateItem' are incompatible.
      Type 'Validator<(item: TestModel) => void> | undefined' is not assignable to type 
'Validator<(item: BaseModel) => void> | undefined'.
        Type 'Validator<(item: TestModel) => void>' is not assignable to type 
'Validator<(item: BaseModel) => void>'.
          Type '(item: TestModel) => void' is not assignable to type '(item: BaseModel) => 
 void'.ts(2345)
 

Пожалуйста , обратите внимание, что я не очень хорош в Typescript or JS этом, я использую свои Java знания.

Я переосмыслил приложение, все, что мне нужно было сделать, это создать тестовую страницу, подобную этой const TestPage = ({fetchItems}: TestProps) => { , и все ошибки исчезли, фактически, даже логика в HOC работе.