手把手教你用TypeScript封装window.localstorage

2,712 阅读4分钟

目的

使用 TypeScript 来对原生的window.localstorage 进一步的封装,新增多种api接口,来更好的使用,增强了语义化。

开始

我使用TypeScript-library-starter来帮助我们快速初始化一个 TypeScript 项目,它是一个开源的 TypeScript 开发基础库的脚手架工具,可登录官网了解详细使用。

使用方式

git clone https://github.com/alexjoverm/typescript-library-starter.git ts-storage
cd ts-storage

npm install

按照提示,安装完毕即可,但由于该项目长期没更新,里面的插件太旧了,也可结合项目的实际情况更新下插件即可。

目录结构

安装完毕之后,生成以下项目结构

├── CONTRIBUTING.md
├── LICENSE 
├── README.md
├── code-of-conduct.md
├── node_modules
├── package-lock.json
├── package.json
├── rollup.config.ts // rollup 配置文件
├── examples // 运行测试页面
├── src // 源码目录
├── test // 测试目录
├── tools 
├── tsconfig.json // TypeScript 编译配置文件
└── tslint.json // TypeScript lint 文件

package.json里面,TypeScript library starter中帮我们配置了一些 npm scripts

  • npm run lint: 使用 TSLint 工具检查 src 和 test 目录下 TypeScript 代码的可读性、可维护性和功能性错误;
  • npm test: 运行 jest 工具跑单元测试;
  • npm run build: 运行 rollup 编译打包 TypeScript 代码 ;

一切准备就绪,开始代码编写。

编写入口文件

在src 目录下的文件,先创建一个 index.ts 文件,作为整个库的入口文件,然后我们先定义一个 BetterStorage 方法,并把它导出,如下:

import BetterStorage from "./storage";
export default BetterStorage

由于这是小的项目,所以我将主代码放在storage.ts里面,通过命名 BetterStorage 类名,在类里面实现各类方法,最后import出去,如下:

class BetterStorage {
  key: string
  readonly storage: any // 只读属性,外部不能修改
  constructor(key?: string) {
    // 设置全局的key
    this.key = key ? key : DEFAULT_KEY
    this.storage = window.localStorage
  }
  /*
  各类方法
  */
  /*
  获取
  @param: key 可选
  @return: 获取值
   */
  get(key?: string): string {
    let _key = key ? key : this.key // 优先使用自己存入的key值
    return this.storage.getItem(_key)
  }
}
export default BetterStorage

剩下的编写,我这里省去了,其实都是很简单的js代码编写,在这里没必要讲。

运行demo

这里我通过构建工具 webpack 的模块热替换 webpack-dev-server 来运行我的demo。

依赖安装

先安装一下需要的依赖包

    "webpack": "^5.38.1",
    "webpack-dev-server": "^3.11.0",
    "ts-loader": "^9.2.3",
    "tslint-loader": "^3.5.4",
    "html-webpack-plugin": "^5.3.1",

其中,webpack 是打包构建工具,使用 webpack 插件webpack-dev-server 来搭建实时重新加载的开发服务器,HtmlWebpackPlugin来自动生成一个 HTML5 文件,ts-loadertslint-loaderwebpack 需要的 TypeScript 相关 loader

编写 webpack 配置文件

const HtmlWebpackPlugin = require('html-webpack-plugin')
const devConfig = {
    mode: "development",
    entry: {
      app: './examples/app.ts',
    },
    devtool: "eval-cheap-module-source-map",
    plugins: [
      new HtmlWebpackPlugin({
        template: "./examples/index.html",
        title: "ts-storage"
      })
    ],
    resolve: {
      extensions: ['.ts', '.js', '.json']
    },
    module: {
        rules: [
          {
            test: /\.ts$/,
            enforce: 'pre',
            use: [
              {
                loader: 'tslint-loader',
              }
            ]
          },
          {
            test: /\.tsx?$/,
            use: [
              {
                loader: 'ts-loader',
                options: {
                  transpileOnly: true
                }
              }
            ]
          }
        ]
    },
    devServer: {
        contentBase: './dist',
        port: 8900,
        compress: true,
        hot: true
    },
}
module.exports = devConfig

编写测试文件

由于我的项目是使用 typescript-library-starter 初始化的,已经内置了 Jest 的安装,但是安装的版本却不是最新的,我们可以对 package.json 中的相关依赖版本做修改,重新安装。

{
    "jest": "^27.0.4",
    "jest-config": "^27.0.4",
    "ts-jest": "^27.0.3",
}

开始编写测试文件

这里展示部分的测试文件

import BetterStorage from '../src'
describe('set', () => {
  const bs = new BetterStorage('name')
  test('set storage', () =>{
    const val = 'usa'
    expect(bs.set(val))
  })
  test('set storage', () =>{
    expect(bs.set).toThrow()
  })
})

运行测试

npm test

测试结果

截屏2021-08-03 下午3.34.35.png

成功完成了测试,让测试覆盖率达到目标 100%。

代码打包部署

打包

这里我是用 rollup 来打包我的项目,在打包前我要在 rollup.config.ts 中稍微修改一下配置项即可

const libraryName = 'ts-better-storage' // package.json 的名字保持一致

export default {
  input: `src/index.ts`,  // 入口文件
  /*
  省略代码
  */
}

修改 package.json

由于我们已经在 rollup.config.ts 中修改了 libraryName 为 ts-better-storage, 那么在 package.json 文件中你需要做相关的修改:

  "main": "dist/ts-better-storage.umd.js",
  "module": "dist/ts-better-storage.es5.js",
  "typings": "dist/types/index.d.ts",

一切准备就绪,开始运行打包

npm run build

部署

打包完毕之后,就可以开始在 npm 上部署我的代码了。如果你还没有 npm 账号,那么需要先去官网注册。注册完成后,可以去终端执行 npm login 登录,如果是首次注册,必须是要验证完毕你的邮箱之后再进行登陆,这个步骤非常重要,决定你最终能否发布成功。

在发布之前,你还要先验证下自己的包命名是否被占用,可以运行以下代码进行查验

npm view te-better-storage

假如返回json格式的包信息,就证明这个命名已经被占用;假如返回的是 404 ,就证明此命名没有被占用,就可以使用了。

运行:

npm publish

完成代码部署,你就可以在npm官网上看到自己发布的包。

引用

然后就可以在你的项目上使用自己的包了

npm install ts-better-storage -D

代码仓

最后奉献我的代码仓,别忘了你的小星星。ts-better-storage