TypeScript 可以理解 Svelte 組件嗎？

Question

Svelte 最終輸出原生 JavaScript 類。 所以，TypeScript 可以理解這些。 但是，Svelte 組件必須首先從它們的初始.html格式進行編譯。 在那之前，可以理解的是，默認情況下，TypeScript 無法理解它們的初始形式。 因此，即使在運行時導入成功，它也會報告“找不到模塊”錯誤。 有沒有辦法讓 TypeScript 理解它們？

一種解決方法是為.html模塊提供類型定義，近似於標准的 Svelte 組件接口。 但是，更希望為每個單獨的組件簡單地使用真實的組件類輸出本身，從而產生最准確的類型信息。

順便說一句，我沒有提到像 Webpack 或 Rollup 這樣的工具，它們通常為 Svelte 執行編譯步驟。 我不知道這些工具是否與這個問題相關。

更新 1：我更深入地研究了 TypeScript， 似乎可以為它創建插件。 但是，它們似乎有限，因此可能沒有用。

更新 2：也有一些關於 TypeScript 中自定義模塊加載器的討論​​（這里和這里）。

Answer 1

是的。 使用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
  }
}

Answer 2

是的。 Svelte 官方支持打字稿！ https://svelte.dev/blog/svelte-and-typescript

入門模板帶有 setupTypeScript.js 實用程序： https : //github.com/sveltejs/template#using-typescript

目前它不能與 eslint 結合使用，但正在研究中