将 Svelte 组件导入 TypeScript 文件时是不是可以保留 prop 类型信息？

Posted 2023-03-07

【中文标题】将 Svelte 组件导入 TypeScript 文件时是不是可以保留 prop 类型信息？

【英文标题】：Is it possible to retain prop type information when importing Svelte components into TypeScript files?将 Svelte 组件导入 TypeScript 文件时是否可以保留 prop 类型信息？

【发布时间】：2022-01-22 16:35:52

【问题描述】：

编辑：这原来是由正在修复的已知问题引起的：https://github.com/sveltejs/language-tools/issues/1256

只有在您使用启用了 TypeScript 支持的 Svelte VS Code 扩展并且在您的tsconfig.json 中设置了"jsx": "react" 或类似设置时才会发生这种情况，这可能是因为您在项目中也使用了 React。

我在Hello.svelte 中有一个基本的类型化 Svelte 组件，它采用这样的单个道具：

<script lang="ts">
  export let value: string;
</script>

<div>Hello, value</div>

然后我将它导入并使用如下文件从 TypeScript 将其挂载到 DOM 中：

import Hello from './Hello.svelte';

const initHello = () => 
  const node = document.getElementById('content')!;
  new Hello(
    target: node,
    // \/ I would like this to throw a type error since the required `value` prop is missing
    props: ,
  );

正如我在上面的评论中提到的，Hello 的 props 的类型信息在导入 TypeScript 时会丢失。我的 VS Code 插件（TypeScript、Svelte 或其他）都没有抱怨，svelte-check 似乎也不在乎（尽管我不熟悉那个工具）。

有什么方法可以让我输入这个边界吗？理想情况下，我希望能够创建通用类型函数来呈现 Svelte 组件，如下所示：

function renderSvelte<P extends Record<string, any>>(
  Comp: TypedSvelteComponentConstructor<P>,
  props: P,
) 
 // ...

但是，每当我从 TypeScript 导入 Svelte 组件时，该类型都会解析为具有准确属性信息的非泛型 SvelteComponent 而不是 TypedSvelteComponent。

我可以使用在第三个位置定义组件道具并从 Svelte 组件和 TypeScript 文件中导入它们的方法，尽管在导入 Svelte 时这不如真正的自动检测文件转换成 TypeScript。

【参考方案1】：

为了获得更好的 IDE 支持，您需要通过将 svelte.enable-ts-plugin 设置为 true 来激活 Svelte for VS Code extension 的 TypeScript 插件 - 如果您使用其他编辑器，我不确定如何最好地集成 TypeScript 插件.该插件的作用是为 TypeScript 文件中使用的 Svelte 文件提供更好的智能感知 - 包括在您错过所需属性时显示错误。请注意，目前在同一个项目中使用 React/JSX 时存在限制，在这种情况下插件什么都不做：https://github.com/sveltejs/language-tools/issues/1256

为了在通过 CLI 进行检查时获得更好的支持，请使用 svelte-check 版本 2 并调用它，并提供指向您的 tsconfig.json 的路径，如下所示：svelte-check --tsconfig ./tsconfig.json（假设您从项目根目录运行它并且您的 tsconfig 是在根）。这样做时，svelte-check 也将负责检查 TypeScript 文件，同时为 TypeScript 文件中使用的 Svelte 文件提供更好的支持。如果您不添加 --tsconfig 选项，svelte-check 将仅检查 Svelte 文件，因此您将错过所需的诊断。

【讨论】：

您好，感谢您提供此信息。我确实启用了svelte.enable-ts-plugin 配置选项，并且类型检查在.svelte files 中运行良好。不幸的是，当将.svelte 文件导入 TypeScript 时，类型信息似乎仍然没有被保留；我在我的问题中发布的示例仍然没有引发类型错误。我的 svelte-check 现在在使用 --tsconfig 标志时会记录数千个错误 - 为此。但是，我无法判断输出中是否存在这种特定类型的错误。

关于插件：你能分享一个最低可重复性并在github.com/sveltejs/language-tools/issues 上打开一个问题吗？那我就调查一下。关于svelte-check：如果有误报或其他感觉不对劲的地方，也请随时在github.com/sveltejs/language-tools/issues 上打开问题。谢谢！

啊哈 - 我做了更多的挖掘工作，这似乎是一个已知问题，很高兴正在修复！ github.com/sveltejs/language-tools/issues/1256我应该在发帖之前检查一下。您是否建议我编辑问题或添加另一个答案来注明此信息？

我更新了答案以添加有关限制的注释。如果 tsconfig 还包含 React/JSX 文件，这也可能是您在运行 svelte-check 时看到许多错误的原因。您可以尝试创建一个单独的 tsconfig 排除 React/JSX 文件并使用该文件运行svelte-check。我认为最好将此信息添加到您的问题中。