Svelte 不允许我在组件主体中使用导出的枚举 (TypeScript)答案

【问题标题】：Svelte Won't Allow Me to Use an Exported Enum (TypeScript) in the Component BodySvelte 不允许我在组件主体中使用导出的枚举 (TypeScript)
【发布时间】：2021-10-17 10:57:14
【问题描述】：

我有以下代码...

<script lang="ts">
    import { TToken } from "./global.d";
    const value:TToken = TToken.X;
</script>
{#if value == TToken.X}
    Hi There!
{:else}
    I don't like you
{/if}

这里是 global.d.ts：

/// <reference types="svelte" />
export enum TToken {
    X = 'X',
    O = 'O',
    Blank = ' '
}

当我运行 npx svelte-check 时，它没有发现任何错误。但是当我尝试通过 npm run dev 运行 svelte 时，我得到以下信息：

rollup v2.56.2
bundles src/main.ts → public\build\bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src\global.d.ts (2:7)
1: /// <reference types="svelte" />
2: export enum TToken {
          ^
3:     X = 'X',
4:     O = 'O',
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (C:\svelte-test\node_modules\rollup\dist\shared\rollup.js:151:30)
    at Module.error (C:\svelte-test\node_modules\rollup\dist\shared\rollup.js:10059:16)
    at Module.tryParse (C:\svelte-test\node_modules\rollup\dist\shared\rollup.js:10462:25)
    at Module.setSource (C:\svelte-test\node_modules\rollup\dist\shared\rollup.js:10365:24)
    at ModuleLoader.addModuleSource (C:\svelte-test\node_modules\rollup\dist\shared\rollup.js:19708:20)
    at ModuleLoader.fetchModule (C:\svelte-test\node_modules\rollup\dist\shared\rollup.js:19764:9)
    at async Promise.all (index 1)
    at ModuleLoader.fetchStaticDependencies (C:\svelte-test\node_modules\rollup\dist\shared\rollup.js:19790:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (C:\svelte-test\node_modules\rollup\dist\shared\rollup.js:19766:9)

我在 Google 上搜索并发现有人报告了类似的问题，但我发现的解决方案均不适用于我的案例。例如，有人说问题是插件和手表需要在汇总中输出，但对我来说已经是这样了。

删除导出当然会导致 svelte-check 失败。

有人知道这个问题的解决方法吗？我需要能够将我的枚举放在单独的文件中，所以我不能在组件中声明它。

谢谢！

【问题讨论】：

既然您已经在项目中使用了打字稿，为什么不从types.ts 文件中导出它呢？ .d.ts 文件可以通过 rollup 生成。
@johannchopin 做到了，谢谢！如果您想将此作为答案，我会接受并投票。

标签： typescript svelte svelte-component

【解决方案1】：

由于您已经在项目中使用 typescript，您可以直接使用简单的.ts 文件。例如，您经常看到types.ts：

// types.ts

export enum TToken {
    X = 'X',
    O = 'O',
    Blank = ' '
}

Rollup 然后能够为您生成非打字稿项目所需的.d.ts 文件。

它不适用于d.ts 文件，因为d.ts 文件没有运行时等效项——它们只存在于编译时用于类型检查。 .ts 文件会被转换为 .js 文件，您的开发服务器/汇总会找到这些文件。

【讨论】：