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

Question

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

例如，我创建了一个名为 Page 的虚拟组件，它需要 page 类型的 Page 作为道具：

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

您的解决方案很接近。只需对两个对象使用相同的导出“样式”，以便您可以将它们一起导入。 Page 将是 Value 和 Type 的别名。

./component/Page.ts

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

export default Page

./App.ts

import Page from './component/Page'

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

Answer 2

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

最简单的解决方案是重命名您的界面/类型。只需添加单词 Props 即可使其仍然有意义（或您喜欢的任何后缀）

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'