如何从Promise返回值提取Chrome扩展ID并存入数组或Map？

问题场景 #

已通过Playwright完成以下操作：打开chrome://extensions页面并开启开发者模式：

browserPage = await browserContext.newPage();
await browserPage.goto("chrome://extensions");
await browserPage.locator('text=Developer mode This setting is managed by your administrator. >> #knob').click();

调用allTextContents()可获取带ID: 前缀的扩展ID列表：

await browserPage.locator('#extension-id').allTextContents().then(id => {
    console.log(id);
});

输出结果：

[
  'ID: kjkkkbelkplchpnbmhlmcbfmgjbkdpkj',
  'ID: cciedebhmaekejckbbnjedloddbkfbpd'
]

尝试提取纯ID并存入数组时触发TypeScript类型错误，错误代码：

const ids: never[] = []
await browserPage.locator('#extension-id').allTextContents().then(id => {
    ids.push(id);
});

错误提示：

Error: Argument of type 'string[]' is not assignable to parameter of type 'never'.

解决方案 #

1. 修正数组类型 #

never[]类型的数组无法容纳任何值，而allTextContents()返回的是string[]，需要把数组类型定义为string[]：

const ids: string[] = [];

2. 提取纯ID并填充数组 #

遍历返回的带前缀字符串，通过replace去掉ID: 前缀后存入数组，推荐用map方法处理：

// 直接获取处理后的纯ID数组
const pureIds = (await browserPage.locator('#extension-id').allTextContents())
  .map(item => item.replace('ID: ', ''));

console.log(pureIds); // 输出: ["kjkkkbelkplchpnbmhlmcbfmgjbkdpkj", "cciedebhmaekejckbbnjedloddbkfbpd"]

如果要保留链式调用写法，需用扩展运算符将每个ID单独推入数组：

const ids: string[] = [];
await browserPage.locator('#extension-id').allTextContents().then(idList => {
  const pureIds = idList.map(item => item.replace('ID: ', ''));
  ids.push(...pureIds);
});

3. 存入Map的实现 #

若要将纯ID存入Map，可自定义键名映射：

const idList = await browserPage.locator('#extension-id').allTextContents();
const extensionMap = new Map<string, string>();

idList.forEach((item, idx) => {
  const pureId = item.replace('ID: ', '');
  extensionMap.set(`extension-${idx + 1}`, pureId);
});

// 示例输出: Map(2) {"extension-1" => "kjkkkbelkplchpnbmhlmcbfmgjbkdpkj", "extension-2" => "cciedebhmaekejckbbnjedloddbkfbpd"}
console.log(extensionMap);

内容的提问来源于stack exchange，提问作者ramkumar-yoganathan