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?

kind user · Accepted Answer · 2020-05-02 19:02:48Z

6

Remove the export keyword.

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

answered May 2, 2020 at 19:02

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

felixmosh Over a year ago

or import the type from it location

kind user Over a year ago

@felixmosh Not really, the whole target about types.dev.ts is to be able to use interfaces without a need to import it.

w00t Over a year ago

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 Over a year ago

Found an explanation: stackoverflow.com/a/51114250/124416

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related