It is common to use state management for some time. Third-party libraries also support typescript well. Just follow the configuration and you don’t want to implement it yourself.

Just today when I use Storage for data Storage, because I have been used to TS, I feel really awkward, so I implemented a TS version of Storage

Once you get used to typescript, you really can’t go back

LocalStorage, SessionStorage through Storage

Because localStorage and sessionStorage are the same, here defines a Storage base class, through the form of inheritance to implement localStorage and sessionStorage

  1. Type the aliasStorageType, although the parameters are fixed, but after all, ts is used, also to the constraint
  2. To implement the base classStorage
  3. inheritancelocalStorage 与 sessionStorage
type StorageType = 'localStorage' | 'sessionStorage'

/ / Storage base class
class Storage {
  static type: StorageType

  constructor(type: StorageType) {
    Storage.type = type}... }// localStorage
const Local = new Storage('localStorage')

// sessionStorage
const Session = new Storage('sessionStorage')
Copy the code

Second, implementation of Ts versionStorageType

Those of you who have used TS know that the function of TS is to enable the developer to find exceptions when writing through type checking, thus improving the programming efficiency. Therefore, we also need to define and declare the stored data in advance.

  1. Write stored data types in advance
  2. implementationStorageType 的 getKey setKey removeKey clearFour basic apis
interface Props {
  stringType: string
  arrayType: Array<number>}/ / Storage base class
class Storage {
  static type: StorageType

  constructor(type: StorageType) {
    Storage.type = type
  }

  /* This method gets the local storage value */
  getKey<U extends keyof Props>(key: U): Props[U] {
    let result: any = window[Storage.type].getItem(key)
    try {
      return JSON.parse(result)
    } catch (error) {
      return result
    }
  }

  /* This method sets the local store value */
  setKey<T extends Props, U extends keyof Props>(key: U, value: T[U]): void {
    const val = typeof value === 'string' ? value : JSON.stringify(value)
    window[Storage.type].setItem(key, val)
  }

  /* This method removes the specified local store value */
  removeKey(key: keyof Props): void {
    window[Storage.type].removeItem(key)
  }

  /* This method clears all locally stored values */
  clear() {
    window[Storage.type].clear()
  }
}
Copy the code

3. Test results

Test setKey getKey removeKey

// The type is correct
Session.setKey('stringType'.'1')
Session.getKey('stringType').replace

Session.setKey('arrayType', [])
Session.getKey('arrayType').push

// Type error
Session.setKey('stringType'[]),// Parameters of type "never[]" cannot be assigned to parameters of type "string"
Session.getKey('stringType').push // There is no attribute 'push' on type 'string'

Session.setKey('arrayType'.'1') // Parameters of type "string" cannot be assigned to parameters of type "number[]"
Session.getKey('arrayType').replace // Attribute "replace" does not exist on type "number[]"

// There is no type constraint
Session.getKey('test') // An argument of type "test" cannot be assigned to an argument of type "keyof Props"
Session.removeKey('test') // An argument of type "test" cannot be assigned to an argument of type "keyof Props"
Copy the code

Below is a screenshot of the source code