web-dev-qa-db-fra.com

TypeScript peut-il comprendre les composants Svelte?

Svelte génère finalement des classes JavaScript natives. Ainsi, TypeScript pourrait les comprendre. Cependant, les composants Svelte doivent d'abord être compilés à partir de leur .html forme. Jusque-là, naturellement, TypeScript ne les comprend pas dans leur forme initiale. Ainsi, il signale une erreur "Impossible de trouver le module", même si au moment de l'exécution, l'importation réussit. Existe-t-il un moyen de les faire comprendre à TypeScript?

Une solution de contournement consisterait à fournir des définitions de type pour .html modules, approximant l'interface standard des composants Svelte. Cependant, il serait beaucoup plus souhaitable d'utiliser simplement la sortie de classe de composant réelle elle-même pour chaque composant individuel, produisant les informations de type les plus précises.

En passant, je n'ai pas mentionné d'outils comme Webpack ou Rollup qui effectuent normalement l'étape de compilation pour Svelte. Je ne sais pas si ces outils seraient pertinents pour cette question.

Mise à jour 1: J'ai cherché un peu plus loin dans TypeScript et il il semble que des plugins peuvent être créés pour cela . Cependant, ils semblent limités et peuvent donc ne pas être utiles.

Mise à jour 2: Il y a également eu des discussions ( ici et ici ) sur les chargeurs de modules personnalisés en TypeScript.

typescriptsvelte
20
Chris Talman

Oui . Utilisez rollup-plugin-svelte et rollup-plugin-TypeScript et cela devrait fonctionner. Je l'utilise maintenant dans un fichier cumulatif qui ressemble à ceci:

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
  }
}
12
Scott Willeke