Setup a Svelte Project With Typescript Support

Ivan Molina Rebolledo
- 1 min read
Setup a Svelte Project With Typescript Support

Abstract

Fast guide to begin a project in Svelte using Typescript. This is mostly a guide to myself because I'm so stupid that it's probably that I will forgot all of this in a while.


I'm writing this in hope that it'll be a useful guide to start a project in Svelte using Typescript. This is more of a Svelte-begginer-oriented tutorial and it involves my experience trying to get this combination working (the last time I ran into some problems). Maybe this post will help me (or someone else) in the future. 💁🏼‍♀️

Install NodeJS

I recommend nvm (works in Mac/Ubuntu 🤷🏼‍♀️), so

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

then

nvm install --lts

If you are using macOS, probably zsh is your default sh. If the nvm command is not working, you can try to add the following to the end of your .zshrc file

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

Svelte

npx degit sveltejs/template my-svelte-project

It's just that.

We need to enable Typescript support before we start working:

cd my-svelte-project
node scripts/setupTypeScript.js

Now we can work with our project:

npm install
npm run dev

It's not really that difficult, just follow the previous steps (in that order) and you will be fine. For some stupid decision made by my dumb self, the first time I tried to setup with Typescript the whole process didn't work.

And that's all. Have a great coding! ❤️