TypeScript：对象的类型为“未知”.ts(2571)

Question

我在 React Typescript 中使用 relay 和 graphQL 来获取用户列表。当我将道具从 ViewerUserList.tsx 传递到 UserList.tsx 时。我收到此错误：对象的类型为“未知”.ts(2571)

我在下面的文件中提到了我得到错误的地方

这是我的 ViewerUserList.tsx

import React from 'react';
import {graphql, QueryRenderer} from 'react-relay';
import UserList from './UserList'
import environment from "../relayEnvironment"

export default class ViewerUserList extends React.Component {
  render() {
    return (
      <QueryRenderer
        environment={environment}
        query={graphql`
          query ViewerQuery {
            viewer {
              id
              # Re-use the fragment here
              ...UserList_userData
            }
          }
        `}
        variables={{}}
        render={({error, props}) => {
          if (error) {
            return <div>Error!</div>;
          }
          if (!props) {
            return <div>Loading...</div>;
          }
          return (
            <div>
              <div>list for User {props.viewer.id}:</div> //I am getting error here on props
              <UserList userData={props.viewer} />
            </div>
          );
        }}
      />
    );
  }
}

这是 UserList.tsx

// OPTIONAL: Flow type generated after running `yarn relay`, defining an Object type with shape of the fragment:
import type {UserList_userData} from './__generated__/UserList_userData.graphql';
import User from './User'

import React from 'react';
import {graphql, createFragmentContainer} from 'react-relay';

type Props = {
  userData: UserList_userData,
}

class UserList extends React.Component<Props> {
  render() {
    const {userData: {apiVersion, users}} = this.props;

    return (
      <section>
        <ul>
          {users!.edges!.map(edge =>
            <User
              key={edge!.node!.id}
              /*We pass the data required by Todo here*/
              user = {edge!.node!}
            />
          )}
        </ul>
      </section>
    );
  }
}

export default createFragmentContainer(
  UserList,
  {
    userData: graphql`
      # As a convention, we name the fragment as '<ComponentFileName>_<PropName>'
      fragment UserList_userData on Query {
        users(
          first: 2147483647  # max GraphQLInt, to fetch all todos
        ) {
          edges {
            node {
              id,
              # We use the fragment defined by the child Todo component here
              ...User_user,
            },
          },
        },
        apiVersion
      }
    `,
  },
);

Answer 1

我遇到了类似的问题，但是出现了 try/catch 错误，所以我做了以下操作：

• 将“错误”声明为未知
• 创建一个 const 'e' = err
• 将他的类型从 unknow 更改为 ErrorEvent
• 使用“e”

为我工作?

    catch (err: unknown) {
    const e = err as ErrorEvent;
    return response.status(400).json({ Error: e.message });
    }

在你的情况下，你可以尝试：

1. 声明未知作为 TS 提及；
2. 获取另一个强制类型为 ErrorEvent 的 const；
3. 根据需要使用最后一个 const。

看看它是否有效。