读取FileSystemEntry条目的正确方法 解决TS报错及API替代方案咨询

• 你当前使用的是早期Chrome推出的非标准「文件与目录条目API」，该API从始至终未被W3C正式标准化，因此MDN一直标注为实验性状态。
• 目前W3C已经推出了标准化的File System Access API作为官方替代，旧API仅为了向后兼容被浏览器保留实现，不再进行功能更新和标准化推进，相当于处于隐性废弃状态，所以会给你“既实验又疑似废弃”的感知。
• TypeScript报错是因为旧API不属于Web标准，默认的TS核心类型库没有包含对应的类型定义，临时兼容可以安装@types/filesystem第三方类型包解决报错。

官方推荐使用已经标准化的File System Access API实现目录读取功能，示例代码如下：

async function readDirectory(handle: FileSystemDirectoryHandle): Promise<(FileSystemFileHandle | FileSystemDirectoryHandle)[]> {
  const entries: (FileSystemFileHandle | FileSystemDirectoryHandle)[] = []
  // 直接用异步迭代器遍历目录条目
  for await (const entry of handle.values()) {
    entries.push(entry)
  }
  return entries
}

新旧API核心差异：

• 旧API基于回调实现异步逻辑，新API原生支持Promise与异步迭代器，代码更简洁易维护
• 新API的类型定义已经被TypeScript默认内置，不会出现类型报错问题
• 新API还支持文件写入、持久化授权、跨上下文访问等更多扩展能力，兼容性和实现一致性远高于旧版API

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