[TypeScript] cannot specify param type on arrow functions passed as parameters from markup

[opensas]

Describe the bug

cannot specify param type on arrow functions passed as parameters

e.g.:

  <MoreActions {todos} on:checkAll={e => checkAllTodos(e.detail)} />

gives the following ts warning:

Property 'detail' does not exist on type 'Event'.ts(2339)

If I try to specify e to be a CustomEvent like this:

  <MoreActions {todos} on:checkAll={e: CustomEvent => checkAllTodos(e.detail)} />

gives the following ts error:

[!] (plugin svelte) ParseError: Expected }
src/components/Todos.svelte
80:   <!-- on:checkAll={checkAllHandler} -->
81:   <MoreActions {todos}
82:     on:checkAll={e: CustomEvent => checkAllTodos(e.detail)}
                      ^
83:     on:removeCompleted={removeCompletedTodos}
84:   />
ParseError: Expected }

Also tried with

  <MoreActions {todos} on:checkAll={(e: CustomEvent) => { checkAllTodos(e.detail)} />

and

  <MoreActions {todos} on:checkAll={(e: CustomEvent) => { return checkAllTodos(e.detail)} />

both returning

[!] (plugin svelte) ParseError: Unexpected token
src/components/Todos.svelte
80:   <!-- on:checkAll={checkAllHandler} -->
81:   <MoreActions {todos}
82:     on:checkAll={(e: CustomEvent) => checkAllTodos(e.detail)}
                       ^
83:     on:removeCompleted={removeCompletedTodos}
84:   />
ParseError: Unexpected token

On the other hand, this works ok:

<script>
  const checkAllHandler = (e: CustomEvent) => checkAllTodos(e.detail)
</script>
[...]
  <MoreActions {todos} on:checkAll={checkAllHandler}

To Reproduce

create a ts svelte project with:

npx degit orta/template#ts
node scripts/setupTypeScript.js

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

System (please complete the following information):

• OS: Linux xps 5.0.0-1064-oem-osp1 Set the languageId to svelte #69-Ubuntu
• IDE: vscode
• Plugin/Package: [e.g. "Svelte for VSCode", or svelte-language-server, svelte-check, or svelte2tsx if you use one of the npm packages directly] (not sure which one)

Additional context
Add any other context about the problem here.

[jasonlyu123]

This is the expected behavior for now.

About the typescript error, we don't know the type of the event. When it's a forwarded native event it won't have the detail property, it only exists on CustomEvent. So it must manually casted.

Second, because the svelte preprocess API constrains, typescript in the template is not supported now.

[halfnelson]

I think it is worth having detail? available on the event. We should update the JSX event types to have detail?: unknown so that CustomEvent typed handlers will work

[jasonlyu123]

I am trying to type-check the forwarded DOM event in #303. Once it's possible, all unknow event can be changed to CutomEvent. But as you said. we can temporarily add detail to the type.

[opensas]

+1 for adding a detail? in the meantime

and I hope that ts in markup could be solved in the near future, it feels like a gap in ts support.

I think that at least it should be clearly documented when we officially launch ts support. (I would consider addign the documentation tag to this issue)

I had several handlers of the form on:myEvent={ e => myHandler(e.detail) } and instead of just issuing on:myEvent={ (e: CustomEvent) => myHandler(e.detail) } I had to refactor them to :

  const myHandler = (e: CustomEvent<string>) => {
    const { detail: myParam } = e
   [...]
    todos = todos.map(t => ({...t, completed}))
    $alert = `${completed ? 'Checked' : 'Unchecked'} ${todos.length} todos`
  }

<MyComponent on:myEvent={myHandler} />

Basically moving the cast our of the markup.

Perhaps, for the time being, we could add some recipes for working with ts codebases...

Note: I just saw you've already commited a temporary fix (WOW, that is REALLY fast! congrats). How can I try it? I guess svelte2tsc is used by svelte preprocess, right?

[jasonlyu123]

Typescript in the template is an upstream problem. Tracked here sveltejs/svelte#4701. I don't think it is coming soon.

[jasonlyu123]

No, svelte2tsx is used in the IDE level not build.

[dummdidumm]

The fact that you cannot use typescript inside template/markup is documented here

[opensas]

@dummdidumm thanks a lot! somehow I missed this page, it's got really useful tips

[dummdidumm]

Fixed through #303