Javascript 如何在不指定Typescript中的每个变量的情况下发布传递数据

我有一个我在组件中使用的接口，但我如何通过mainfo={User}这样的道具传递所有这些数据，而不指定每个变量。我不希望所有数据都在接口内完成对象。 用户是具有不同信息的对象

接口

export interface MainInfo {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
  country: string;
  speaks: Languages[];
  learn: Languages[];
  isOnline: boolean;
  isFriend: number;
  photoUrl: string;
}

import { MainInfo } from '../../interfaces/Interface';

export const UserCard: React.FC<MainInfo> = ( mainInfo ) => {

我使用接口的组件

import { MainInfo } from '../../interfaces/Interface';

export const UserCard: React.FC<MainInfo> = ( mainInfo ) => {

从“../../interfaces/Interface”导入{mainfo}；
导出常量用户卡：React.FC=（mainfo）=>{

我如何传递道具

      <UserCard
        id={User.id}
        firstName={User.firstName}
        lastName={User.lastName}
        age={User.age}
        country={User.country}
        speaks={User.speaks}
        learn={User.learn}
        isOnline={User.isOnline}
        isFriend={User.isFriend}
        photoUrl={User.photoUrl}
      />

但我能做点像这样的事吗

      <UserCard
        mainInfo={User}
      />

接口主信息{
id：编号；
名字：字符串；
lastName:string；
年龄：人数；
国家：字符串；
讲：语言[]；
学习：语言[]；
等值线：布尔；
isFriend：数字；
photoUrl:string；
}
导出接口IProps{
mainfo:mainfo；
}
从“../../interfaces/Interface”导入{IProps}；
导出常量用户卡：React.FC=（mainfo）=>{

这不是特定于TypeScript的。您需要的是这样的工作方式：

<UserCard {...User} />

是的，您可以完全做到这一点，只需将道具类型更改为

{mainInfo:mainInfo}

。或者只是扩展用户对象，

。我认为道具类型属于组件，而不是模型。