给LocalStorage,SessionStorage添加Ts校验
发布网友
发布时间：2024-10-24 00:13
共1个回答
热心网友
时间：2天前
很常一段时间都在使用状态管理。三方库对TypeScript支持的也都很好。按照配置走就可以了，也没有想过自己去实现它。
正好今天在使用Storage进行数据存储的时候，由于已经习惯了ts，感觉真的很别扭，于是自己实现了个Ts版的Storage。
用惯了typescript之后，是真的回不去了
一、通过Storage实现LocalStorage,SessionStorage由于localStorage与sessionStorage都是相同的，这里就定义了一个Storage的基类，通过继承的形式来实现localStorage和sessionStorage
类型别名StorageType，虽然参数是固定的两个，可毕竟用了ts,也给约束上
实现基类Storage
继承实现localStorage与sessionStorage
typeStorageType='localStorage'|'sessionStorage'//Storage基类classStorage{statictype:StorageTypeconstructor(type:StorageType){Storage.type=type}...}//localStorageconstLocal=newStorage('localStorage')//sessionStorageconstSession=newStorage('sessionStorage')二、实现Ts版本StorageType使用过ts的同学都知道，ts的作用是通过类型检查让开发者在编写的时候，就能发现异常，从而提高编程效率，所以这里我们也需要提前对存储的数据进行定义声明。
提前编写存储的数据类型
实现StorageType的getKeysetKeyremoveKeyclear四个基本api
interfaceProps{stringType:stringarrayType:Array<string>}//Storage基类classStorage{statictype:StorageTypeconstructor(type:StorageType){Storage.type=type}/*本方法获取本地存储值*/getKey<UextendskeyofProps>(key:U):Props[U]{letresult:any=window[Storage.type].getItem(key)try{returnJSON.parse(result)}catch(error){returnresult}}/*本方法设置本地存储值*/setKey<TextendsProps,UextendskeyofProps>(key:U,value:T[U]):void{constval=typeofvalue==='string'?value:JSON.stringify(value)window[Storage.type].setItem(key,val)}/*本方法移除指定的本地存储值*/removeKey(key:keyofProps):void{window[Storage.type].removeItem(key)}/*本方法清除所有的本地存储值*/clear(){window[Storage.type].clear()}}三、测试结果对setKeygetKeyremoveKey进行测试
//类型正确Session.setKey('stringType','1')Session.getKey('stringType').replaceSession.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"”的参数不能赋给类型“keyofProps”的参数Session.removeKey('test')//类型“"test"”的参数不能赋给类型“keyofProps”的参数以下是源代码截图
