如何在 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会以进行预处理，使得该打字稿编译器可以包括苗条代码苗条的组成部分？

---

如果更多上下文有帮助，boardgame.io 包含一个使用 Svelte 构建的浏览器内调试组件，该组件捆绑在普通 JS 客户端和 React 客户端组件中，我们正在尝试准确更新我们的 Rollup 配置这种情况。

Answer 1

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

TS 编译器不知道如何处理.svelte文件

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. 它实际上是由包的入口点分型文件（在指定的值间接引用types斯维尔特的领域package.json）types/runtime/index.d.ts，所以同样，你可以引用入口点分型的文件。这样做将是最佳实践，因为它对目录结构中的未来重构具有健壮性。

扩展@tsconfig/svelte/tsconfig.json满足这一点，因为有问题的 tsconfig 文件"svelte"通过其compilerOptions.types属性引用节点模块：

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

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

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

您同样可以自己编写同一行，但您也可以扩展 Svelte tsconfig，因为它对未来的 Svelte 演变非常健壮。

导入副作用的建议出于同样的原因：

import "svelte";

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

{
  // ... Omitted...

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

    "types": ["svelte"]
  }
}

我通过替换"types": ["node"]为"types": ["node", "svelte"].

Answer 2

尝试添加@tsconfig/svelte到您的项目，然后更新您的 tsconfig.json 文件：

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}