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

Question

I have a React/TypeScript component I'm building where I import a mock data object to work with. Since I'm using TypeScript I also have a separate file with the types for each element of the mock data.

I then import both the mock data and the type definitions into my main component.

I'm still learning TypeScript and the problem I'm running into is that I'm getting errors for my mock data stating that it is declared but never used , and I'm getting a type error for my contactGroups saying Cannot find name 'ContactGroup'.ts(2304) Property 'contactGroups' of exported interface has or is using private name 'ContactGroup'.ts(4033) and I have no idea why.

This is my mock data along with the types and my main component below. I've tried a variety of ways to pass everything into my component and I just end up getting similar errors stating that something is declared but never used or doesn't exist on the object type.

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

I see a few issues.

First, you have syntax error in your mock data.

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

---

Cannot find name 'ContactGroup'.ts(2304)

You are using the ContactGroup without importing it. You need to import every type that you explicitly use in your code.

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

---

declared but never used

I believe that's happening for this line:

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

You aren't actually using the imported contacts anywhere, because in your component you do:

const { contactGroups, contacts } = props;

Which creates a now local variable that shadows the imported one. I'm not sure how you intend you use this mock data, but you need to actually use the imported mock data somewhere.

---

Property 'contactGroups' of exported interface has or is using private name 'ContactGroup'.ts(4033)

I don't know what this one's about, or where you're seeing it exactly, but it might be fixed when you import the type.