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?


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.


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

export default Page


import Page from './component/Page'

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

Answered By – Tiberiu Maran

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.