How using types.d.ts file in React & TypeScript project

Question

i have React & TypeScript project. Here is i have folder structure in some component like:

 - ComponentFolder
  - index.tsx
  - types.d.ts
  - ChildComponent
    - index.tsx

I know that if i will put my types in types.d.ts file which in root of my component directory, I can use these types in childComponents in this directory.

So i tried;

my types.d.ts file:

export type CommonProps = {
  openItem: string;
  getValue: (e: React.MouseEvent) => void;
};

and in child component:

import * as React from "react";

const ChildComponent: React.FC<CommonProps> = (props) => {
  return (
    <div>
      {props.openItem}
    </div>
  );
};

export default ChildComponent;

But getting error:

cannot find CommonProps error.

How i know if i have some file d.ts in the directory i can use these types in this directory without import.

where i mistaken?

Answer 1

Remove the export keyword.

type CommonProps = {
  openItem: string;
  getValue: (e: React.MouseEvent) => void;
};