声明字符串类型仅适用于 as-syntax (TypeScript - React)

Question

我正在尝试使用 React 中的 TypeScript 将字符串类型分配给“播放器”，但它不能像选项 1 中那样简单地使用 player: string。

选项 1：

Object.values(data.val()).forEach((player: string) => {
          newPlayers.push(player);
        });

上述方式产生一个ts err：

'(player: string) => null' 类型的参数不能分配给'(value: unknown, index: number, array: unknown[]) => null' 类型的参数。 参数 'player' 和 'value' 的类型不兼容。 类型 'unknown' 不可分配给类型 'string'.ts(2345)

但使用 as 语法，如下所示，可以更正它。这是为什么呢？

选项 2：

DB_players.once('value', (data) => {
      
      // Fetch players who signed up
      const newPlayers: string[] = [];

      if (data.val() ) {
        Object.values(data.val()).forEach((player) => {
          newPlayers.push(player as string); 
        });

        setPlayers(newPlayers); // save the new player list
      }
    });

Answer 1

您的 map 函数中 player 的类型不是您应该分配的。类型来自您要映射的数组的元素类型。

Typescript 认为data.val() 返回的对象的值是unknown 类型。这是您需要修复的错误。最好在创建data 对象的代码中将其修复得更高，方法是说data.val() 返回Record<string, string> 或其他带有字符串值的类型。作为创可贴，您可以通过编写 (Object.values(data.val()) as string[]) 告诉 typescript 您正在将其用作字符串数组，这样您的错误就会消失。

与打字稿错误无关，@kind 用户是对的，如果您没有返回任何内容，则不应使用 map。如果newPlayers 是一个现有数组，其中已经包含您要添加的数据，那么您可以保留您的push，但在forEach 循环中执行此操作。如果这是您创建newPlayers 数组的位置，并且它为data.val 中的每个玩家提供一个条目，那么您可以从map 的返回值创建它——除非您实际上没有进行任何映射在这里，您只是返回相同的值。

这个单行代码与您的循环执行相同的操作，即将data.val() 中的所有名称附加到现有数组。 ... 表示它们将作为单独的条目添加。

newPlayers.push( ...Object.values(data.val()) as string[] );

如果您发布更多代码 -- data 来自哪里以及 newPlayers 是在哪里初始化的，那么我可以给您一个更好的解决方案。

编辑：

创建数组，直接使用对象值即可。

const newPlayers = Object.values(data.val()) as string[];

或

setPlayers( Object.values(data.val() ) as string[] );

Answer 2

问题是 Object.values(data.val()) 不返回字符串数组。

当您在箭头函数中跳过播放器类型时，它被隐式视为任何类型，这与您尝试迭代的类型兼容。

const newPlayers: string[] = [];
let toto = {a: "test", b: "hello"};
Object.values(toto).map((player: string) => {
    newPlayers.push(player);
});

Playground