Avoid duplicate identifier between objects and interfaces in TypeScript

I’m currently working on a React project using TypeScript and I come across a very stupid problem and on top of that very annoying…

For example I create a dummy component called Page that need a page of type Page as 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

So far no problem but they’re coming as soon as I decide to import the component with the type:

import Page, { Page } from './component/Page'  // ts-error: 'Duplicate identifier 'Page''

So in order to avoid this problem I added the prefix I to all my interfaces like IPage but I’m sure there’s a more elegant way to do it. How do you handle that?

Source: ReactJs