DEV Community

Use TypeScript with Svelte / Sapper

Markus Häcker on March 23, 2020

EDIT 2020-07-24: Svelte now officially supports TypeScript It only takes a few steps to use TypeScript in your .svelte files within <script ...

Read full post

Bruno Tezine • May 16 '20

Thank you for the tutorial Markus!
I tried to use it, but it gives the error below:

Error: Cannot find module 'C:\sapper-with-ts-sample_sapper_\dev\server\server.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
at Function.Module._load (internal/modules/cjs/loader.js:840:27)
at Function.executeUserEntryPoint as runMain
at internal/main/run_main_module.js:18:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []

Any ideas?

Roeland • Jun 2 '20

Make sure you have

input: config.server.input().server.replace(/\.js$/, ".ts"),

and not

input: config.client.input().server.replace(/\.js$/, ".ts"),

for the server
(I had the same error after copy/paste)

Josja Heerema • May 23 '20 • Edited

You might want to do a

npm install

yarn

Dirk H. Wolthuis • May 19 '20

Same here!

Renyuan Zou • Sep 27 '20 • Edited

The default template repo now provides a script that helps you to convert the project to Typescript.

Just clone the template project

# for Rollup
npx degit "sveltejs/sapper-template#rollup" my-app
# for webpack
npx degit "sveltejs/sapper-template#webpack" my-app

cd my-app

and run node scripts/setupTypeScriptRollup.js

Sam • Nov 2 '20

For me it was setupTypeScript.js

Justin Moon • Apr 10 '20

Is it possible to move the hello variable declaration to another typescript file?

I tried putting this in src/hello.ts:

export let title: string = "Hello, Typescript!"

But importing from index.svelte:

import { title } from "../hello"

Produces an error:

Could not resolve '../hello' from src/routes/index.svelte

But it works fine if I don't use .ts file ...

Markus Häcker • Apr 13 '20

What you can do if you want to write your TypeScript code to an extra file:

Add this to your index.svelte:

<script src="src/hello.ts">
</script>

And in your src/hello.ts:

export let title = "Hello, Typescript!"

Adekanmi Ademiiju • Jun 20 '20 • Edited

Hi Markus,
It did not work for me. I keep getting:

• client
/home/kanmii/projects/sapper-with-ts-sample/src/routes/index.svelte
'title' is not defined
38:
39: <svelte:head>
40:   <title>{title}</title>
              ^
41: </svelte:head>
42:
• server
/home/kanmii/projects/sapper-with-ts-sample/src/routes/index.svelte
'title' is not defined
38:
39: <svelte:head>
40:   <title>{title}</title>
              ^
41: </svelte:head>

Do you have a github repo I can clone demonstrating how to use typescript with svelte?

Josja Heerema • May 23 '20 • Edited

You can create a src/components/hello.ts file

export default "Hello dev";

And import it in src/routes/index.svelte with

<script>
    import title from '../components/title.ts';
</script>

Or in src/components/hello.ts:

export const title: string = "Hello developer";

with in src/routes/index.svelte:

<script>
    import {title} from '../components/title.ts';
</script>

Christian Melgarejo • May 14 '20

You did had to go and make honor to your namesake* :D

Thanks for this little how-to!

*(Häcker without the umlaut-)