DEV Community


Discussion on: Svelte is the most beautiful web framework I've ever seen

stevealee profile image

Well given TS will perform Type inference and checking on JS (esp good in VSCode) it kinda does have TS support :) but I know what you mean. You could always create some typings.

Thread Thread
cubiclebuddha profile image
Cubicle Buddha

Creating typings is a whole lot of work when the creators of Svelte could have provided native TypeScript functionality. I mean it’s rather strange since Svelte itself is written in TS. But these are the negatives of the approaching you’re recommending:

  • manually created typings often fall out of sync with the code. So the consumers of your components have code they think is working but it doesn’t actually work.
  • JS-check only checks each file independently of each other (I believe), so you don’t get awareness of the type relationships between your entire app
  • JS-check in an HTML file currently loses a lot of the power you get from TSX because you TSX will tell you if you’ve wired up your HTML properly. As where in Svelte and Vue you don’t have a CLI that will tell you that while your script section is correct... you forgot to pass any props to the Svelte component.

So refactoring becomes challenging because you don’t have he machine to tell you when your modification of the code impacts other code. This ultimately leads to the feeling that you shouldn’t ever refactor because it couple break too many things.

Compare that to working in React + TypeScript. I can refactor anything I want and have confidence that the entire website will still work. I don’t have to worry that renaming a variable in one file will break a distantly related page of the site. It’s that type relationship between pages that Svelte is missing.

Thread Thread
stevealee profile image

Sorry, I dropped the Smiley from my reply :( Typing are definitely a hack, and a 3rd party one at that. I've often hit the sync thing myself.

I agree that if Svelte is itself Written in TS then wit hsome attndtion to details it should provide 1st class TS support. I wonder what the issues are?

I've not used TSX but from what you say it adds a level of utility (I assume as it compiles down to TS, jike JSX does to JS).

Thread Thread
cubiclebuddha profile image
Cubicle Buddha • Edited

Yup, TSX is super helpful.

Let's say you have loginComponent.tsx that defines the following component:

export const LoginButton = (props: {userId: string}): JSX.Element => {
   // ... do something with props.userId and then load the page

You can then have a main component (typically called App.tsx) like this:

    Hello! Welcome! Click this button to Login
    <LoginButton userId={userId} />

And if you forgot to pass userId in App.tsx then the compiler would let you know that you made a mistake. If someone later refactors LoginButton to add another mandatory property, then the compiler will let you know that you forgot to circle back to App.tsx.

Thread Thread
stevealee profile image

Nice. Better to use the language than the react specifc prop checks IMHO