Language-tools: 每个块的输入问题

创建于 2021-01-03 · 5评论 · 资料来源: sveltejs/language-tools

我正在尝试使用{#each ...}遍历属性值，并且在Svelte组件中有两种类型的输入（这是一个TypeScript项目）。

<script lang="ts">
    import Transition from './Transition/Transition.svelte';

    type Options = { text: string, value?: string }[];
    type OptionsGroup = Options[];

    export let options: Options | OptionsGroup = [];
</script>

{#each options as option}
    <div>example</div>
{/each}

我希望每个语句中的选项类型为Options | OptionsGroup但是VS Code给我一个错误，说：

“选项|选项”类型的参数 OptionsGroup'不可分配给'ArrayLike <{类型的参数：text; string; 值？：字符串； }>'。

我不确定到底出了什么问题，因为build和dev任务可以正常工作而没有任何错误，这似乎只是VS Code的问题。

系统：

操作系统：Manjaro（Linux）
IDE：VSCode
插件/软件包：Svelte for VSCode

bug question

资料来源

JAD3N

所有5条评论

我还发现了一个带有{#each}的奇怪错误。

可能的最小复制：

<script lang="ts">
  let data: { name: string } | null = null,
    someArr = [1, 2, 3];
</script>

{#if data}
  <!-- Works fine -->
  {data.name}
  {#each someArr as _}
    <!-- Highlights an error! -->
    {data.name}
  {/each}
{/if}

Mac，VS Code，运行最新的插件。我有一种直觉，认为这与这个问题有些相关。

Proof of bug

dkzlv 于 2021-01-05

@dkzlv那是＃619

dummdidumm 于 2021-01-05

👍1

我担心这不可能在我们这边解决，这似乎是TypeScript问题。当您这样做时，您将得到相同的错误：

function each<T>(
    array: ArrayLike<T>, // or T[], doesnt matter for the error
    callbackfn: (value: T, index: number) => any
): any{ /* doesnt matter */ };

each(options, a => a); // The same TS error

each函数基本上就是用来对each -block进行类型检查的函数。我没有找到一种方法来使错误静音而不丢失类型安全性。

dummdidumm 于 2021-01-06

您可以改为执行此操作。我想我以前有这个打字稿错误，并通过尝试一些随机组合大声笑起来使其有效

<script lang="ts">
  type Option = { text: string, value?: string };
  type OptionsGroup = Option[];

  export let options: Array<Option | OptionsGroup> = [];
</script>

{#each options as option}
  <div>example</div>
{/each}

编辑：
请注意，这两种类型并不相同，但是您可能大部分时间都不在乎它们之间的差异。如果您确实在意，您可能需要编写一些自定义类型防护以进行强制转换。

jasonlyu123 于 2021-01-06

感谢您的澄清，我已经根据建议修改了输入内容，这已经解决了很多。

JAD3N 于 2021-01-06

👍1

此页面是否有帮助？

0 / 5 - 0 等级

Language-tools: 每个块的输入问题

所有5条评论

相关问题