I’m having trouble with converting F7-React to Typescript.
Here is my App structure, and everything is working here:
...
import { App, View } from "framework7-react";
import { Framework7Parameters } from 'framework7/types';
export default function () {
// Framework7 parameters here
const f7params: Framework7Parameters = {
id: "io.framework7.testapp", // App bundle ID
name: "testapp", // App name
theme: "auto", // Automatic theme detection
// App routes
routes,
};
return (
<StateProvider initialState={store} reducer={appReducer}>
<App {...f7params}>
<View id="main-view" url="/home/" main className="safe-areas" />
</App>
</StateProvider>
);
}
But when I’m trying to make Home Page to work is giving me an error on Page:
export default function HomePage(params: any) {
const [store, dispatch] = useStateValue();
return (
<Page name="home" themeDark>
<Test />
</Page>
);
}
The error says:
Type ‘{ children: Element; name: string; themeDark: true; }’ is not assignable to type ‘IntrinsicAttributes & PageProps’.
Property ‘children’ does not exist on type ‘IntrinsicAttributes & PageProps’.ts(2322)
Again, I’m still new to Typescript, not sure if this is a problem with the version that I’m using, but currently the versions are:
{
"framework7": "^6.0.0",
"framework7-icons": "^5.0.5",
"framework7-react": "^6.0.0",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
}