时间戳

首页 > 解决方案 > 声明字符串类型仅适用于 as-syntax (TypeScript - React)

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

问题描述

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

选项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' 的类型不兼容。类型“未知”不可分配给类型“字符串”.ts(2345)

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

选项 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
      }
    });

标签： reactjstypescripttypes

解决方案

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

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

与打字稿错误无关，@kind 用户是正确的，map如果您不返回任何内容，则不应使用。如果newPlayers是一个现有数组，其中已经包含您要添加的数据，那么您可以保留您的push，而是在forEach循环中执行。如果这是您创建newPlayers数组的地方，并且它为每个玩家提供一个条目，data.val那么您可以从 a 的返回值创建它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[] );

推荐阅读