I'm currently working on a VueJS-2 component with the following HTML template:
<template>
<div>
<v-data-table
:headers="headers"
:items="items"
:caption="label"
dense
hide-default-footer
hide-default-header
>
<template v-slot:item.name="props">
<MiniTextField
:value="props.item.name"
dense
single-line
hide-details
prepend-icon="mdi-account"
@change="(newValue) => crewEntryUpdated(newValue, props)"
></MiniTextField>
</template>
</v-data-table>
</div>
</template>
An issue arises with this line of code:
@change="(newValue) => crewEntryUpdated(newValue, props)"
The error message received is:
src/components/CrewTable.vue:18:21 - error TS7006: Parameter 'newValue' implicitly has an 'any' type.
18 @change="(newValue) => crewEntryUpdated(newValue, props)"
~~~~~~~~
Attempts to add a type hint to the function lead to syntax errors and compilation failures. This approach is invalid, resulting in:
7:54:44 AM [vite] Internal server error: Unexpected token, expected "," (1:395)
Plugin: vite:vue2
File: /workspaces/frontend/src/components/CrewTable.vue:1:395
16 | hide-details
17 | prepend-icon="mdi-account"
18 | @change="(newValue: string) => crewEntryUpdated(newValue, props)"
| ^
19 | ></MiniTextField>
20 | </template>
Even converting it to a multi-line code block results in the event handler not functioning as expected without any explicit errors from TypeScript. The code modification attempted was:
@change="
// @ts-ignore
(newValue) => crewEntryUpdated(newValue, props)
"
Ignoring the entire file isn't desirable, so what adjustments can be made to comply with TypeScript's requirements?