In my project I am using RadListView component for listing out some items and based on their documentation I made this implementation of it:
<page>
<actionBar title="Goals" />
<gridLayout rows="auto, *" backgroundColor="#3c495e">
<gridLayout row={0} columns="*,auto" class="add-bar">
<textField col={0} hint="Type new task..." bind:text={newGoal} bind:this={newGoalInput} />
<button col={1} text="Add New Goal" on:tap={handleAddNewGoal} />
</gridLayout>
<radListView items={courseGoals} row={1} on:itemSwipeProgressStarted={onSwipeCellStarted}
swipeActions={true} transition:fade={{duration: 1000 }} >
<Template type={ListViewViewType.ItemView} let:item>
<label class="p-15" text="{ item }" />
</Template>
<Template type={ListViewViewType.ItemSwipeView}>
<gridLayout columns="*,auto">
<stackLayout id="delete-view" col={1} on:tap={handleGoalDelete} class="delete-view">
<image src="~/assets/delete.png" />
</stackLayout>
</gridLayout>
</Template>
</radListView>
</gridLayout>
</page>
The function that is being called looks this way:
const onSwipeCellStarted = (args: any) => {
const deleteButtonWidth = args.object.getViewById('delete-view').getMeasuredWidth();
args.data.swipeLimits.right = deleteButtonWidth;
args.data.swipeLimits.threshold = deleteButtonWidth / 2;
}
Everything is working fine but there is a TypeScript error being thrown for the on:itemSwipeProgressStarted like so:
No overload matches this call.
Overload 1 of 4, '(element: "radListView" | null | undefined, attrs: RadListViewAttributes): any', gave the following error.
Argument of type '{ items: string[]; row: number; "on:itemSwipeProgressStarted": (args: any) => void; swipeActions: true; }' is not assignable to parameter of type 'TRadListViewAttributes'.
Object literal may only specify known properties, and '"on:itemSwipeProgressStarted"' does not exist in type 'TRadListViewAttributes'.
Overload 2 of 4, '(element: "radListView" | null | undefined, attrs: RadListViewAttributes): any', gave the following error.
Argument of type '{ items: string[]; row: number; "on:itemSwipeProgressStarted": (args: any) => void; swipeActions: true; }' is not assignable to parameter of type 'TRadListViewAttributes'.
Object literal may only specify known properties, and '"on:itemSwipeProgressStarted"' does not exist in type 'TRadListViewAttributes'.ts(2769)
Based on Svelte documentation I've created additional-svelte-typings.d.ts file in types folder which is in the root of the project and it's content looks like this:
declare namespace svelteHTML {
// enhance attributes
interface HTMLAttributes<T> {
// If you want to use on:beforeinstallprompt
'on:itemSwipeProgressStarted'?: (args: any) => any;
}
interface TRadListViewAttributes<T> {
// If you want to use on:beforeinstallprompt
'on:itemSwipeProgressStarted'?: (args: any) => any;
}
}
My tsconfig.json file looks like so:
{
"compilerOptions": {
"strict": true,
"target": "ES2020",
"module": "esnext",
"moduleResolution": "node",
"lib": ["dom", "ESNext"],
"sourceMap": true,
"noEmitHelpers": true,
"importHelpers": true,
"baseUrl": ".",
"paths": {
"~/*": ["app/*"],
"@/*": ["app/*"]
},
"typeRoots": ["node_modules/@types", "types"],
"types": ["node"],
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipLibCheck": true
},
"include": ["app", "types"],
"exclude": ["node_modules", "platforms"]
}
After all this the error still persists. How can I get rid of the error? Thanks.
