Reactjs 避免TypeScript中对象和接口之间的标识符重复

我目前正在使用TypeScript进行一个React项目，我遇到了一个非常愚蠢的问题，除此之外，还有一个非常烦人的问题

例如，我创建了一个名为

Page

的虚拟组件，它需要一个

Page

类型的

Page

作为道具：

界面道具{
第页：第页
}
导出接口页{
身份证号码
类别：PageCategory
路径：字符串
名称：string
}
常量页面：React.FunctionComponent=（道具）=>{
...
返回(
...
{props.page.name}
...
导出默认页面

到目前为止还没有问题，但只要我决定导入类型为的组件，它们就会出现：

import Page，{Page}from./component/Page'//ts错误：“重复标识符”页“

---

因此，为了避免这个问题，我将前缀

I

添加到我所有的界面中，比如

IPage

，但我确信有一种更优雅的方法可以做到这一点。您如何处理这个问题？

主要的问题是，您的界面和组件的名称相同，并且您都在导出它

最简单的解决方案是重命名界面/类型。只需在其中添加单词

Props

，它就仍然有意义（或任何你喜欢的后缀）

---

您的解决方案已关闭。只需对两个对象使用相同的导出“样式”，即可将它们一起导入。页面将是值和类型的别名

/组件/Page.ts

接口页{…}
常数页：。。。
导出默认页面

/附件ts

从“./component/Page”导入页面
常量pageData:Page={id:…}
const pageComponent=Page

导入时，您可以随意命名默认导出…但真正的解决方案是为不同的东西指定不同的名称。已经有一些没有导入的东西：exported

Page

get

any

type@AlekseyL.

但真正的解决办法是给不同的东西取不同的名字

是的，当然，但会是什么类型

页面

的另一个名称？因为对象像

页面

@ford04，我真的不明白示例中的问题是什么？@johannchopin不清楚您要导出什么，接口

页面

和

常量页面

冲突在一起。正如Aleksey所说，只需给它们不同的名称。是的，我知道：

>因此，为了避免这个问题，我在我所有的界面（如IPage）中添加了前缀I。但是我不鼓励这样做，而且在这里也没有任何意义。这个界面不是
道具
。它是一个包含
页面
中所有数据的对象。但是叫他
页面对象
和叫它
IPage一样有意义这不是一个好的做法。@johannchopin是的
PageObject
确实很好，而且比
PageProps
更好。只要你更改界面的名称（这是我的答案所建议的）你的问题会得到解决。你读过我的评论的结尾了吗？像这样添加一个后缀不是一个好的做法，就像使用<代码> i>代码>前缀，这是非常令人沮丧的。@约翰。肖邦，如果是这样的话，为什么不把你的组件命名为“页面组件”呢？如果你还把它看作是一个“坏习惯”的话。，为什么不创建一个专用于接口的文件，这样您就不必将其与同名组件一起导出？是的，我认为重命名react组件也更有意义。但是后缀
组件
也不是一个好的做法。我已经实现了“所有接口一个文件”的概念但是，是的，这样做是非常肮脏的。我在这个主题上发布了一个问题，最后是我搜索的回复！谢谢你这么好的工作！你值得你的
赏金
这真是一个好问题。我以前也遇到过这个问题，我选择了一个给它起另一个名字的解决方法。但我还是不能放弃它。谢谢@johannchopin's坚持，最后我也看到了这个可接受的答案。然而，有一个问题是，使用声明合并意味着我不能将声明与组件分开，它必须在同一个模块中，对吗？这违背了将所有声明放在一个地方的最佳做法。对此有何评论，伙计们？
interface Props {
  page: PageProps
}

export interface PageProps {
  id: number
  category: PageCategory
  path: string
  name: string
}

const Page: React.FunctionComponent<Props> = (props) => {
  ...
  return (
    ...
    <h1>{ props.page.name }<h1/>
    ...


export default Page

import Page, { PageProps } from './component/Page'