CODEWITHSUNDEEP
reactjstypescriptreact-tsx
Remi
Remi

Reputation: 5367

How to make use declaration file for a React component?

I would like to separate the type and interface definitions from my component code. This would make the jsx file smaller and easier te read.

I created the following two files:

./Header/Header.d.ts

export type HeaderProps = {
  logo?: string;
}

For the following component:

./Header/Header.tsx

import React from 'react';
import { HeaderProps } from './Header'; // gives error

const Header: React.FC<HeaderProps> = ({ logo }) => (
  <header>
    <img src={logo} alt="Logo" />
  </header>
);

However I can't import the type declaration file in my component. I receive the following error:

TS2614: Module '../Header/Header' has no exported member 'HeaderProps'. Did you mean to use 'import HeaderProps from '../Header/Header'?

Am I doing this wrong?

Upvotes: 0

Views: 2964

Answers (1)

khierl
khierl

Reputation: 635

you don't need to import the HeaderProps AFAIK when you declare it on .d.ts

Upvotes: 1

Related Questions