TypeScript封装Storage方法时any类型传参触发缺少key参数报错的解决

TypeScript 抛出「未提供'key'对应的入参」的核心原因有两点：

• 你将useSessionStorage的入参args定义为了any[]，这是一个长度完全不确定的普通数组。TypeScript 做类型校验时，无法确认该数组展开后，能覆盖useStorage中除第一个storage参数外的所有必填位置参数（key、initialValue都是无默认值的必填项），因此会判定可能存在参数缺失。
• 原代码中typeof window !== 'undefined' && sessionStorage的表达式，会被TS推断为false | Storage类型，非浏览器环境下表达式求值结果为false时，相当于把布尔值传到了本应接收Storage实例的storage参数位置，本身存在语义不匹配的问题。

• 临时快速消错（适合快速迭代场景）：在展开参数时做类型断言，跳过TS对数组长度的校验。参考代码：

  export const useSessionStorage = (...args: any[]) => 
    useStorage(
      // 替换逻辑与为三元表达式，避免传入false值
      typeof window !== 'undefined' ? window.sessionStorage : ({} as Storage),
      // 断言参数为可展开结构，绕过长度检查
      ...(args as any)
    )
  

  注意这种写法会丢失参数的类型提示，不适合长期维护的项目使用。

• 规范类型定义（生产环境推荐）：把args的类型从松散的any[]，改为和useStorage除第一个storage外的参数完全匹配的固定元组类型，从根源上解决参数长度不确定的问题。参考代码：

  // 复用useStorage的参数类型，避免重复维护参数结构
  type UseStorageArgs = Parameters<typeof useStorage>
  type UseSessionStorageArgs = UseStorageArgs extends [any, ...infer Rest] ? Rest : never
  
  export const useSessionStorage = (...args: UseSessionStorageArgs) => {
    // 守卫判断前置，非浏览器环境直接返回和useStorage兼容的结构
    if (typeof window === 'undefined') {
      return null
    }
    // 传入真实的sessionStorage实例
    return useStorage(window.sessionStorage, ...args)
  }
  

  这种写法下TS能完整感知每个参数的数量、类型，不仅不会再报参数缺失的错误，还能在调用useSessionStorage时获得完整的参数类型提示。

• 额外优化建议：把守卫逻辑耦合在传参表达式里的写法，会要求useStorage内部额外处理传入false的异常场景。直接把守卫判断前置到useSessionStorage内部，能让核心的useStorage逻辑保持纯粹，不需要兼容非Storage类型的异常入参。

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