TypeScript中?: () =>语法含义及自定义StorageType实现方法

语法含义拆解 #

• ?: 表示该属性是可选的：配置IAuthTokenInterceptorConfig时，你可以选择不提供getStorage，此时模块会使用默认的存储实现（通常是浏览器的localStorage或sessionStorage）。
• () => StorageType 表示该属性是一个无参数的函数，函数的返回值必须是符合StorageType类型的对象——也就是包含get、set、remove三个核心方法的存储实例。

这种设计的核心目的是允许你替换模块默认的存储层，比如改用内存存储、加密存储、IndexedDB，甚至Node.js环境下的文件存储等。

自定义存储的实现步骤 #

1. 明确StorageType的类型约束 #

根据你的描述，StorageType的类型定义大概是这样的（如果模块没有导出，你可以自己定义来做类型校验）：

type StorageType = {
  // 根据key获取存储值，返回字符串或null
  get: (key: string) => string | null;
  // 存储key-value对
  set: (key: string, value: string) => void;
  // 删除指定key的存储值
  remove: (key: string) => void;
};

2. 实现自定义存储实例 #

以内存存储为例，实现一个简单的自定义存储：

// 用全局对象模拟内存存储
const memoryStorage: StorageType = {
  get: (key) => {
    return window.__authStorage?.[key] || null;
  },
  set: (key, value) => {
    if (!window.__authStorage) {
      window.__authStorage = {};
    }
    window.__authStorage[key] = value;
  },
  remove: (key) => {
    delete window.__authStorage?.[key];
  }
};

如果需要加密存储，你可以在set时加密字符串，get时解密，核心是保持三个方法的签名符合StorageType。

3. 配置拦截器时传入getStorage #

在创建IAuthTokenInterceptorConfig配置对象时，添加getStorage属性，返回你的自定义存储实例：

const authInterceptorConfig: IAuthTokenInterceptorConfig = {
  // 其他必填配置项（比如token键名、拦截的API路径等）
  tokenKey: 'auth_token',
  // 传入自定义存储的获取函数
  getStorage: () => memoryStorage
};

也可以直接内联函数，简化写法：

const authInterceptorConfig: IAuthTokenInterceptorConfig = {
  tokenKey: 'auth_token',
  getStorage: () => ({
    get: (key) => localStorage.getItem(key),
    set: (key, value) => localStorage.setItem(key, btoa(value)), // 这里对值做base64加密
    remove: (key) => localStorage.removeItem(key)
  })
};

4. 模块内部的工作逻辑（帮助理解） #

当模块需要操作token时，会先调用getStorage()获取存储实例，然后通过这个实例的get/set/remove方法来完成token的读取、存储和删除。这样就实现了存储层的解耦，让你可以灵活替换存储方案。

内容的提问来源于stack exchange，提问作者MrLister