TypeScript 封装并发布一个库

开始之前

使用TypeScript封装一个定时清除localStore的方法。项目中token的信息保存在了localStorage里面了。localStorage中除非手动删除不然就一直留存在浏览器里面。另一个是当token过期时，只有发起一个请求才能感知，如果提前从浏览器中间将要过期的token删除，通知用户重新登录，就能节省一次链接。

NPM 初始化项目

npm init

根据自己的情况设置 name, version, description, entry point 以及后面的内容。
这里在的entry point 指的是以后使用这个包要引入的文件，不是编译的入口文件

图1

完成后创建一个tsconfig.json的文件

tsc --init

创建完成需要配置几个配置项

"declaration": true, 编译后生成ts声明文件
"outDir": "./dist", 编译后文件输出路径
在 compilerOption 属性外配置, 在打包的时候排除的文件
```
"exclude": [
  "./dist",
]
```
安装 TypeScript 依赖，typescript 只在编译的时候用到
```
npm install typescript -D
```

ExpiredStorage 实现

class ExpiredStorage{
    private source:Storage;
    constructor(source:Storage = window.localStorage){
        this.source = source;
        this.initRun();
    }
    initRun(){
        const reg = new RegExp('__expires__');
        let data = this.source;
        let list =  Object.keys(data);
        if(list.length > 0){
            list.map((key, v)=>{
                if(!reg.test(key)){
                    let now  = Date.now();
                    let expire = data[`${key}__expires__`] || Date.now() + 1;
                    if(now >= expire){
                        this.remove(key);
                    }
                }
            })
        }
    }
    set(key:string,value:any,expired:number){
        let source = this.source;
        source[key] = JSON.stringify(value);
        if(expired && expired > 0){
            source[`${key}__expires__`] = Date.now() + expired
        }
    }
    get(key:string):any{
        const source = this.source,
        expired = source[`${key}__expires__`]|| Date.now()+1;
        const now = Date.now();
    
        if ( now >= expired ) {
            this.remove(key);
            return;
        }
        const value = source[key] ? JSON.parse(source[key]) : source[key];
        return value;
    }
    remove(key:string){
        const data = this.source,
            value = data[key];
        delete data[key];
        delete data[`${key}__expires__`];
    }
}

export = ExpiredStorage;

编写完成后在运行 tsc 命令会在根目录下生成 dist 文件夹；js 文件是编译生成的文件，.d.ts是typescript的声明文件。

测试

在根目录下创建测试文件夹 example，创建测试文件，并在tsconfig.json中将该文件添加至 exclude 中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../dist/expired-storage.js"></script>
    <script>
        let ls = new ExpiredStorage();
        ls.set('userId','zhangsan',5000);
        window.setInterval(()=>{
            console.log(ls.get("userId"));
        },1000)
    </script>
</body>
</html>

上传至NPM

首先到NPM网站进行注册
在控制台下运行 npm login 进行登录
根目录下添加 .npmignore 文件, 指定要忽略的文件入添加的测试文件夹
```
/example
```
运行 npm publish 发包