3

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?

ciz30
  • 413
  • 2
  • 11
  • 19

1 Answers1

5

Remove the export keyword.

type CommonProps = {
  openItem: string;
  getValue: (e: React.MouseEvent) => void;
};
kind user
  • 40,029
  • 7
  • 67
  • 77
  • or import the type from it location – felixmosh May 02 '20 at 19:14
  • @felixmosh Not really, the whole target about types.dev.ts is to be able to use interfaces without a need to import it. – kind user May 02 '20 at 19:58
  • Where can I find documentation about this? My problem is that if I try to import types, it also stops working. Using the import or export keyword breaks auto-type-discovery. – w00t Feb 12 '21 at 10:26
  • 1
    Found an explanation: https://stackoverflow.com/a/51114250/124416 – w00t Feb 12 '21 at 10:28