typescript - 如何在 Typescript 文件中导入 Svelte 组件？

Question

是否可以在 Typescript 文件中导入 Svelte 组件并让 Rollup 成功编译它？
以下代码作为 Javascript 文件工作，但转换为 Typescript 时出错，因为 TS 编译器不知道如何处理 .svelte文件:

import Component from './Component.svelte';

const foo = () => new Component({ target: document.body });

有没有 rollup-plugin-svelte的组合和 @rollup/plugin-typescript这将以 Typescript 编译器可以包含 Svelte 代码的方式预处理 Svelte 组件？

如果更多上下文有帮助，boardgame.io 包含 an in-browser debugging component使用 Svelte 构建，它捆绑在普通 JS 客户端和 React 客户端组件中，我们正在尝试更新 our Rollup config对于这种情况。

Answer 1

只是为了扩展 Rich 的回答，我很好奇为什么导入 Svelte 有助于某些设置。

the TS compiler doesn’t know how to handle a .svelte file

Svelte 通过在 3.35.0 中分发文件解决了这个问题(至少在撰写本文时的版本 svelte/types/runtime/ambient.d.ts 中) :

declare module '*.svelte' {
    export { SvelteComponentDev as default } from 'svelte/internal';
}

这有效地使 TS 编译器分析 .svelte文件。出于学术兴趣，它还声明了 .svelte 中的脚本的所有运行时功能的类型。文件有权访问，如 set_attributes() (有关更多信息，请参阅 svelte/internal)。所以只写 declare module '*.svelte' {}只会让您完成一部分，因为您还需要那些运行时声明。
因此，要让 TypeScript 编译器处理 .svelte文件，您需要以一种或另一种方式引用该文件的类型， svelte/types/runtime/ambient.d.ts .它实际上是由包的入口点类型文件(Svelte 的 types 的 package.json 字段中指定的值)、 types/runtime/index.d.ts 间接引用的。 ，同样，您可以引用该入口点类型文件。这样做将是最佳实践，因为它对目录结构中的 future 重构非常有效。
扩展 @tsconfig/svelte/tsconfig.json满足这一点，因为有问题的 tsconfig 文件引用了 "svelte" node 模块通过其 compilerOptions.types属性(property):

{
  // ... Omitted...

  "compilerOptions": {
    // ... Omitted...

    "types": ["svelte"]
  }
}

这实际上意味着编译上下文将包含此引用:

/// <reference types="svelte" />

您同样可以自己编写同一行，但您也可以扩展 Svelte tsconfig，因为它对 future 的 Svelte 演变非常健壮。
导入副作用的建议出于同样的原因:

import "svelte";

我发现即使我扩展了 Svelte tsconfig，也没有引用 Svelte 类型。结果证明这是因为我在 tsconfig 中得到了这一行:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  
  // ... Omitted...

  "compilerOptions": {
    // ... Omitted...

    "types": ["node"] // This overrides ["svelte"]!
  }
}

我通过更换 "types": ["node"] 来修复它与 "types": ["node", "svelte"] .