Home > OS >  How to do type annotation in markup section
How to do type annotation in markup section

Time:07-26

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.

CodePudding user response:

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.)

  • Related