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 eg 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

Answer 1

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 (eg 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.