TypeScript 可以理解 Svelte 组件吗？

Posted 2023-02-19

【中文标题】TypeScript 可以理解 Svelte 组件吗？

【英文标题】：Can TypeScript understand Svelte components?

【发布时间】：2018-06-16 18:16:42

【问题描述】：

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

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

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

更新 1： 我对 TypeScript 和 seems that plugins can be created for it 进行了更深入的研究。但是，它们似乎有限，因此可能没有用。

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

【参考方案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: 's-s-r',

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

【讨论】：

感谢您的回复。使用这种方法，您不会在 TypeScript 编译器中收到错误吗？我尝试使用 Webpack 进行类似的操作，但随后意识到输出是单个文件，因此对 TypeScript 编译器是不可见的。问题仍然存在，我们正在导入一个 HTML 文件，该文件始终是一个 HTML 文件，TypeScript 总是不理解（除了静态类型定义）。

我没有任何错误。这里有几个因素 - 请记住，svelte 的工作方式是将 HTML 转换为纯 JavaScript（在汇总编译后查看输出 js 文件并找到组件）。 Rollupjs，我用它代替了 webpack，恰好也是由与 Svelte 相同的开发人员最初编写的，所以我怀疑这会使某些事情比 webpack 更顺利。不过，一旦我找到 rollup，我几个月甚至一年都没有回到 webpack。

我想 Webpack 在正确的配置下也能做到。但是，我看不到构建工具如何帮助 IDE 进行 TypeScript 集成。 IDE 通常运行自己的 TypeScript 编译器。这些编译器仍然不知道如何处理.html 文件，并且不知道任何构建工具的输出（除非您在其模板旁边输出每个已编译的组件，但这很快就会变得混乱）。跨度>

当您说“帮助 IDE”时，我想您的意思是智能感知和 linting。首先，我不太关注这个。我将 HTML 文件中的代码保持得非常小，并且主要调用外部脚本。因此几乎没有特定于 TypeScript 的语法。但是，linter 在 VSCode 中工作，因为您可以使用工作区设置随意配置它们。无论如何，最终的编译器/输出设置是无关的。

是的，TypeScript 的 IDE 集成，这使得 TS 错误比阅读编译器控制台更容易处理。我最初的问题不是关于将 TS 放入 Svelte 组件的

【参考方案2】：

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

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

此时它不能与eslint结合使用，而是is being worked on