Language-tools: Cada problema de escritura de bloque

Creado en 3 ene. 2021 · 5Comentarios · Fuente: sveltejs/language-tools

Estoy tratando de iterar sobre los valores de las propiedades usando {#each ...}, y tengo dos mecanografiados (este es un proyecto de TypeScript) en mi 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}

Esperaría que el tipo de opción en cada declaración sea Options | OptionsGroup pero VS Code me está dando un error que dice:

Argumento de tipo 'Opciones | OptionsGroup 'no se puede asignar al parámetro de tipo' ArrayLike <{text: string; valor ?: cadena; }> '.

No estoy seguro de qué es exactamente lo que está fallando, ya que las tareas de compilación y desarrollo funcionan bien sin ningún error, solo parece ser un problema con VS Code.

Sistema:

SO: Manjaro (Linux)
IDE: VSCode
Complemento / Paquete: Svelte para VSCode

bug question

Fuente

JAD3N

Todos 5 comentarios

También encontré un error extraño con {#each} .

La reproducción más pequeña posible:

<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, ejecutando el último complemento. Tengo la intuición de que está algo relacionado con este problema.

Proof of bug

dkzlv en 5 ene. 2021

@dkzlv ese es el # 619

dummdidumm en 5 ene. 2021

👍1

Me temo que esto no es posible de arreglar de nuestro lado, parece que es un problema de TypeScript. Obtendría el mismo error al hacer esto:

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

esa función each es básicamente lo que se usa para verificar el tipo de bloque each . No encontré una manera de silenciar el error sin perder la seguridad de los tipos.

dummdidumm en 6 ene. 2021

En su lugar, puede hacer esto. Creo que tengo este error de mecanografiado antes y lo hice funcionar probando alguna combinación aleatoria jajaja

<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:
Observó que estos dos tipos no son iguales, pero probablemente no le importe la diferencia la mayor parte del tiempo. Si te importa, probablemente necesites escribir algún tipo de protección personalizado para lanzarlo.