Блог

У меня есть интерфейс, который я использую в компоненте, но как я могу передать все эти данные одним реквизитом, таким как mainInfo = {User}, без указания каждой переменной. Я не хочу, чтобы объект done находился внутри Inteface для всех данных. Пользователь — это объект с другой информацией.

Интерфейс

 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 ) => {
  

Как я передаю реквизиты

       <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}
      />
  

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


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

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

Это не зависит от TypeScript. То, что вы ищете, — это атрибуты распространения JSX, которые работают следующим образом:

 <UserCard {...User} />