Is TypeScript capable of comprehending Svelte components?

Question

Is TypeScript capable of comprehending Svelte components?

When it comes to Svelte, the final output is native JavaScript classes, which TypeScript can understand. However, before TypeScript can recognize Svelte components, they must first be compiled from their initial .html form. This can lead to a 'cannot find module' error in TypeScript, even though the import works at runtime. Is there a way for TypeScript to better understand Svelte components?

One potential solution could involve creating type definitions for .html modules that mimic the standard Svelte component interface. But ideally, using the actual output of the component class would provide the most accurate type information for each individual component.

It's worth noting that popular tools like Webpack or Rollup typically handle the compilation process for Svelte. It's unclear if these tools play a role in addressing this specific issue.

Update 1: Upon further investigation, it appears that plugins can be developed for TypeScript according to official documentation. However, the limitations of these plugins may hinder their usefulness in this context.

Update 2: Discussions have emerged regarding custom module loaders in TypeScript, as seen in threads here and here.

typescript svelte

Answer 1

Answer №1

Absolutely. Utilize rollup-plugin-svelte along with rollup-plugin-typescript and it should function properly. I currently have it set up in a rollup file that appears like this:

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

Answer 2

Absolutely. Utilize rollup-plugin-svelte along with rollup-plugin-typescript and it should function properly. I currently have it set up in a rollup file that appears like this:

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

Answer 3

Answer №2

Absolutely. Svelte fully embraces TypeScript! Learn more about using TypeScript with Svelte here.

When initiating a new project,
consider using Vite by running npm create vite@latest
or opt for SvelteKit and run npm create svelte@latest
Make sure to select the TypeScript option when prompted.

The Svelte ESLint plugin is also compatible with TypeScript, find installation instructions in the Readme.

Answer 4

Absolutely. Svelte fully embraces TypeScript! Learn more about using TypeScript with Svelte here.

When initiating a new project,
consider using Vite by running npm create vite@latest
or opt for SvelteKit and run npm create svelte@latest
Make sure to select the TypeScript option when prompted.

The Svelte ESLint plugin is also compatible with TypeScript, find installation instructions in the Readme.

Is TypeScript capable of comprehending Svelte components?

Answer №1

Answer №2

Similar questions

When an empty array is returned from a catch statement in an async/await method, TypeScript infers it as never

How do I implement branch code using TypeScript types in Svelte?

The NGINX reverse proxy fails to forward requests to an Express application

Creating TypeScript modules for npm

Encountering difficulties in loading my personal components within angular2 framework

Creating a regular expression to capture a numerical value enclosed by different characters:

To properly display a URL on a webpage using Angular, it is necessary to decode

The React Native blob or file seems to be encountering trouble in reaching the server

Angular typed controls allowing for a seamless user experience without the need to

How to implement a custom pipe for dynamically changing image URLs in Ionic 3's image tag

Unit testing for Angular service involving a mock Http GET request is essential for ensuring the

Issue encountered: NPM error, unable to find solution for resolving dependency and addressing conflicting peer dependency

Exploring Typescript for Efficient Data Fetching

An error should not be thrown if the object is potentially 'undefined', as there is a filter in place from rxjs

What methods are available to pass a variable value between two components in Angular 2?

Utilize SCSS values within TypeScript by applying them on a class level

"What are the benefits of utilizing Dependency Injection tokens within Angular 4 and when is the ideal time to implement

Defining types for functions that retrieve values with a specified default

Having trouble with React Hook Form controlled input and typing

Angular 6 and the intricacies of nested ternary conditions