Unsafe member access in templates
I have enabled type-aware linting rules as per the README (which I think is the reason people are using typescript in the first place) and everything works except in a few places.
I have seen the caveats about stores and reactive assignments, and maybe this is what I'm running into.
With a completely fresh project, and the changes for type-aware linting, this fails:
<input
type="checkbox"
on:change={(e) => {
if (e.currentTarget.checked) {
console.log('checked');
} else {
console.log('unchecked');
}
}}
/>
with Unsafe member access .currentTarget on an any value..
It's interesting because the type of e seems to be recognised properly:
What's even more interesting, is that it's possible to destructure the argument like this:
<!-- this works -->
<input
type="checkbox"
on:change={({ currentTarget: { checked } }) => {
if (checked) {
console.log('checked');
} else {
console.log('unchecked');
}
}}
/>
- Is it recommended to do this way?
- Will this be fixed at some point or is this a svelte / eslint limitation?
- Is there another way to solve this apart from creating a function in the
<script>block?
Additionally I'm running into the issue here, where I don't see a solution other than creating a typescript function:
{#each submission.files as file}
{file.originalFilename.split('.').pop()}
{/each}
This fails as well for file.originalFilename.split with:
Unsafe member access .split on an any value.
Maybe a similar issue with the following situation:
<script lang="ts">
interface Book {
title: string;
}
const books: Book[] = [ { title: 'MyBook' } ];
</script>
{#each books as book}
{$_(book.title)}
{/each}
_ requires string | MessageObject and therefore this line produces the following error:
Unsafe argument of type
anyassigned to a parameter of typestring | MessageObject. eslint@typescript-eslint/no-unsafe-argument
We're having the same issue. It seems type inference is broken inside #{each} blocks.