Adding typescript typings to react components written in javascript

Question

I have a set of react components written in javascript and flow which I would like to add typings to support typescript. I'm not entirely sure how to approach this so any help would be appreciated. Here's my project structure:

/
|_src
  |_index.js
  |_components
    |_index.js
    |_ComponentName
      |_index.js
      |_ComponentName.js

Do you want to auto-generate the .d.ts from your .ts files or maintain your own .d.ts files? — styfle
– styfle, Commented Apr 18, 2018 at 15:31
I don't have any .ts files yet, so I think maybe maintain my own for now. — wmik
– wmik, Commented Apr 19, 2018 at 11:50
I suggest reading the official docs and also looking at DefinitelyTyped for real-life implementations. For example, tape is short and sweet. — styfle
– styfle, Commented Apr 19, 2018 at 16:29

wmik · Accepted Answer · 2018-04-20 07:55:10Z

Update

I've tried these approaches so far:

// inside ComponentName folder
// index.d.ts
// import {ComponentName} from '/path/to/ComponentName/folder'

import * as React from 'react';

export = ComponentName
export as namespace ComponentName;

declare namespace ComponentName {
  interface ComponentProps { }
  const ComponentName: React.SFC<ComponentProps> // for stateless functional components
}

Alternative #2

// inside ComponentName folder
// index.d.ts
// import ComponentName from "ComponentName";
declare module "ComponentName" { // play around with this ex: `projectName/ComponentName`
  import * as React from 'react';
  interface ComponentProps { }
  const ComponentName: React.SFC<ComponentProps>; // stateless fn component
  export default ComponentName; // play with this to suit your export flavor ex: export {ComponentName}
}

Test it works by creating a .tsx file and importing the components. Needs more work for intellisense in editors but so far it shows missing props error.

negool · Accepted Answer · 2018-04-18 08:15:22Z

0

I haven’t done this myself before but I came across this site that might help you: https://blog.logrocket.com/how-why-a-guide-to-using-typescript-with-react-fffb76c61614

answered Apr 18, 2018 at 8:15

negool

594 bronze badges

1 Comment

wmik Over a year ago

Thanks for the reply. Although I don't really want to have to rewrite to typescript. I was thinking more like bundling *.d.ts files with the library.

Collectives™ on Stack Overflow

Adding typescript typings to react components written in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related