Import Typescript modules in Svelte Component

Question

I have setup svelte-preprocess so I can do this successfully:

<script lang="typescript">
    let someConstant:string = "some constant";
    console.log({someConstant});
</script>

That works. But I don't know how to externalise that constant. If I try:

<script lang="typescript">
    import {someConstant} from './SomeTypescript.ts'
    console.log({someConstant});
</script>    

I get this error message:

error TS2691: An import path cannot end with a '.ts' extension. Consider importing './SomeTypescript' instead.

When I change it to

<script lang="typescript">
    import {someConstant} from './SomeTypescript'
    console.log({someConstant});
</script>

I get this error:

Error: Could not resolve './SomeTypescript' from src/tom/ManageAirtableModels.svelte

Whats the right way to do this?

Answer 1

Install the rollup plugin for typescript to handle non-svelte files:

yarn add -D @rollup/plugin-typescript typescript tslib

Add plugin-typescript to your plugins list in rollup.config.js:

//....
import autoProcess from 'svelte-preprocess'
import typescript from '@rollup/plugin-typescript'

export default {
  ...
  plugins: [
    typescript(),

    svelte({
      preprocess: autoProcess(),
      ...
    })
    ...
  ]
}

Now import won't require a .ts extension:

<script lang="typescript">
    import {someConstant} from './SomeTypescript'
    console.log({someConstant});
</script>