Create a new Svelte project with TypeScript support

Tomasz Łakomy: [0:00] Svelte has added support for TypeScript. In order to create a new project with TypeScript enabled, go ahead and run npx degit sveltejs/template and pass in the name of our project. I'm going to do my-svelte-plus-typescript-project.

[0:15] Next, go to the project directory and we can see that the entire Svelte project has been created for us. In order to have a TypeScript set up in this project, run node scripts/setupTypeScript.js. That's it. Now our project has been successfully converted to TypeScript.

[0:30] Let's open up Visual Studio Code to see what we got. As soon as we launch, we can see that this workplace has some extension recommendations. If I click over here, we're going to see the new official Svelte language support for Visual Studio Code. Let me go ahead and install it.

[0:43] Also, open up the terminal and run yarn or npm install in order to install all the dependencies of this project. After we have our node_modules in place, let's go ahead and run yarn dev in order to start up our project. This is the default Hello World Svelte application with the difference that now, it supports TypeScript.

[1:02] We do get a tsconfig.json, which extends a default svelte/tsconfig. After we open our App.svelte file, we're going to notice that right now, the script tag has a lang = "ts," which means that this script is written in TypeScript.

[1:18] After I collapsed those styles for better visibility, we can see that if I hover over this name is going to tell us that this name is of type string because this is exactly what we have defined over here. If I change it to number, this is going to tell us that name is supposed to be a number, which doesn't make sense. I'm going to revert it back.

[1:34] In order to highlight some other features of TypeScript support instead, I'm going to create a new component. I'm going to call it UserData.svelte and I'm going to start by creating a new script tag. I'm going to set the lang = "ts." Inside of it, I'm going to export let name, which is going to be of type string and I'm going to export let surname, which is also going to be a string.

[1:55] Right now, it's complaining that I'm not using them, so let me render some markup. I'm going to do section. Inside of it, I'm going to have an h1 with a text "My name is {name}." Same for the surname, so I'm going to do "My surname is {surname}.

[2:08] Let me quickly add some style, so I'm going to do style, h1 { color: blue; } Now, we can use this component. If I go back to the original App.svelte, I can import UserData from "./UserData.svelte."

[2:22] Let me add that over here. I'm going to do UserData. I'm going to set the name to be equal to Tomasz and I'm going to also set the surname to be equal to my surname. We can also see that TypeScript is telling us that the surname is supposed to be of type string, so I can just do it like this, Łakomy.

[2:38] We can see the results over here. The TypeScript code has been successfully transpired to JavaScript. As soon as we introduce some issue with our types, so for instance, if I were to go to UserData.svelte and change the surname to be of type number, after I go back to our App.svelte, I will be informed that we have a problem because the surname is a string, which cannot be assigned to a number.

[3:01] Going through the entire codebase file by file, looking for TypeScript issues would be incredibly time-consuming. Luckily, that's about the work. In our terminal, we can run npx svelte-check in order to check the code base for any type-related issues. It is going to detect this issue that we have over here. That string cannot be assigned to a number.

[3:20] Let me go back to UserData.svelte and fix it. Surname is going to be of type string. After I go back and run this command again, I will be informed that svelte-check has found no issues with this code when it comes to types. I can go ahead and push this to production.