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

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”已经或正在使用专用名称“ContactGroup”..ts(4033)

我不知道这个是关于什么的，也不知道你到底在哪里看到它，但是当你导入这个类型时，它可能是固定的。