angular - 在映射期间类型 '{}' 不能分配给类型 'object[]' 并在 typescript 中减少

Question

我有一个数组中的文件名列表。我的目标是读取数组中的所有文件并将它们从字符串转换为 json。
这是 readAFile() API 的签名。

readAFile(fileName: string, encoding: 'utf-8'): any {
  return fs.readFileSync(filename, {encoding: encoding});
}

现在，我有一个数组，其中包含要读取的所有文件的绝对路径 files = ['/path/to/file1', '/path/to/file2', '/path/to/file3'].
我有另一个函数将此列表中的每个文件名映射到 readAFile() 并读取它们并将它们转换为 JSON，如下所示:

readAllFiles(files: string[]): object[] {
  **return** files.map((aFile) => {
    return readAFile(aFile); // this api's return type is 'any'
  })
  .reduce((listOfJson, dataOfOneFile) => {
     const jsonData = JSON.parse(dataOfOneFile);
     listOfJson.push(jsonData);
     return listOfJson;
  }, []);
}

我也想包括文件名，这是我添加的

  files.map((aFile) => {
    const mappedData = {};  // Added this
    mappedData['data'] = readAFile(aFile); // the data now goes into this object
    mappedData['inputFile'] = aFile;
    return mappedData;    <------ ERROR: Type '{}' is not assignable to type 'object[]'.
  })

我认为解决此问题的简单方法是 return [mappedData];。我不确定我是否理解正确。有人可以帮助我理解为什么这是一个错误吗？此外，欢迎任何替代建议。
编辑 1:在 readAllFiles() 中添加了缺少的返回语句。打字错误。

Answer 1

readAllFiles 中的return 表达式非常复杂，很难看出错误的来源。我们把它分成中间部分:这里是typescript playground中适合查看和编译的形式(我必须提供伪造的 fs 声明，因为节点类型在那里不可用，并且还必须修复 readAFile 的 encoding 参数):

declare var fs: { readFileSync(filename: string, { encoding: string }) };

function readAFile(fileName: string, encoding: string): any {
  return fs.readFileSync(fileName, {encoding: encoding});
}

function readAllFiles(files: string[]): object[] {
  const mf = files.map((aFile) => {
    const mappedData = {};  // Added this
    mappedData['data'] = readAFile(aFile, 'utf8'); // the data now goes into this object
    mappedData['inputFile'] = aFile;
    return mappedData; 
  });

  const rf = mf.reduce((listOfJson, dataOfOneFile) => {
     const jsonData = JSON.parse(dataOfOneFile); // <-- first error is here 
              // JSON.Parse expects string, but dataOfOneFile is an object now

     listOfJson.push(jsonData); // <-- and the real error is here
                // Property 'push' does not exist on type '{}'.
     return listOfJson;
  }, []);

  return rf;
}

当 reduce 的最后一个参数作为空数组 - [] 时，为什么说 Property 'push' does not exist on type '{}'，它肯定应该有一个 push 方法吗？

你看，reduce 是 declared as overloaded function with 2 variants :

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: ReadonlyArray<T>) => T,
        initialValue?: T): T;

和

reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: ReadonlyArray<T>) => U,
         initialValue: U): U;

第一个有 initalValue 与数组元素类型相同，T，无论出于何种原因，它都是编译器选择的声明没有明确给出类型，因此在您的代码中，initialValue 和 previousValue 的类型与数组元素的类型相同 - {}。

为什么当您传递空数组 [] 时它不提示，而它期望空对象 {}？

因为空数组与之兼容——数组在javascript中是对象，空对象根本没有任何属性，所以任何数组都可以赋值给它。

如何让reduce返回不同的类型？

您可以告诉编译器您需要 reduce 的第二个变体 - 具有不同 initialValue 类型的变体。如果您希望它是 object[]，您可以将它作为 reduce 的显式通用参数提供:

 const rf = mf.reduce<object[]>((listOfJson, dataOfOneFile) => {

但是，当您并没有真正将列表缩减为单个值时，为什么要使用 reduce？如果您需要从一个列表中创建另一个列表，一个 map 就可以了:

function readAllFiles(files: string[]) {
  return files.map((aFile) => {
    return {
      data: JSON.parse(readAFile(aFile, 'utf8')),
      inputFile: aFile
    }
  });
}

类型推断为

function readAllFiles(files: string[]): { data: any; inputFile: string; }[]