给 LocalStorage, SessionStorage 添加Ts 校验

很常一段时间都在使用状态管理。三方库对 typescript 支持的也都很好。 按照配置走就可以了，也没有想过自己去实现它。

正好今天在使用 Storage 进行数据存储的时候，由于已经习惯了 ts， 感觉真的很别扭，于是自己实现了个Ts版的 Storage

用惯了 typescript 之后， 是真的回不去了

一、通过 Storage 实现 LocalStorage, SessionStorage

由于 localStorage 与 sessionStorage 都是相同的， 这里就定义了一个 Storage 的基类， 通过继承的形式来实现 localStorage 和 sessionStorage

1. 类型别名 StorageType， 虽然参数是固定的两个， 可毕竟用了 ts, 也给约束上
2. 实现 基类 Storage
3. 继承实现 localStorage 与 sessionStorage

type StorageType = 'localStorage' | 'sessionStorage'

// Storage 基类
class Storage {
  static type: StorageType

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

// localStorage
const Local = new Storage('localStorage')

// sessionStorage
const Session = new Storage('sessionStorage')

二、实现 Ts版本 StorageType

使用过 ts 的同学都知道，ts 的作用是通过类型检查 让开发者在编写的时候，就能发现异常，从而提高编程效率， 所以这里我们也需要提前对存储的数据进行定义声明。

1. 提前编写存储的数据类型
2. 实现 StorageType 的 getKey setKey removeKey clear 四个基本 api

interface Props {
  stringType: string
  arrayType: Array<number>
}

// Storage 基类
class Storage {
  static type: StorageType

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

  /* 本方法获取本地存储值 */
  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
    }
  }

  /* 本方法设置本地存储值 */
  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)
  }

  /* 本方法移除指定的本地存储值 */
  removeKey(key: keyof Props): void {
    window[Storage.type].removeItem(key)
  }

  /* 本方法清除所有的本地存储值 */
  clear() {
    window[Storage.type].clear()
  }
}

三、测试结果

对 setKey getKey removeKey 进行测试

// 类型正确
Session.setKey('stringType', '1')
Session.getKey('stringType').replace

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

// 类型错误
Session.setKey('stringType', []) // 类型“never[]”的参数不能赋给类型“string”的参数
Session.getKey('stringType').push // 类型“string”上不存在属性“push”

Session.setKey('arrayType', '1') // 类型“string”的参数不能赋给类型“number[]”的参数
Session.getKey('arrayType').replace // 类型“number[]”上不存在属性“replace”

// 未存在类型约束
Session.getKey('test') // 类型“"test"”的参数不能赋给类型“keyof Props”的参数
Session.removeKey('test') // 类型“"test"”的参数不能赋给类型“keyof Props”的参数

以下是源代码截图