Language-tools: $store 값을 파괴할 때 예기치 않은 오류가 발생했습니다.

에 만든 2020년 08월 11일 · 6코멘트 · 출처: sveltejs/language-tools

버그 설명
$: ({ value } = $store); 문은 value 가 $store 의 속성이고 $store 가 Svelte 저장소인 경우 유효한 구문입니다. 일반적인 구조 분해처럼 작동하고 업데이트를 저장하는 데 반응합니다. 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.

재현하기 위해
1) 이 REPL로 시작: 링크
2) 다운로드하고 프로젝트에 TS 지원 추가: 링크
3) 수정 App.svelte 추가하여 lang="ts" 개구부에 <script> 태그. (위의 스 니펫 참조)
4) svelte-check

예상되는 행동
이것은 유효한 Svelte/JS 구문이며 그의 코드는 잘 실행됩니다. typechecker 오류가 발생하지 않아야 합니다.

스크린샷
해당하는 경우 문제를 설명하는 데 도움이 되는 스크린샷을 추가하세요.

시스템(다음 정보를 작성하십시오):

운영 체제: 윈도우
IDE: VSCode(Windows-Linux 하위 시스템)
플러그인/패키지:
- VSCode용 Svelte
- 날씬한 체크
- @tsconfig/svelte

Fixed bug

출처

JoeDailey

모든 6 댓글

해결 방법
Typescript의 Svelte 저장소에서 구조 분해를 사용하지 마십시오. 이것은 이상적이지는 않지만 차단기는 아닙니다. 한 번에 여러 속성을 구조화할 때 덜 간결합니다.
REPL: 링크

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

물론 반응 업데이트를 보기 위해 DOM에서 직접 스토어 값을 참조할 수 있습니다.

JoeDailey 에 2020년 08월 11일

입력에서

<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 는 다음과 같은 출력을 생성합니다.

<></>;
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)) {
}

문제는 $ -assignment가 함수로 래핑되어 값이 해당 범위 밖에 존재하지 않는다는 것입니다.