22

Svelte 最终输出原生 JavaScript 类。所以，TypeScript 可以理解这些。但是，Svelte 组件必须首先从其初始.html形式编译。在那之前，可以理解的是，TypeScript 默认不理解它们的初始形式。因此，即使在运行时导入成功，它也会报告“找不到模块”错误。有什么方法可以让 TypeScript 理解它们吗？

一种解决方法是为.html模块提供类型定义，近似于标准 Svelte 组件接口。但是，更希望对每个单独的组件简单地使用真实的组件类输出本身，从而产生最准确的类型信息。

顺便说一句，我没有提到像 Webpack 或 Rollup 这样正常执行 Svelte 编译步骤的工具。我不知道这些工具是否与这个问题有关。

更新 1：我对 TypeScript 进行了更深入的研究，似乎可以为它创建插件。但是，它们似乎有限，因此可能没有用。

更新 2：还有一些关于 TypeScript 中自定义模块加载器的讨论​​（这里和这里）。

4

2 回答 2

17

是的。使用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
  }
}
于 2018-01-08T07:19:48.867 回答
1

是的。Svelte 对 typescript 有官方支持！ https://svelte.dev/blog/svelte-and-typescript

入门模板带有 setupTypeScript.js 实用程序：https ://github.com/sveltejs/template#using-typescript

目前它不能与 eslint 结合使用，但正在开发中

于 2020-07-21T22:48:52.433 回答