Svelte Custom Stores TypeScript 선언

사용자 정의 상점 유형을 선언하는 방법은 무엇입니까?

Svelte는 사용하기 쉬운 멋진 매장 개념을 제공합니다. 그 중 하나는 반응형 저장된 데이터의 난독화와 일련의 사용자 정의 기능을 통한 액세스를 편리하게 만드는 " 사용자 정의 저장소 "입니다.

예를 들어 사과와 바나나를 세는 카운터, 내 데이터를 직접 노출하지 않는 맞춤형 스토어를 만들 수 있습니다. 함수 내에서 스토어를 "숨길" 수 있고 공개적으로 노출하는 대신 내 앱에서 사용하고 싶은 함수만 노출할 수 있습니다 .set update이는 오작동과 예기치 않은 변경을 방지하기 위한 것으로, 코드 베이스가 커짐에 따라 정말 유용할 수 있습니다.

import { writable } from 'svelte/store';

export interface Counter {
   apples: number;
   bananas: number;
}

const initStore = () => {
   const initialCounter: Counter = {
      apples: 0,
      bananas: 0
   };

   const { subscribe, set, update } =
      writable(initialCounter);

   return {
      subscribe,
      incBanana: () =>
         update(({ bananas, ...rest }) => ({
            ...rest,
            bananas: bananas + 1
         })),
      decBanana: () =>
         update(({ bananas, ...rest }) => ({
            ...rest,
            bananas: bananas - 1
         })),
      reset: () => set(initialCounter)
   };
};

export const counter = initStore();

스니펫을 작게 유지하기 위해 "사과" 관련 기능을 구현 실제 사용 사례에서는 이중 코드를 피하기 위해 update()부분을 있지만 이 블로그 게시물 컨텍스트에서 그다지 가치가 없기 때문에 이 부분도 건너뛰었습니다.

구성 요소에서 바인딩할 때 예상대로 작동합니다.

그러나 모두 괜찮더라도 npm run dev|build|checkWebstorm은 TypeScript 블록에서 사용될 때 저장소 값을 파생할 수 없습니다 script.

anyJetbrains Svelte 플러그인의 또 다른 문제인지 또는 스토어가 번들러에 의해 유형으로 파생되는지(옵션을 무시합니다 ) 정확히 모르겠습니다 strict. 그럼에도 불구하고 나는 오히려 상점의 선언 유형을 개선하여 문제를 해결하고 싶습니다.

내 커스텀 스토어는 내 홈메이드 기능뿐만 아니라 루트 subscribe기능 해당 선언은 이에 대한 지원도 제공해야 합니다.

따라서 제 생각에 가장 쉬운 방법은 기존 Svelte Readable유형을 .

import {type Readable} from 'svelte/store';

export interface AuthStore extends Readable<Counter> {
   incBanana: () => void;
   decBanana: () => void;
   reset: () => void;
}

이 새로운 인터페이스를 사용하여 초기화 함수의 반환 유형을 설정할 수 있습니다 — initStore— 그리고 그게 다입니다.

import { type Readable, writable } from 'svelte/store';

export interface Counter {
   apples: number;
   bananas: number;
}

export interface AuthStore extends Readable<Counter> {
   incBanana: () => void;
   decBanana: () => void;
   reset: () => void;
}

const initStore = (): AuthStore => {
   const initialCounter: Counter = {
      apples: 0,
      bananas: 0
   };

   const { subscribe, set, update } =
      writable(initialCounter);

   return {
      subscribe,
      incBanana: () =>
         update(({ bananas, ...rest }) => ({
            ...rest,
            bananas: bananas + 1
         })),
      decBanana: () =>
         update(({ bananas, ...rest }) => ({
            ...rest,
            bananas: bananas - 1
         })),
      reset: () => set(initialCounter)
   };
};

export const counter = initStore();

무한과 그 너머로
다윗

더 많은 모험을 원하시면 Twitter 에서 저를 팔로우하세요 .