Language-tools: Erreur inattendue lors de la destruction des valeurs $store

Créé le 11 août 2020 · 6Commentaires · Source: sveltejs/language-tools

Décrivez le bogue
L'instruction $: ({ value } = $store); est une syntaxe valide lorsque value est une propriété de $store et que $store est un magasin Svelte. Il se comporte comme une déstructuration normale et est réactif pour stocker les mises à jour. Cela produit une erreur lorsque lang="ts" .

# App.svelte
------------
<script lang="ts">
  import data from "./store";
  $: ({ count } = $data);
</script>

jd:/svelte-playground $ yarn svelte-check                                                                                                                                                                                                                      [0:30]
yarn run v1.22.4
warning package.json: No license field
$ /home/jd/Projects/svelte-playground/node_modules/.bin/svelte-check

Loading svelte-check in workspace: /home/jd/Projects/svelte-playground
Getting Svelte diagnostics...
====================================

/home/jd/Projects/svelte-playground/src/App.svelte:3:9
Error: No value exists in scope for the shorthand property 'count'. Either declare one or provide an initializer. (ts)
;
  $: ({ count } = $data

====================================
svelte-check found 1 error and 0 warnings
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproduire
1) Commencez par ce REPL : lien
2) Téléchargez-le et ajoutez le support TS au projet : lien
3) Modifiez App.svelte en ajoutant lang="ts" à la balise d'ouverture <script> . (voir l'extrait ci-dessus)
4) courir svelte-check

Comportement attendu
C'est une syntaxe Svelte/JS valide et son code fonctionne bien. Il ne devrait pas produire d'erreurs de vérificateur de type.

Captures d'écran
Le cas échéant, ajoutez des captures d'écran pour expliquer votre problème.

Système (veuillez compléter les informations suivantes) :

OS : Windows
IDE : VSCode (sous-système Windows-Linux)
Plugin/Package :
- Svelte pour VSCode
- chèque-svelte
- @tsconfig/svelte

Fixed bug

Source

JoeDailey

Tous les 6 commentaires

solution de contournement
N'utilisez pas la déstructuration sur les magasins Svelte dans Typescript. Ce n'est pas idéal mais pas un bloqueur. C'est juste moins concis lors de la déstructuration de plusieurs propriétés à la fois.
REPL : lien

# App.svelte
------------
<script lang="ts">
  import data from "./store";
  $: count = $data;
</script>

Bien sûr, vous pouvez toujours vous référer à la valeur du magasin directement dans le DOM pour voir les mises à jour réactives.

JoeDailey le 11 août 2020

De l'entrée

<script lang="ts">
  import data from "./store";
  $: ({ count } = $data);
</script>

<main>
  <h1>Count (inline): {$data.count}</h1>
  <h1>Count (reactive destructure): {count}</h1>
    <button on:click={() => data.update(c => ({count: c.count + 1}))}>
    Increment
  </button>
</main>

svelte2tsx génère la sortie :

<></>;
import data from "./store";
function render() {


  ;() => {$: ({ count } = __sveltets_store_get(data));}
;
() => (<>

<main>
  <h1>Count (inline): {__sveltets_store_get(data).count}</h1>
  <h1>Count (reactive destructure): {count}</h1>
    <button onclick={() => data.update(c => ({count: c.count + 1}))}>
    Increment
  </button>
</main> </>);
return { props: {}, slots: {}, getters: {}, events: {} }}

export default class extends createSvelte2TsxComponent(__sveltets_partial(render)) {
}

Le problème est que l'affectation $ est enveloppée dans une fonction, donc la valeur n'existe pas en dehors de sa portée.

dummdidumm le 11 août 2020

👍1

nous devrons peut-être vérifier comment le compilateur svelte détermine quand il doit déclarer une variable voir si nous manquons une autre situation

jasonlyu123 le 11 août 2020

Le problème est l'analyse ts AST. Il ne fait la transformation let x = ... s'il s'agit d'une expression binaire, mais dans ce cas, il s'agit d'une expression binaire enveloppée dans une expression entre parenthèses.

Edit: je suis en train de réparer ça - toutes ces vérifications si-alors-aussi-pensez-à-ce-coin-cas me rendent l'esprit flou 😄

dummdidumm le 11 août 2020

👍1

Je pense que le chèque de gauche doit également être modifié

https://github.com/sveltejs/language-tools/blob/a032ff2ea702340de7c59f84b480bf9e27f0043d/packages/svelte2tsx/src/svelte2tsx.ts#L770

https://github.com/sveltejs/svelte/blob/f739b4772a4ad32c0fd337afb9d5594ebd776073/src/compiler/compile/Component.ts#L607

jasonlyu123 le 11 août 2020

Oui, plusieurs choses doivent être changées. Je vais créer un projet de RP afin que vous puissiez voir mon état actuel.

dummdidumm le 11 août 2020

Cette page vous a été utile?

0 / 5 - 0 notes