Language-tools: Cada problema de digitação de bloco

Criado em 3 jan. 2021 · 5Comentários · Fonte: sveltejs/language-tools

Estou tentando iterar sobre os valores de uma propriedade usando {#each ...} e tenho duas tipificações (este é um projeto TypeScript) em meu componente Svelte.

<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}

Eu esperaria que o tipo de opção em cada instrução fosse Options | OptionsGroup mas o VS Code está me dando um erro dizendo:

Argumento do tipo 'Opções | OptionsGroup 'não pode ser atribuído ao parâmetro do tipo' ArrayLike <{text: string; valor ?: string; }> '.

Não tenho certeza do que exatamente está errado, já que as tarefas de compilação e desenvolvimento estão funcionando bem, sem erros, só parece ser um problema com o VS Code.

Sistema:

SO: Manjaro (Linux)
IDE: VSCode
Plugin / pacote: Svelte para VSCode

bug question

Fonte

JAD3N

Todos 5 comentários

Eu também encontrei um bug estranho com {#each} .

Menor reprodução possível:

<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, executando o plugin mais recente. Tenho um pressentimento de que está um tanto relacionado a esse problema.

Proof of bug

dkzlv em 5 jan. 2021

@dkzlv é # 619

dummdidumm em 5 jan. 2021

👍1

Temo que não seja possível consertar do nosso lado, parece que é um problema do TypeScript. Você obteria o mesmo erro ao fazer isso:

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

aquela função each é basicamente o que é usado para verificar o tipo do bloco each . Não encontrei uma maneira de silenciar o erro sem perder a segurança de digitação.

dummdidumm em 6 jan. 2021

Você pode fazer isso em vez disso. Acho que tive esse erro de digitação antes e o fiz funcionar tentando alguma combinação aleatória lol

<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}

Editar:
Observe que esses dois tipos não são iguais, mas provavelmente você não se preocupa com a diferença na maioria das vezes. Se você se importar, provavelmente precisará escrever algum tipo de proteção personalizado para lançá-lo.