Svelte with Typescript. Make it possible with Webpack.

Sometimes I find it hard to guess what exactly does the variable in my code hold and how can I interact with it. What is it, a number or a string? Or is it an object?

If it is an object then where can I see the available properties of it?

If you ask yourself these questions as well then you could consider adding Typescript to your codebase.

If you haven’t heard of Typescript before, I recommend you to check the official website before reading the article. Especially you might want to check this nice introduction to Typescript on its website called Typescript in 5 minutes.

So how to make Svelte work with Typescript?

In short, you can make it possible by using Webpack’s “svelte-loader” and an npm package called “svelte-preprocess”.

Let’s dive into this topic a bit deeper.

If you are curious to see the resulting code of the app, you can check it in my Github repository here.

Use Webpack to make all the dirty work

If this is the first time you hear about Webpack than it might be useful to read about why you might want to use it on the official website.

// webpack.config.js

const path = require('path')

module.exports = {
  entry: './main.js',
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'build'),
  },
}

This is the initial config that we will grow a bit later. To be able to use this config you should install a few dependencies.

npm install webpack webpack-cli --save-dev

Let’s leave it as it is, for now, it doesn’t do much, but we will make it highly functional soon.

Svelte-preprocess is king

// webpack.config.js

const path = require('path')

module.exports = {
  entry: './main.js',
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.(html|svelte)$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
            preprocess: require('svelte-preprocess')({})
          },
        },
      },
    ],
  },
}

This is the final Webpack config that would help you to use Typescript in Svelte components.

Let’s break it down.

npm install svelte-loader svelte-preprocess --save-dev

svelte-loader helps you to import .svelte components to your bundle and compiles it to vanilla Javascript that can be used in browsers.

You might want to check some additional information about it in it’s Github repository, for example how to serve CSS separately from Javascript to improve performance or how to enable Hot Reloading that no one can live without nowadays as it seems. Check it if you are interested.

svelte-preprocess helps you with converting specific code blocks e.g. <script lang="typescript">const name: string = ''</script> to vanilla Javascript.

If you are interested in how exactly svelte-preprocess works you could check this section in Svelte’s documentation. After reading it you would be able even to create your own preprocessors.

Also, you should definitely check svelte-preprocess Github repository. Especially typescript limitations and suggestions about performance optimization for big applications.

Take a couple of minutes to check the code for this app in my Github repository. I kept it incredibly simple so you could easily navigate through the files and enjoy your investigation.

Let me finally see how Svelte works with Typescript

// App.svelte

<script lang="typescript">
    export let name: string = ''
</script>

<div>
    Hello from {name} component!
</div>

Don’t forget to install typescript and svelte packages before building your application.

npm install typescript svelte --save-dev
webpack --config webpack.config.js

If for some reasons your static types checking failed you’ll see an error in the console that would look similar to this:

Done, Typescript is integrated to this tiny Svelte application.

Conclusion

In this article, we’ve learned and covered the basics of how to set up a Svelte app with Typescript. And made our attempt to dig a bit and understand what exactly does the tools do.

The technical stack used:

  • webpack
  • svelte-loader
  • svelte-preprocess

In my opinion, Typescript can be an overhead for small applications like this one we’ve seen.

You would spend more time setting it up than using it.

But if you have a team working on the same project from medium to big size than I believe that you would greatly benefit from using Typescript.

Consider using it in your next pet project if you haven’t done it before. I’m sure it would be a fun and important experience. Would it?

If you are interested in Svelte topic you might want to check one of my previous articles Introduction to Svelte SSR or First look at Svelte.

Contact me at letconstportal@gmail.com to share your feedback about the article, ask your questions, and suggest the next topics if you want to see them highlighted on letconst.