TypeScript中如何正确获取Chrome本地存储对象属性？

错误根源 #

chrome.storage.local.get是异步方法，它本身的返回值是void，根本没法直接赋值给你定义的options变量。而且回调里的返回值也传不到外部的options里，所以你原来的写法既不符合类型要求，逻辑上也拿不到存储的数据。

正确实现方式 #

方法1：用回调处理异步结果 #

把依赖options的逻辑全部放到回调函数里，等数据拿到手再执行：

// 先定义类型，方便复用和类型检查
type Options = {
  url: string;
  appId: string;
  appEnabled: boolean;
};

chrome.storage.local.get('options', (data) => {
  // 断言类型，让TS识别data.options的结构
  const options = data.options as Options;
  if (options.appEnabled) {
    addOverlay(options.appId);
  }
});

方法2：用async/await（更清爽） #

Chrome 88及以上版本的存储API支持Promise调用，用async/await能让异步代码看起来像同步的：

type Options = {
  url: string;
  appId: string;
  appEnabled: boolean;
};

// 包裹在async函数里执行
async function init() {
  const data = await chrome.storage.local.get('options');
  const options = data.options as Options;
  if (options.appEnabled) {
    addOverlay(options.appId);
  }
}

init();

额外提示 #

如果怕存储里没有options这个键导致报错，可以加个默认值兜底：

// 回调版带默认值
chrome.storage.local.get(
  { options: { url: '', appId: '', appEnabled: false } },
  (data) => {
    const options = data.options as Options;
    // 后续逻辑
  }
);

// async/await版带默认值
const data = await chrome.storage.local.get({
  options: { url: '', appId: '', appEnabled: false }
});

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