尝试在我的React / TypeScript组件中引用模拟数据对象，同时还将匹配类型作为Props导入

我正在构建一个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>;
};
回答如下：

我看到一些问题。

首先，您的模拟数据中有语法错误。

    {
      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'具有或正在使用私有名称'ContactGroup'.ts（4033）

我不知道这是什么意思，或者您确切地在哪里看到它，但是导入类型时它可能是固定的。