Svelte Özel Mağazalar TypeScript Bildirimi

Özel mağaza türleri nasıl bildirilir?

​Svelte, bazı güzel, kullanımı kolay mağaza konseptleri sunar. Bunlardan biri, reaktif depolanan verilerin gizlenmesini ve bir dizi özel tanımlı işlev aracılığıyla bunlara erişimi kolaylaştıran " özel depolar " dır.

Örneğin, elmaları ve muzları sayan bir sayaç, verilerimi doğrudan ifşa etmeyen özel bir mağaza oluşturabilirim. Bir işlev içinde, mağazayı "gizleyebilirim" ve herkese açık olarak ifşa etmek yerine yalnızca uygulamalarımda kullanmak istediğim işlevleri gösterebilirimset​ ve update. Bu, hatalı davranışlardan ve beklenmeyen değişikliklerden kaçınmak için, kod tabanı büyüdükçe gerçekten faydalı olabilecek şeylerdir.

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();

​Snippet'i küçük tutmak için "elmalar" ile ilgili işlevleri uygulamadığımı unutmayın Gerçek bir kullanım durumunda, çift koddan kaçınmak için update()kısmı , ancak bu blog yazısı bağlamında pek bir değeri olmayacağı için bu kısmı da atladım.

​Bir bileşende bağlarken, beklendiği gibi çalışır.

Ancak, her şey yolunda olsa bile npm run dev|build|checkWebstorm, bir TypeScript bloğunda kullanıldığında mağaza değerlerini türetemez script.

anyBunun Jetbrains Svelte eklentisinin başka bir sorunu olup olmadığını veya mağazanın tür olarak paketleyici tarafından türetilip türetilmediğini tam olarak bilmiyorum (bu, strictseçeneği yok sayar). Yine de, mağazanın bildirim türünü iyileştirerek sorunu çözmeyi tercih ediyorum.

Özel mağazam ev yapımı işlevlerimi ortaya çıkardığı için, aynı zamanda kök subscribeözelliği , beyanı da buna destek sağlamalıdır.

​Bu nedenle bence en kolay yol, mevcut Svelte Readabletipini .

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

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

Başlatma işlevinin dönüş türünü ayarlamak için bu yeni arayüzü kullanabilirim — initStore​— ve bu kadar.

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();

Sonsuzluğa ve
David'in ötesine

​​Daha fazla macera için beni Twitter'da takip edin .