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

Question

我目前正在使用 TypeScript 开发一个 React 项目，我遇到了一个非常愚蠢的问题，而且最重要的是非常烦人......

例如，我创建一个名为的虚拟组件Page，需要 apage类型Page作为 props：

interface Props {
  page: Page
}

export interface Page {
  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, { Page } from './component/Page'  // ts-error: 'Duplicate identifier 'Page''

因此，为了避免这个问题，我I在所有接口中添加了前缀IPage，但我确信有一种更优雅的方法来做到这一点。你怎么处理这个问题？

Answer 1

你的解决方案很接近。只需对两个对象使用相同的导出“样式”，以便可以将它们一起导入。页面将是值和类型的别名。

./component/Page.ts

interface Page { ... }
const Page: ...

export default Page

./应用程序.ts

import Page from './component/Page'

const pageData: Page = { id: ... }
const pageComponent = Page