How can I use no-typescript React component in TypeScript?

Question

I am beginner in React and Typescript. I have a problem with using react component e.g. https://www.npmjs.com/package/react-toggle-button in typescript.

I generated types by Visual Studio.

Btw import ToggleButton from 'react-toggle-button'; error :/ClientApp/types/react-toggle-button"' has no default export.

So, I imported this way:

import * as ToggleButton from 'react-toggle-button';


 <ToggleButton
                        value={this.state.influencer.billingVATPayer || false}
                        onChange={(e: any) => { console.log(e) }}
                    />

My error: (TS) JSX element type 'index' is not a constructor function for JSX elements. Property 'context' is missing in type 'index'.

Can no-typescript modules be imported in some way?

My Typescript version: 3.2.4 My React version: 16.7.0

Thank you advance

Typically for non-ts components, author or the community creates d.ts files in @types repo. It's not there for this component at the moment. You can either create one yourself. Maybe checkout @types/react-toggle for a similar example. Or you can try raising an issue in the component's repo to ask the dev to provide one. — hazardous
– hazardous, Commented Feb 4, 2019 at 4:25

Adam K · Accepted Answer · 2020-04-01 18:14:25Z

3

Sometimes, packages have an "@types/" version you can install instead of the normal one which includes the types for the items you need/want to import (e.g https://www.npmjs.com/package/@types/react). In cases where this is not an option, you can either:

A) Create your own .d.ts file and create your own types for the package your trying to import as @hazardous mentioned.

Or you can

B) Edit your tsconfig.json file and add the property "allowJs" and set it to true which allows JS files to be imported into Typescript files without the linter or compiler complaining. This is particularly useful in large codebases (or even small) that are transitioning to Typescript and can't immediately convert all of there files/components to Typescript. Shout out to @Juraj Kocan for mentioning this as well.

edited Apr 1, 2020 at 18:14

answered Feb 18, 2020 at 21:23

Adam K

717 bronze badges

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

1 Comment

Dave Munger Over a year ago

For me, setting allowJS did not fix the problem. Components written in TS complain about components which were not written in TS, essentially forcing me to migrate every single component in a large, enterprise code-base to TS all at once (which of course is not doable). I'm still unable to find any workaround for this.

Collectives™ on Stack Overflow

How can I use no-typescript React component in TypeScript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related