24

Svelte ultimately outputs native JavaScript classes. So, TypeScript could understand these. However, Svelte components have to first be compiled from their initial .html form. Until then, understandably, TypeScript by default does not understand them in their initial form. So, it reports a 'cannot find module' error, even though at runtime the import is successful. Is there any way to make TypeScript understand them?

One workaround would be to provide type definitions for .html modules, approximating the standard Svelte component interface. However, it would be much more desirable to simply use the real component class output itself for each individual component, yielding the most accurate type information.

As an aside, I have not mentioned tools like Webpack or Rollup which perform the compilation step for Svelte normally. I do not know whether these tools would be relevant to this question.

Update 1: I've looked a little further into TypeScript and it seems that plugins can be created for it. However, they seem limited, so may not be useful.

Update 2: There has also been some talk (here and here) about custom module loaders in TypeScript.

Improve this question

2 Answers 2

Reset to default
18

Yes. Use rollup-plugin-svelte and rollup-plugin-typescript and it should work. I am using it in a rollup file now that looks as follows:

import commonjs from 'rollup-plugin-commonjs'
import replace from 'rollup-plugin-replace'
import resolve from 'rollup-plugin-node-resolve'
import svelte from 'rollup-plugin-svelte'
import typescript from 'rollup-plugin-typescript'

const path = require('path')
const fs = require('fs')

export default {
  input: 'src/index.ts',
  plugins: [
    typescript(),
    commonjs({
      include: 'node_modules/**'
    }),
    resolve({
      browser: true,
      preferBuiltins: false // for url npm module; otherwise rollup assumes node
    }),
    // Replace is to shut up redux
    replace({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    svelte({
      // By default, all .html and .svelte files are compiled
      extensions: ['.my-custom-extension', '.html', '.svelte'],

      // You can restrict which files are compiled
      // using `include` and `exclude`
      // include: 'src/components/**/*.html',

      // By default, the client-side compiler is used. You
      // can also use the server-side rendering compiler
      // generate: 'ssr',

      // Extract CSS into a separate file (recommended).
      css: function (css) {
        fs.writeFileSync('./dist/svelte.css', css)
      }
    })
  ],
  output: {
    format: 'iife',
    file: path.join(__dirname, './dist/index_dist.js') // equivalent to --output
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Thanks for your response. With this approach, you receive no errors in the TypeScript compiler? I attempted something similar with Webpack, but then realised that the output is to a single file and is therefore invisible to the TypeScript compiler. The problem remains that we are importing a HTML file which always remains a HTML file, which TypeScript always doesn't understand (besides static type definitions).
I do not have any errors. A couple of factors here - Remember that the way that svelte works is it turns the HTML into pure JavaScript (after a rollup compile look through the output js file and find the components). Rollupjs, which I'm using instead of webpack happens to also have been originally authored by the same dev that authored Svelte, so I suspect that makes some things go more smoothly than webpack. Once I found rollup though, I never went back to webpack for months or maybe a year now.
I imagine Webpack is also capable of it with the right configuration. However, I don't see how a build tool would help an IDE with its TypeScript integration. IDEs usually run their own TypeScript compiler. These compilers will still not know how to handle a .html file, and will have no knowledge of the output of any build tool (unless you outputted each compiled component next to its template, but that could get messy quite quickly).
When you say "help an IDE", I suppose you mean intellisense and linting. First, I don't pay much attention to that. I keep the code in my HTML files super small and mostly calling out to external scripts. So there is little-to-no TypeScript-specific syntax. However, linters work in VSCode because you can configure them however you want with the workspace settings. In any case, the final compiler/output settings are unrelated.
Yes, IDE integration of TypeScript, which makes TS errors much more approachable than reading a compiler console. My original question is not about placing TS into the <script> of a Svelte component, but about being able to import compiled Svelte components into those external scripts you mention and use those Svelte classes as types. The most obvious benefit to this would be TS knowing that a Svelte component has some methods on it, and these methods appearing and not displaying errors in the IDE integration. It would also be possible to use operators like component instanceof Component.
|
1

Yes. Svelte has official support for typescript! https://svelte.dev/blog/svelte-and-typescript

When starting a project
with Vite npm create vite@latest
or SvelteKit npm create svelte@latest
Choose the TypeScript option.

The Svelte ESLint also works with TypeScript, see the Readme for more info.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.