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
Collapse
 
tezine profile image
Bruno Tezine •

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?

Collapse
 
roeland profile image
Roeland •

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)

Collapse
 
j05j4 profile image
Josja Heerema • • Edited

You might want to do a

npm install

or

yarn
Collapse
 
dirkwolthuis profile image
Dirk H. Wolthuis •

Same here!

Collapse
 
justinmoon profile image
Justin Moon •

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 ...

Collapse
 
j05j4 profile image
Josja Heerema • • 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>
Collapse
 
mhaecker profile image
Markus Häcker •

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!"
Collapse
 
kanmii profile image
Adekanmi Ademiiju • • 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?

Collapse
 
renyuanz profile image
Renyuan Zou • • 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
Enter fullscreen mode Exit fullscreen mode

and run node scripts/setupTypeScriptRollup.js

Collapse
 
mudlabs profile image
Sam •

For me it was setupTypeScript.js

Collapse
 
cmelgarejo profile image
Christian Melgarejo •

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

Thanks for this little how-to!

*(Häcker without the umlaut-)