Currently, I am delving into learning Svelte and specifically exploring how to bind to a component instance as demonstrated in this tutorial:
As I progress through the tutorial, I am attempting to convert it to Typescript.
However, I have encountered an error from the Typescript compiler (via ESLint).
Code
<!-- ./ComponentInstance.svelte -->
<script lang="ts">
import InputField from './Input.svelte';
// field represents the child component!
let field: InputField;
</script>
<!-- binding this component to a variable -->
<InputField bind:this={field} />
<!-- error arises here with field.focus() -->
<button on:click={() => field.focus()}> Focus field </button>
<!-- ./Input.svelte -->
<script lang="ts">
// Bound to the HTML input element.
let input: HTMLInputElement;
// Exporting a function as a property.
export function focus() {
// Focuses on the variable, thereby focusing the bound HTML element.
input.focus();
}
</script>
<!-- binding the element to a variable -->
<input bind:this={input} />
pq@pq:~/src/personal/gitlab/l
TS Error
./src/lib/bindings/ComponentInstance.svelte
12:25 error Unsafe return of an `any` typed value @typescript-eslint/no-unsafe-return
12:25 error Unsafe call of an `any` typed value @typescript-eslint/no-unsafe-call
I am struggling to figure out how to ensure TS compiles without errors in this scenario. Any assistance would be greatly appreciated.