How to do type annotation in markup section

Question

Not sure if it's duplicate of svelte typescript typing in markup, but since that one is not answered, and my question is slightly different, I might try.

Svelte has await block that can await for a Promise and make the result available for the block. Suppose I fetch an object with type T from somewhere, then use T's field foo inside the block. Since there is no way to annotate that object with type T, npm check always complains that Error: Property 'foo' does not exist on type 'unknown'. (ts), though the code works perfectly.

If I write something like {#await my_fetch() then my_object: T}, the error becomes Error: Expected } (svelte). It doesn't matter if T is correctly imported or not, because this is syntax error.

I can't find a way to annotate type outside the <script> block at the top of the svelte file, but the linter complains about type missing in markup section anyways. Am I missing something?

In the worst case, I can just ignore these false alarms and move on, but if there's way to clear these up please let me know.

Answer 1

You cannot use TypeScript syntax in the template; that is a known limitation. To my knowledge there also is no way to ignore such errors, only Svelte warnings (e.g. about accessibility).

In this specific case you can wrap my_fetch() in another function in the <script> section to type the result correctly. (await correctly unwraps the type of the awaited Promise, so maybe something is wrong in the original function's typing of the Promise.)