4 ms·

Another question, how are people actually using Typescript with Svelte? It seems like you can't use $some.prop = avalue, it can't be type checked, so wtf is th

Another question, how are people actually using Typescript with Svelte? It seems like you can't use $some.prop = avalue, it can't be type checked, so wtf is the point of using Typescript with Svelte?

IshKebab 5y ago
Damn I was hoping Svelte had proper Typescript support given that they claim that Svelte officially supports TypeScript. Is it just like Vue - it "supports" it, but there's still important stuff that's not type checked at compile time?
- marcus_cemes 5y ago
  Well, good news for you, it does! Very well, in fact. Svelte itself is written in TypeScript.
  - IshKebab 5y ago
    So is he wrong about not being able to type check that then?
    - marcus_cemes 5y ago
      Well, yes, to my understanding. If you add lang="ts" to the script block, you can write normal TypeScript code for the component logic, and it will also check props that you are passing to child components in the template. It's like renaming the file from ".jsx" to ".tsx". It might not be perfect, but I haven't encountered any problems with it so far.
- The_rationalist 5y ago
  Vue 3 is written in typescript and does type check props at both compile time and runtime.
  - IshKebab 5y ago
    Not very nicely: https://v3.vuejs.org/guide/typescript-support.html#annotating-props https://v3.vuejs.org/guide/typescript-support.html#annotatin... Does it type check templates yet?
    - The_rationalist 5y ago
      Nobody should still use the awful legacy vue component syntax, it is trivial and much cleaner to migrate to script setup components, which do provide properly type checked props easily https://v3.vuejs.org/api/sfc-script-setup.html#defineprops-and-defineemits https://v3.vuejs.org/api/sfc-script-setup.html#defineprops-a... https://v3.vuejs.org/api/sfc-script-setup.html#typescript-only-features https://v3.vuejs.org/api/sfc-script-setup.html#typescript-on... (although vue class component is still the best API of all VDOMs, it's unfortunate its development has stalled) Webstorm now properly supports template type checking too https://blog.jetbrains.com/webstorm/2021/11/webstorm-2021-3/#type_checking_for_vue_and_react_properties https://blog.jetbrains.com/webstorm/2021/11/webstorm-2021-3/...
      - IshKebab 5y ago
        Nobody should use the thing that the documentation tells you to use... Vue 3 looks a lot better than Vue 2 but honestly it's just playing catch up to React. I don't know why you'd choose it.
        marcus_cemes 5y ago
        It might interest you that Wikipeida chose Vue to modernise its frontend in the future [1]. Different frameworks offer different benefits and different downsides. React is not the end-all, nor will it ever be, as long as there are interesting new projects coming out, and neither is Vue or Svelte. My website uses React, but personally I would rather use Vue or Svelte in the future. [1]: https://phabricator.wikimedia.org/T241180 https://phabricator.wikimedia.org/T241180
        5y ago
marcus_cemes 5y ago
I'm not sure about "$some.prop = avalue", but props are declared as exports of your component [1], and they can be given types. Perhaps you're refering to "$$props"? The only time I've hacked into the component variables is to check whether slot is set. [1]: https://svelte.dev/tutorial/declaring-props https://svelte.dev/tutorial/declaring-props
ravenstine 5y ago
Having used Typescript with Svelte, I think that Typescript is still potentially useful, just not directly in `.svelte` files. There's nothing wrong with keeping all your business logic in separate `.ts` files and then importing them into your Svelte components, because those components can and often are primarily view logic, and the utility of having everything type-checked down to the template level is... not particularly significant IMO. If your Typescript modules are still type-checked and pass tests, then I find trying to make a Svelte project Typescript all the way down to be kind of paranoid. To each their own, but I think life's too short to be adding types to your view logic and your templates. It adds so much complexity for so little gain. Maybe it'll get better at some point where it will change my mind, in particular when using something like Deno.

Another question, how are people actually using Typescript with Svelte? It seems like you can't use $some.prop = avalue, it can't be type checked, so wtf is the point of using Typescript with Svelte?

IshKebab 5y ago

Damn I was hoping Svelte had proper Typescript support given that they claim that Svelte officially supports TypeScript. Is it just like Vue - it "supports" it, but there's still important stuff that's not type checked at compile time?

marcus_cemes 5y ago
Well, good news for you, it does! Very well, in fact. Svelte itself is written in TypeScript.
- IshKebab 5y ago
  So is he wrong about not being able to type check that then?
  - marcus_cemes 5y ago
    Well, yes, to my understanding. If you add lang="ts" to the script block, you can write normal TypeScript code for the component logic, and it will also check props that you are passing to child components in the template. It's like renaming the file from ".jsx" to ".tsx". It might not be perfect, but I haven't encountered any problems with it so far.
The_rationalist 5y ago
Vue 3 is written in typescript and does type check props at both compile time and runtime.
- IshKebab 5y ago
  Not very nicely: https://v3.vuejs.org/guide/typescript-support.html#annotating-props https://v3.vuejs.org/guide/typescript-support.html#annotatin... Does it type check templates yet?
  - The_rationalist 5y ago
    Nobody should still use the awful legacy vue component syntax, it is trivial and much cleaner to migrate to script setup components, which do provide properly type checked props easily https://v3.vuejs.org/api/sfc-script-setup.html#defineprops-and-defineemits https://v3.vuejs.org/api/sfc-script-setup.html#defineprops-a... https://v3.vuejs.org/api/sfc-script-setup.html#typescript-only-features https://v3.vuejs.org/api/sfc-script-setup.html#typescript-on... (although vue class component is still the best API of all VDOMs, it's unfortunate its development has stalled) Webstorm now properly supports template type checking too https://blog.jetbrains.com/webstorm/2021/11/webstorm-2021-3/#type_checking_for_vue_and_react_properties https://blog.jetbrains.com/webstorm/2021/11/webstorm-2021-3/...
    - IshKebab 5y ago
      Nobody should use the thing that the documentation tells you to use... Vue 3 looks a lot better than Vue 2 but honestly it's just playing catch up to React. I don't know why you'd choose it.
      - marcus_cemes 5y ago
        It might interest you that Wikipeida chose Vue to modernise its frontend in the future [1]. Different frameworks offer different benefits and different downsides. React is not the end-all, nor will it ever be, as long as there are interesting new projects coming out, and neither is Vue or Svelte. My website uses React, but personally I would rather use Vue or Svelte in the future. [1]: https://phabricator.wikimedia.org/T241180 https://phabricator.wikimedia.org/T241180
        5y ago

marcus_cemes 5y ago

I'm not sure about "$some.prop = avalue", but props are declared as exports of your component [1], and they can be given types. Perhaps you're refering to "$$props"? The only time I've hacked into the component variables is to check whether slot is set. [1]: https://svelte.dev/tutorial/declaring-props https://svelte.dev/tutorial/declaring-props

ravenstine 5y ago

Having used Typescript with Svelte, I think that Typescript is still potentially useful, just not directly in `.svelte` files. There's nothing wrong with keeping all your business logic in separate `.ts` files and then importing them into your Svelte components, because those components can and often are primarily view logic, and the utility of having everything type-checked down to the template level is... not particularly significant IMO. If your Typescript modules are still type-checked and pass tests, then I find trying to make a Svelte project Typescript all the way down to be kind of paranoid. To each their own, but I think life's too short to be adding types to your view logic and your templates. It adds so much complexity for so little gain. Maybe it'll get better at some point where it will change my mind, in particular when using something like Deno.