Svelte Custom Stores Khai báo TypeScript

Khai báo các loại cửa hàng hải quan như thế nào?

​Svelte cung cấp một số khái niệm cửa hàng dễ sử dụng. Một trong số đó là “ cửa hàng tùy chỉnh ” giúp làm xáo trộn dữ liệu được lưu trữ phản ứng và truy cập dữ liệu đó thông qua một tập hợp các chức năng được xác định tùy chỉnh một cách thuận tiện.

Ví dụ: bộ đếm đếm táo và chuối, tôi có thể tạo một cửa hàng tùy chỉnh không hiển thị trực tiếp dữ liệu của mình. Trong một chức năng, tôi có thể “ẩn” cửa hàng và chỉ hiển thị các chức năng tôi muốn sử dụng trong ứng dụng của mình thay vì hiển thị công khaiset​ và update. Điều này để tránh các hành vi sai trái và những thay đổi không mong muốn, điều có thể thực sự hữu ích khi cơ sở mã phát triển.

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

Lưu ý rằng tôi đã không triển khai các chức năng liên quan đến “quả táo” để giữ cho đoạn trích nhỏ. Trong trường hợp sử dụng thực tế, tôi thậm chí có thể trích xuất update()phần đó thành một hàm để tránh mã kép, nhưng tôi cũng bỏ qua phần này vì nó sẽ không có nhiều giá trị trong bối cảnh bài đăng trên blog này.

​Khi ràng buộc trong một thành phần, nó hoạt động như mong đợi.

Tuy nhiên, ngay cả khi npm run dev|build|checktất cả đều ổn, Webstorm không thể lấy được các giá trị lưu trữ khi được sử dụng trong scriptkhối TypeScript​.

​Tôi không biết chính xác liệu đó có phải là một vấn đề khác của plugin Jetbrains Svelte hay cửa hàng được tạo ra dưới dạng​ loại anybởi trình đóng gói (sẽ bỏ qua stricttùy chọn​). Tuy nhiên, tôi muốn khắc phục sự cố bằng cách cải thiện loại khai báo của cửa hàng.

Bởi vì cửa hàng tùy chỉnh của tôi hiển thị các chức năng tự chế của tôi, nhưng cũng là subscribetính năng , khai báo của nó cũng phải cung cấp hỗ trợ cho nó.

​Do đó, theo tôi, cách dễ nhất là kế thừa Readablekiểu .

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

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

Tôi có thể sử dụng giao diện mới này để đặt kiểu trả về của hàm khởi tạo — initStore​— thế là xong.

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

​Đến vô tận và xa hơn nữa
David

Để biết thêm những cuộc phiêu lưu, hãy theo dõi tôi trên Twitter .