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

Question

编辑：这原来是由正在修复的已知问题引起的：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。

Answer 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 文件，因此您将错过所需的诊断。