React TypeScript导入自定义Storage类调用方法报typeof Storage属性不存在错误

你在storage.ts中定义的setLocalStorageItem、getLocalStorageItem都是类实例方法，这类方法只会在通过new实例化生成对象后，挂载在实例上，不会直接绑定到类本身（也就是TS报错中提到的typeof Storage类型）。直接用类名调用实例方法，自然会触发“属性不存在”的类型校验错误。

• 方案1：实例化类后再调用方法（工具类场景推荐）
  导入类之后先生成类实例，再通过实例调用对应方法，参考代码：

  import Storage from './utilities/storage';
  
  // 初始化Storage类的可用实例
  const storageUtil = new Storage();
  // 通过实例调用方法
  storageUtil.setLocalStorageItem("test", "test");
  

  如果不想在每个使用该工具的文件里重复写初始化逻辑，可以在storage.ts文件的最后，导出一个提前创建好的单例实例，其他文件直接导入这个实例即可使用。
• 方案2：将方法改为静态方法，适配直接调用类名的写法
  如果你不需要管理实例状态，就是想直接用类名调用方法，只需要给类内的方法加上static关键字，将方法直接绑定到类本身即可，修改后的storage.ts代码：

  export default class Storage {
      // 加static标记为静态方法，直接归属类本身
      static setLocalStorageItem(key: string, value: string) {
          window.localStorage.setItem(key, JSON.stringify(value));
      }
  
      static getLocalStorageItem(key: string) {
          const value = window.localStorage.getItem(key);
          if (value) {
              return JSON.parse(value);
          } else {
              return JSON.parse('');
          }
      }
  }
  

  修改完成后，你原来写的Storage.setLocalStorageItem("test", "test")代码就可以正常通过TS编译校验，逻辑也能正常运行。

浏览器环境本身内置了全局的Storage构造函数，如果你后续遇到类型指向混乱的问题，可以将自定义的类改名（比如改成AppStorage），避免和全局内置构造函数重名带来的类型识别偏差。

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