Попытка ссылаться на фиктивный объект данных в моем компоненте React / TypeScript, а также импортировать подходящие типы как Props

Question

У меня есть компонент React / TypeScript, который я создаю, где я импортирую фиктивный объект данных для работы. Поскольку я использую TypeScript, у меня также есть отдельный файл с типами для каждого элемента фиктивных данных.

Затем я импортирую и фиктивные данные, и определения типов в мой основной компонент.

Я все еще изучаю TypeScript, и проблема, с которой я сталкиваюсь, состоит в том, что я получаю ошибки для моих фиктивных данных, утверждающих, что это declared but never used, и я получаю ошибку типа для моих contactGroups, говорящих Cannot find name 'ContactGroup'.ts(2304) Property 'contactGroups' of exported interface has or is using private name 'ContactGroup'.ts(4033) и Я понятия не имею, почему.

Это мои фиктивные данные вместе с типами и моим основным компонентом ниже. Я пробовал множество способов передать все в мой компонент, и я просто получаю похожие ошибки, утверждающие, что что-то объявлено, но никогда не используется или не существует в типе объекта.

Mock Data

export const contacts = {
  count: 1,
  contactGroups: [
    {
      contactGroup: 'Family',
      count: 17,
      contacts: [
        {
          member: 'Uncle'
          lastName: 'BILLIARDS',
          firstName: 'BENJAMIN',
          addresses: [
            {
              addressLine1: '123 FAMILY ST',
              addressLine2: 'APT 1208',
              city: 'ATLANTA',
              state: 'GEORGIA',
              zipCode: '12345',
            },
            {
              addressLine1: '456 WORKING BLVD',
              addressLine2: '',
              city: 'ATLANTA',
              state: 'GEORGIA',
              zipCode: '12345',  
            }
          ]
        }
      ]
    }
  ]
}

TYPE DEFINITIONS

export type Contacts = {
  count: number;
  contactGroups: ContactGroup[];
};

export type ContactGroup = {
  contactGroup: string;
  count: number;
  contacts: Contact[];
};

export type Contact = {
  member: string;
  lastName: string;
  firstname: string;
  addresses: Address[];
};

export type Address = {
  addressLine1: string;
  addressLine2: string;
  city: string;
  state: string;
  zipCode: string;
};

Main Component

import React from 'react';
import { contacts } from '../../mock-data/contacts-mock-data';
import { Contacts } from '../../types/contacts';

type Props = {
  contacts: Contacts[];
  contactGroups: ContactGroup[];
};

export const ContactGroupsSection = (props: Props) => {
  const { contactGroups, contacts } = props;
  console.log(contacts)

  let groups = () => {
    for (let i = 0; i < props.contactGroups.length; i++) {
      console.log(contactGroups[i]);
    }
  };

  return <div>{groups}</div>;
};

Answer 1

Я вижу несколько проблем.

Во-первых, у вас есть синтаксическая ошибка в ваших фиктивных данных.

    {
      member: 'Uncle' // <- missing comma here
      lastName: 'BILLIARDS',
      firstName: 'BENJAMIN',

---

Не удается найти имя 'ContactGroup'.ts ( 2304)

Вы используете ContactGroup без его импорта. Вам необходимо импортировать каждый тип, который вы явно используете в своем коде.

import { Contacts, ContactGroup } from '../../types/contacts';

---

объявлен, но никогда не использовался

Я считаю, что это происходит для этой строки:

import { contacts } from '../../mock-data/contacts-mock-data';

Вы фактически нигде не используете импортированные контакты, потому что в своем компоненте вы делаете:

const { contactGroups, contacts } = props;

, которая создает локальную переменную, которая затемняет импортированную. Я не уверен, как вы собираетесь использовать эти фиктивные данные, но вам нужно где-то использовать импортированные фиктивные данные.

---

Свойство contactGroups экспортируемого интерфейса имеет или использует закрытое name 'ContactGroup'.ts (4033)

Я не знаю, о чем это, или где вы его видите, но это может быть исправлено при импорте типа.