web-dev-qa-db-ja.com

TypeScriptはSvelteコンポーネントを理解できますか？

Svelteは最終的にネイティブJavaScriptクラスを出力します。したがって、TypeScriptはこれらを理解できます。ただし、Svelteコンポーネントは最初に最初の.html形式からコンパイルする必要があります。それまでの間、当然のことながら、TypeScriptはデフォルトでそれらを最初の形式で理解しません。そのため、実行時にインポートが成功しても、「モジュールが見つかりません」というエラーが報告されます。 TypeScriptにそれらを理解させる方法はありますか？

回避策の1つは、.htmlモジュールの型定義を提供し、標準のSvelteコンポーネントインターフェースに近づけることです。ただし、個々のコンポーネントごとに実際のコンポーネントクラスの出力自体を使用して、最も正確な型情報を取得する方がはるかに望ましいでしょう。

余談ですが、Svelteのコンパイル手順を正常に実行するWebpackやRollupなどのツールについては触れていません。これらのツールがこの質問に関連するかどうかはわかりません。

更新1：TypeScriptとその詳細を少し調べました プラグインを作成できるようです 。ただし、制限があるため、役に立たない場合があります。

Update 2：カスタムモジュールローダーについても（ here および here ）話がありましたTypeScriptで。

typescriptsvelte
20
Chris Talman

はい。 rollup-plugin-svelte と rollup-plugin-TypeScript を使用してください。現在、次のようなロールアップファイルで使用しています。

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