Svelte: Clear (Current) TypeScript Support

Created on 26 Dec 2019  路  11Comments  路  Source: sveltejs/svelte

Is your feature request related to a problem? Please describe.
As a user of Svelte, I cannot easily integrate TypeScript, even though the technology exists.

Describe the solution you'd like
I was able to find a working (as of 12/19) template after A LOT of googling: https://github.com/pyoner/svelte-typescript/tree/master/packages/template. I would like to see information for this in Svelte documentation. The solution probably is a little rough, but using this template, and VSCode with svelte extensions gives me full editor support.

Describe alternatives you've considered
Currently, searching for TS support leads to an open issue about official support of the language, which I found confusing. SO answers were only somewhat helpful.

How important is this feature to you?
Now that I got it working... not that important, but for other devs searching for TS support in Svelte, this is probably the answer they are looking for to start building something with Svelte.

Additional context
N/A

question

Most helpful comment

Does it sound easier to maintain a reliable language server for svelte?

All 11 comments

to be clear, we mean two things when we talk about typescript support - support in <script> tags, and support in <template>. the former is solved with preprocessors, the latter isn't solved yet (mostly due to lack of time for working on it) - you're welcome to try!

as for documenting TS support in script tags, thats something that is ideal for the Recipes section of the community site.

@sw-yx I think there was a typo in your response. What is the 2nd thing we mean regarding typescript?

edited - i wrote <template>, github markdown swallowed it

can we consider some alternative api which will have typescript support out of the box.
for instance, we can add something like script template which should have definition for render function.

<script>
let i =0;
</script>
<script template>
let render =()=>(<div onClick={i=>i++}>
{i}
</div>)
</script>

It complicates some ast anylisys but on the other handl you don't need to write own language server to make it type safe.
@sw-yx what do you think?

Though more about this approach and got some more ideas for api.
Here we use jsx tag on script.

<script jsx>
let i = 0;
render: <div onClick={i=>i++}> {i} </div>
</script>

Here we're using $ notation for template values.

<script>
let i =0;
</script>
<script template>
$:(<div onClick={i=>i++}>counter:{i}</div>)
// we can have multiple elements
$:(<span onClick={i=>i++}>click me</span>)
</script>

Obviously, this apporach will have less optimizations than template based approach but I think it makes sense to invest more in this approach rather than in language server for templates.

i simply dont think this is what svelte wants to do, the maintainers have been very clear about why we use the html-like template syntax.

vue has proven the language server approach can work.

@sw-yx It can work with a huge amount of time investments, same for angular language server, it took them almost 1 year to give decent DX and it still not ideal, even with the fulltime team working on that.
I think it's possible to achieve typescript support just by simply allowing to write your own component renderers within a dedicated block of code.

There isn't any realistic chance of us supporting a second syntax that is limited to just typescript users and will deliver a watered-down version of svelte.

Does it sound easier to maintain a reliable language server for svelte?

Does it sound easier to maintain a reliable language server for svelte?

Having no experience with these things, could you explain why that is so difficult?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

angelozehr picture angelozehr  路  3Comments

davidcallanan picture davidcallanan  路  3Comments

juniorsd picture juniorsd  路  3Comments

st-schneider picture st-schneider  路  3Comments

robnagler picture robnagler  路  3Comments