TypeScript - 类型上不存在属性（但存在）？

Posted 2023-02-22

【中文标题】TypeScript - 类型上不存在属性（但存在）？

【英文标题】：TypeScript - property does not exist on type (but it exists)?

【发布时间】：2021-09-10 15:21:43

【问题描述】：

我有一个包含一些用户数据的用户类型。还有一种用户响应，基本上是users: User[]。到目前为止，一切都很容易。问题是我必须将 UsersResponse 作为道具传递，然后我无法访问.users。这是为什么呢？

Link to Codesandbox.

部分代码：

export type User = 
  login: string;
  password: string;


export type UsersResponse = 
  users: User[];


export interface MyProps 
  props: UsersResponse;


const App = (props: MyProps): any => 
  console.log('props: ', props.users);

  return (
    <>foo</>
  );

Console.log 失败，因为 Property 'users' does not exist on type 'MyProps'.

但这对我来说毫无意义，因为 MyProps 返回 UsersResponse 并且它有 users。我在这里想念什么？我该如何解决？我知道这很明显，或者我打错了，但真的，我找不到。注意我必须使用props: type，因为这种格式是由我正在使用的框架强制使用的。

【问题讨论】：

不应该是MyProps.props吗？

【参考方案1】：

你在MyProps界面设置了错误的key。

而且你也不需要声明UsersResponse。

试试这个：

export type User = 
  login: string;
  password: string;


export interface MyProps 
  users: User[];


const App = (props: MyProps): any => 
  console.log('props: ', props.users);

  return (
    <>foo</>
  );

【讨论】：

我想坚持使用UsersResponse，因为我将在许多组件中使用它。最糟糕的部分是我无法按照您的建议将props 替换为users，因为道具以props: data 的形式出现，我收到此错误：Type ' props: any; ' is not assignable to type 'MyProps'. :( 还有其他提示吗？不应该我原来的例子行得通吗？

在这种情况下，只需将 MyProps 重命名为 UsersResponse（也适用于 props: UsersResponse）。然后，您可以在任何需要的地方重复使用它。