Avoid duplicate identifier between objects and interfaces in TypeScript

Issue

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?

Solution

Your solution is close. Just use the same export "style" for both objects, so that you can import them together. Page will be an alias for both the Value and the 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 

Answered By - Tiberiu Maran