主页 / coding / 问题 / 79252345
Accepted
rodrigocfd
Asked: 2024-12-05 02:26:36 +0800 CST

为什么在 Svelte 中导入类型时需要使用“type”关键字？

  • 772

我来自 React 世界，正在尝试学习 Svelte 5。

假设我有以下文件：

// types.ts

export interface Person {
    name: string;
}

在 React 中，我可以Person按如下方式导入声明：

// Component.tsx

import {Person} from './types';

function Component() {
    return <></>;
}

但是在 Svelte 中，我需要type在声明中使用关键字：

// Component.svelte

<script lang="ts">
import type {Person} from './types';
</script>

如果我不使用，type我会看到一个错误：

// Component.svelte

<script lang="ts">
import {Person} from './types';
</script>

The requested module 'http://localhost:8080/src/types.ts'
  doesn't provide an export named: 'Person'

为什么type需要？

我可以做任何配置来解除这个要求吗？

typescript

3 个回答

  1. Best Answer

    为什么type需要？

    因此预处理器可以判断这是一个需要删除的导入。如果不删除导入，它将无效，因为类型在运行时不存在。

    曾经有一个 TS 配置选项可以轻松实现这一点："importsNotUsedAsValues": "error"

    这可以与其他各种难以理解的标志相结合，因此这些标志已被替换verbatimModuleSyntax，此选项的文档还详细解释了处理导入的问题。

    我可以做任何配置来解除这个要求吗？

    不。

    Svelte 文件当前是单独处理的，因此需要告知工具什么是值、什么是类型，因为无法从引用的文件中收集这些信息。

    • 1

  2. tsconfig.json与该要求相关的设置是（verbatimModuleSyntax在 v5 中引入，以简化之前的三个设置）。

    import type是 TypeScript 处理仅类型导入的助手。在编译时，TypeScript 不需要将类型编译为 JavaScript，因此如果导入仅用于类型，则可以在编译期间忽略它。如果verbatimModuleSyntax关闭，TypeScript 会通过检查源文件导出来检查导入是类型还是值。

    TypeScript 以外的编译器在决定是否发出值时也可能使用此信息，但可能不会像 TypeScript 那样执行检查以检查导出是类型还是值的操作。

    Svelte 建议在使用 svelte 时将其verbatimModuleSyntax设置为，并且在为 SvelteKit 项目生成时默认将true其设置为。true./svelte-kit/tsconfig.json

    在提供的示例中，编译器可能会假设导入Person是一个值，因为没有类型指示符，Person在源文件中找不到导出的值（因为它是一个不会发送到 JavaScript 的接口/类型），并抛出错误，因为它Person在源文件中不存在。具有导入类型意味着它可以忽略导入而不尝试处理它。

    由于我还没有读过 svelte 的代码，所以我不知道 svelte 的预处理器/编译器是否需要该语法。不过，根据报告的错误和文档中的建议，似乎 svelte 可能需要进行预处理/编译。

    • 1

  3. 该功能由TypeScript v3.8import type引入。你可以在那里阅读其确切目的和好处。

    虽然我尝试过为您的问题找到准确而明确的答案，但我找不到。例如，该行为似乎无法通过配置tsconfig.json，这意味着似乎不存在一个属性或属性组合，可以让 TypeScript 将“导入类型”视为必须执行的操作，而不是可执行的操作。

    那么，我的非权威答案是，Svelte 扩展很可能已更新为强制要求“导入类型”。如果是这样，那么很可能是因为 Svelte 预处理器可能需要这种语法，就像“除非使用 导入类型，否则预处理器将无法正常工作import type”之类的。

    也许 Svelte 团队成员可以联系我们并告诉我们我的假设是否正确，或者一些好奇的程序员可以深入研究预处理器/扩展代码库。

    当然，这是假设您在 VS Code 中看到此错误，而不是其他编辑器。我只知道 VS Code 的 Svelte 扩展，但也许还有其他我不知道的 IDE 的扩展。

    • 0

相关问题