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|checkทุกอย่างจะปกติดี แต่ Webstorm ก็ไม่สามารถรับค่าที่เก็บได้เมื่อใช้ในscriptบล็อก TypeScript

ฉันไม่ทราบแน่ชัดว่าเป็นปัญหาอื่นของปลั๊กอิน Jetbrains Svelte หรือไม่ หรือร้านค้าได้รับเป็นanyประเภทโดย Bundler (ซึ่งจะละเว้นstrictตัวเลือกนี้) อย่างไรก็ตาม ฉันต้องการแก้ไขปัญหาโดยการปรับปรุงประเภทการประกาศของร้านค้า

เนื่องจากร้านค้าแบบกำหนดเองของฉันเปิดเผยฟังก์ชันโฮมเมดของฉัน แต่ยังรวมถึง subscribeฟีเจอร์ การประกาศจึงต้องให้การสนับสนุนด้วยเช่นกัน

ดังนั้นวิธีที่ง่ายที่สุดในความคิดของฉันคือการสืบทอด 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