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

Question

我正在构建一个React/TypeScript组件，在那里我导入了一个要使用的模拟数据对象。由于我使用的是TypeScript，所以我还有一个单独的文件，其中包含模拟数据的每个元素的类型。

然后，我将模拟数据和类型定义都导入到我的主组件中。

我仍在学习TypeScript，遇到的问题是，我的模拟数据出现了错误，说它是declared but never used，而我的联系人组出现了类型错误，说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(

我不知道这是关于什么的，也不知道你在哪里看到它，但当你导入类型时，它可能会被修复。